ブラウザで動くインタラクティブアート

制作時期: 2026/06~

概要

JavaScriptとCanvas APIだけで動く，インタラクティブな生成アート・物理シミュレーション集です。 インストール不要，ブラウザを開くだけで動きます。

各作品はパラメータをスライダーでリアルタイムに調整でき，挙動の変化を直感的に観察できます。

すべてClaudeCodeで作成しています．

技術スタック

項目	内容
言語	JavaScript（バンドラなし）
描画	Canvas 2D API
依存ライブラリ	なし（完全にゼロ依存）
動作環境	モダンブラウザ（Chrome / Firefox / Safari）

作品紹介

ムクドリの群れ — Boids

Craig Reynoldsの Boids アルゴリズムを実装。分離・整列・結合という3つのシンプルなルールだけで，数百羽の鳥が複雑な群れ行動を自己組織化する。パラメータを変えると群れが散り散りになったり，完全に同期して動いたりと，創発現象を直接いじって体験できる。

フラクタル植物 — 成長シミュレーション

L-System（Lindenmayer System）で植物の形を生成。 ずっと見ていられるように，時間が経過すると一部が枯れて，新しい枝が成長します．

音楽ビジュアライザー

Web Audio API でマイク入力または音声ファイルをリアルタイム解析し，周波数スペクトルをビジュアル化。音のない空間でも波形の美しさを観察できる。 デフォルトではマイクがオンになっていないので，「マイクを起動」を押してマイクの使用を許可すること。

パーティクル物理サンドボックス

重力・反発係数・摩擦をスライダーで制御しながら粒子の挙動を観察する。マウスでパーティクルを引き寄せたり弾いたりしてインタラクティブに遊べる。

水の波紋

クリックやドラッグで水面に波紋を起こすシミュレーション。減衰・波の強さ・色テーマを調整でき，雨モードでは自動的に無数の雨粒が降り注ぐ。

炎 — ずっと見ていられる火

Doom ファイアアルゴリズム（格子法）で炎を生成し，CSS blur と additive compositing によるブルームグローで光の滲みを表現。火の粉パーティクルが舞い上がり，風がゆっくり変化して炎が自然に揺れ続ける。強さ・風・火の粉・高さをリアルタイムに調整でき，ドラッグで燃料を追加できる。

雨と水たまり — 窓ガラスを伝う雨粒

ボケた夜景を背景に，結露したガラスへ雨粒が落ちるシミュレーション。水滴は表面張力で留まり，重くなると滑落して軌跡を残す。ドラッグするとガラスを拭けて背景の夜景が見える。雨量・風・表面張力・結露をリアルタイムに調整できる。

流体シミュレーション — インクが水に溶けていく

Navier-Stokes方程式を格子法（Jos Stam 1999）で解く流体シミュレーション。ドラッグすると選んだ色のインクが水に溶け出し，粘度・拡散・渦巻き・フェードをリアルタイムに調整できる。