Featured image of post ブラウザで触れる、動くビジュアルアート3本を無料で公開した

ブラウザで触れる、動くビジュアルアート3本を無料で公開した

無料。アプリ不要でブラウザだけ。スマホからも開ける。粒が流れる・円が線を描く・光がにじむ、動くビジュアルアートが3つ。タップや指の動きでいじって遊べ、パソコンならクリックやマウスでも同じ。

無料で、アプリのインストールなしスマホのブラウザからも開ける(パソコンでももちろん)。会員登録やログインはいらない。公開ページ に飛ぶと、カードが3枚並ぶ。気になる方をタップするだけで、中の画面が動き出す。

眺めているだけでもいいし、タップしたり画面を指でなぞったりして模様を変えたり、組み合わせを引き直したりできる。パソコンならクリックやマウス移動でもだいたい同じ動きになる。暇つぶしにちょうどいいサイズの「動くビジュアルアート」が3つある、という感じだ。作ったのは個人の遊びで、中身を覗きたい人向けにソースは hide10/genart に置いてある。処理が重いので、古い端末や省電力モードだとカクつくことがある。そのときは別タブでページ単体を開き直すとマシになることが多い。

ギャラリートップの画面

粒子が川みたいに流れる画面

Flow Field に入ると、細かい粒が一斉に流れていく。色は場所と時間で変わる。画面をタップすると、その場の「流れの地図」と色がまるごと入れ替わる。指やマウスでなぞるように動かすと、そこだけ流れが乱れて渦っぽくなる。落ち着いて眺めたいときも、手を入れて遊びたいときも向いてる。

裏では、画面を格子に切って、各マスに「どちら向きに流すか」をノイズで決めている。粒子はその矢印に従うだけ、という単純さで複雑な模様が立ち上がる。

Flow Field の一例(スクリーンショット)

円がたくさん重なって、線をなぞいていく

Fourier Drawing では、小さな円が先端にぶら下がって連なり、その先端が一本の線を描いていく。ハートやトロコイドっぽい曲線など、形を切り替えられる。円の回転が速い遅いで線のキワが変わるので、しばらく見ていると「あ、ここは元の形に収束してるな」と感じ取れる。

数学的には、曲線を点の列にしてフーリエで周波数に分け、それを円の重ね合わせ(エピサイクル)として描いている。式の話は置いておいても、動きそのものが主役で見られるようにしてある。

Fourier Drawing のスクリーンショット

点を打ち続けて、光の筋がにじむ

Strange Attractor は、最初は真っ暗に近い。しばらくすると、同じ計算を繰り返した点の跡が重なって、にじんだ光の帯や雲みたいな塊が浮かび上がる。パラメータは毎回ランダムで、ときどき「何も面白くならない」組み合わせもある。当たり外れがあるのが逆にガチャ感があって好き。

中身は、平面上の簡単な式を何度も代入して点を打ち続ける写像(Clifford / de Jong を切り替え)。同じ場所を通るほど明るくなるように色を足し込んでいる。

Strange Attractor のスクリーンショット

この記事内で Flow Field だけ動かす

下の枠は、本番の Flow Field ページをこの記事の中に小さな窓で読み込んでいるだけだ(動いているのは GitHub Pages 側)。3本まとめては重くなりすぎるので、ここにはこれ一本にした。端末によってはカクつくかもしれない。

Flow Field を別タブで開く

同じリポジトリに、また別の「画面を見せたくなる」デモを足していくつもりだ。気に入ったらブックマークしてもらえるとうれしい。

参考

Next Action

おすすめリンク

この記事に合わせて、関連アイテムを探しやすいリンクをまとめています。

Affiliate Links

AIエージェント設計を深掘りする

AIエージェントや開発まわりを、もう少し詳しく学びたい人向けです。

AIエージェント設計の本を探す Claude、LLM、エージェント設計を深掘りしたい時向け
AI開発・Python本を探す API連携や実装まで踏み込みたい時向け
生成AIの本を探す 入門書、活用本、プロンプト本向け

外部ストアへのアフィリエイトリンクです。気になるものだけ開けば十分です。

B!