Canvas
はじめに 準備 準備その１：変換規則 準備その２：Canvasによるアニメーション デモ 参考 実装 動画ツール はじめに いままで作っているもの。 CanvasによるLangton's Loops - 仮想計算機構 Tempesti loop：自己複製しながら文字を描くセルオートマトン - 仮…
フーリエ級数を用いて絵を描くという試みをいろんなところで見かけます。 一番有名なのは以下の動画でしょうか。 初音ミクを描いちゃったという方もいらっしゃいます。 Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜車輪の再発明でいいじ…
ダイクストラ法の実行過程を可視化しました。 以下、実行の様子です。 サイトからも実行の様子を見れます。 http://riverta.net/gallery/optimization/index.html 参考文献・参考サイト アルゴリズム IT Text 数理最適化 | Ohmsha JavaScript Infinity - Jav…
↓の動画が面白かったので自分で実装しました。 ↓ここで見れます。 http://riverta.net/gallery/trigonometry/beautiful_trigonometry/main.htmlコードは以下の通りです。 <html> <body> <script type="text/javascript" src="trigonometry.js"></script> </body> </html> const WIDTH = 500; const HEIGHT = 500; const canvas = document.createElemen…
筆者の環境 OS : Windows 10 CPU : Intel Core i5 2.60GHz IDE : VSCode 1.46.1 シェル：Powershell 画像処理とかをやりたいので環境構築。 以下のobikata氏による手順を踏みました。 まずは Git をインストール 今回は Git for Windows v2.27.0 を以下から…
はじめに 自己複製するオートマトンには様々なパターンがあり、Wikipediaには簡易的な比較表があります。 Langton's loops - Wikipedia 比較表のうち、Langton's loopとByl's loopは実装しました。 今回はTempesti loopと呼ばれるセルオートマトンを実装しま…
はじめに プログラム 結果 参考文献・参考サイト 自己複製子 動画 デザイン JavaScript はじめに aidairyさんの記事↓に刺激されて自分でも作ってみたくなったのでラングトンのループを再現してみます。 ラングトンの自己複製オートマトン - 人工知能に関する…
円を使ってバブルソートを可視化しました。
CanvasのRectangleを使ったアニメーションを以前作りました。*1今回はそのプログラムを利用してバブルソートを可視化してみました。何番煎じだよって感じではありますが、車輪の再発明も大事ってことで。 *1:https://riverta1992.hatenablog.com/entry/2020/…
続き*1です。 カラフルな四角形を使ってアニメーションを作ります。 四角形が右下に向かって少しずつ動いていきます。 *1:https://riverta1992.hatenablog.com/entry/2020/05/16/114417
Schemeで図形を描くのに疲れたのでCanvasの勉強を始めました。 扇形をつなげて円を描いてみます。 扇形をシャッフルしてみます。 参考文献 ・扇形の描画 https://tech-blog.s-yoshiki.com/entry/101 ・色の指定 http://www.htmq.com/canvas/strokeStyle.shtm…
