簡単な数学ルールで作る16x16ドットアニメーション

• 16x16のドットアニメーションは、簡単な数学ルールによって作られる
• 各ドットの動きは、数学的な式と演算に基づいている
• 最小限のアルゴリズムと単純なロジックだけで、複雑で魅力的なパターンを生成できる
• 複雑なレンダリング技術がなくても、視覚的に印象的な結果を生み出せる
• この方式は、創造的な可視化やプログラミング教育に活用できる可能性が高い

---

概要

• このアニメーションは、16x16サイズのドット配列をベースに制作されている
• 各ドットの位置や色、または状態が、簡単な数学法則によって刻々と変化する
• この実装方式は、プログラムとして効率的であると同時に非常に直感的でもある
• 複雑で高度な技術がなくても、魅力的で規則的な視覚効果を提供できる
• ビジュアルアート、アルゴリズム的創作、初心者開発者向け教育などへの応用可能性が高い

主な内容

• アニメーションは、16x16の2次元グリッド形式で表現される
• 各ドットの変化は、数式や特定のルールに基づいている
• たとえば、sin、cos、xor、mod のような基本的な数学演算が、ドットの動きや色の決定に活用される
• 精巧な視覚効果を作るために、複雑なコードや外部ライブラリは必要ない
• 単純な式を繰り返し適用するだけでも、独創的なパターンの生成が可能だ

意義と活用可能性

• この方式は、ミニマルなコードでも印象的な結果を生み出せる点に強みがある
• アルゴリズム的思考、数学的直感、視覚的創造性を鍛えるのに役立つ
• アニメーションや可視化がプログラムとしてどのように動作するかを学べる良い例である
• 教育目的、芸術的実験、あるいは創造的なプロジェクトに容易に導入できる
• あらゆる年齢層の初心者開発者やクリエイターにとって、高いアクセシビリティと活用性を持つ

[xcutz]

すごいですね

[ng0301]

わあ…

[GN⁺]

Hacker Newsのコメント

• Tixyは本当に驚異的だ。似たようなものを自分でも作ってみた: https://muffinman.io/pulsar/ というサイトでLEDマトリクス画面向けのアニメーションを作りたかった。当時は tixy を見つけられずに pulsar を作ったが、その後になってようやく tixy を再発見した。似たプロジェクトとして、HTML スライダーを使う https://sliderland.blinry.org/ もある。こういうのは本当に楽しい
• 数年前に tixy を初めて見つけたとき、あまりに気に入ったので、作者の許可を得て https://www.mathsuniverse.com/tixy というサイトを作った。tixy のグリッドにパズルを追加し、学生向けにコンピュータサイエンスの授業で使っている。学生たちはこのパズルに深くハマっている
  • これは最近リリースされた 3D パズルゲーム Replicube を思い出させる。同じ種の原理を 3D で実装している
  • こういうやり方は教育に本当に素晴らしい。私も最初はあの小さな関数群に感嘆して、calculang でクローンを作って実験した。F9 の評価機能を入れて、部分式を選択して結果を見られるようにしたが、これはパターン理解にとても役立った。動画も参照できる: https://www.youtube.com/watch?v=uXUd_-xrycs
  • スマホでも問題なく動く。ただしスマホのキーボードは少し使いづらいが、それでも使用には支障ない。それはスマホの限界だ
  • コンピュータグラフィックスでは、(0,0) 座標は下ではなく左上始まりだ
• tixy でいろいろなアニメーションを作ってみた。ここはとても面白い: https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 、それから白血球が攻撃するパターンも実装した: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%29%2Bt%2F0.7
• 炎のエフェクトも作ってみた: https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
• tixy は Shadertoy のようなサイトの、とても簡単な版だ。この手軽さが自分の好みにぴったり合う
• tixy の作者は Martin Kleppe (@aemkei) で、クワインや JS トリックなどで有名な人だ。ほかのすごいプロジェクトも見られる: https://aem1k.com/world/ , https://aem1k.com/qlock/
• tixy に触発されて、プログラマブルなブラシを持つドローイングアプリを作った: https://fig.sonnet.io このアプリはブラシの動きが圧力や角度ではなく時間によって変化するので、リズムに合わせて描かなければならないのが面白い。仕組みと実装方法はここで見られる: https://untested.sonnet.io/notes/fig-tree-brushes/
• 変わった関数の例も共有する: https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%…
• 五芒星パターンも作ってみた: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • 2匹のヘビの動きも実装した: https://tixy.land/?code=exp%28-%28%28x-7%29**2%29%2F12%29sin%28%28y-7%29%2F2-t%29%09-sin%28%28h%3Dhypot%28x-%3D7%2Cy-%3D7%29-5%29%29exp%28-hh%2F9%29cos%28atan2%28y%2Cx%29%2Bt%29
• 動き続けながら徐々に大きくなる円も tixy で作れる: https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t