数式スケッチ
ほんの数百字の数式が、渦を巻き、羽ばたき、脈打つ。sin・cos の反復だけで描く、動く生成アートのギャラリーです。厳選14点はすべてこのサイトのオリジナルで、いま画面で動いているコードそのものを全文掲載しています。気に入ったらコピーして、数字をひとつ変えて遊んでください。
使い方と例
スケッチ「蝶の軌道」
スケッチ「蝶の軌道」を表示中ローレンツが1963年の気象モデルで見つけた3本の微分方程式を、そのまま毎フレーム600歩ずつ数値積分する。軌道は2つの渦のどちらに巻くかを決して繰り返さないのに、全体としては蝶の形からはみ出さない。視点が cos(t/280) でゆっくり回り、真横を通るとき翼は一本の線に畳まれる。
t=0 draw=_=>{t++||createCanvas(w=720,w)+strokeWeight(1.4)+background(0);t<2&&(x=.1,y=0,z=25);background(0,5);stroke(255,140);o=cos(t/280);s=sin(t/280);for(i=0;i<600;i++){x+=(y-x)*.02;Y=y+(x*(27-z)-y)*.002;z+=(x*y-z*2.7)*.002;y=Y;X=x*o+y*s;point(360+X*11.5,645-z*12)}}
スケッチをえらぶ
カーソルを乗せると動きます。クリックで上のステージへ。
数式スケッチとは
数式スケッチは、このサイトの生成アートの形式です。ルールは3つ。①1つのスケッチはコード1式だけ（画面に載せているコードそのものが実行されます。 別実装のデモを見せて「概念コード」を添える、ということをしません）。②道具は「三角関数・反復・残像」の3点だけ。③どのスケッチも数百字未満に収めます。 短さは制限ではなく美学で、数式の骨格がそのまま透けて見える長さを保つためのものです。
絵づくりの基本は3点セットの組み合わせです:
- 三角関数 — sin/cos で座標や色相を揺らすと、機械的な配置に有機的なうねりが生まれる
- 反復 — 同じ式を数千〜数万回まわして点を打つ。半径と角度 (r, θ) で並べれば渦や花になり、式の出力を次の入力へ戻す反復写像なら、 誰も設計していない形が軌跡として浮かび上がる
- 残像 — 半透明の黒
background(0,.1)を毎フレーム重ねると、前のフレームがうっすら残り、動きの軌跡が時間として画面に積もる
短く書くための定番技法も、コードを読むときの手がかりになります:
t=0 / draw=_=>{...}— 毎フレーム呼ばれる draw 関数をアロー関数で直接定義し、時間 t を進めるt++||createCanvas(...)— 初回だけ t が 0（偽）なので 右辺の初期化が走る。2フレーム目からはスキップ。if 文を書かない初期化A()+B()+C()— 戻り値を足し算で捨てながら 複数の初期化をひとつの式に詰めるfor(i=1e4;i--;)— 1万回ループの最短形。 大量の点を打つ点描のスケッチはほぼこの形
各スケッチの技法メモを読み比べると、同じ3点セットの組み合わせ方だけで、トーラスにも白鳥にも 貝殻にもなることがわかります。数字をひとつ変えるだけで別の表情になるので、 コピーして手元で崩してみるのがいちばんの近道です。
よくある質問
コピーしたコードはどこで動かせますか？
コードは p5.js（グローバルモード）のスケッチとしてそのまま動きます。p5.js Web Editor などに貼り付ければ、このページと同じ絵が描かれます。収録スケッチはすべて実際の p5.js（v1.9）で同一コードの動作を確認済みです。このページ内の再生には p5.js 互換の軽量レンダラー（自前実装・依存ゼロ）を使っていますが、実行しているコード文字列は表示されているものと同一です。
コードを使ったり改変したりしてもいいですか？
どうぞ。すべてこのサイトのオリジナルで、コピー・改変・公開に制限はありません（クレジットも不要です）。数値をひとつ変えるだけで別の表情になるので、改変から始めるのがおすすめです。
こんなに短いコードでなぜ絵になるのですか？
ほとんどのスケッチは「大量の点を数式で配置する」だけでできています。座標に sin/cos を混ぜると有機的な揺れが生まれ、色相を角度や距離に連動させると自然なグラデーションになり、半透明の背景を重ねると動きの軌跡が残る。この3つの組み合わせが、短さのわりに豊かな絵を作ります。
AI が描いているのですか？
いいえ。ページ内の描画は収録コードの数式を計算しているだけで、実行時に AI もサーバー通信も使いません。すべてお使いの端末のブラウザ内で完結します。