CREATE
数式スケッチ
ほんの数百字の数式が、渦を巻き、羽ばたき、脈打つ。sin・cos と極座標だけで描く、動く生成アートのギャラリーです。24作品すべてこのサイトのオリジナルで、いま画面で動いているコードそのものを全文掲載しています。気に入ったらコピーして、数字をひとつ変えて遊んでください。
作品「虹の環」
作品「虹の環」を表示中999個の点をドーナツ面（トーラス）に置き、奥行きは透視投影の割り算 q=222/(5+z') だけで出す。色相をリング角度 u に沿わせ、管の座標 v を時間で流すと表面がうねって見える。
t=0 draw=_=>{t++||createCanvas(w=720,w)+colorMode(HSB,1)+strokeWeight(5);background(0,.2);for(i=0;i<999;i++){u=i*9.9;v=i*.61+t/50;r=2+cos(v);z=sin(v);y=r*sin(u);q=222/(5+y*.8+z*.6);stroke((u/TAU+t/99)%1,.8,1);point(w/2+r*cos(u)*q,w/2+(y*.6-z*.8)*q)}}
作品をえらぶ
カーソルを乗せると動きます。クリックで上のステージへ。
数式スケッチとは
数式スケッチは、このサイトの生成アートの形式です。ルールは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万回ループの最短形。 大量の点を打つ点描作品はほぼこの形
24作品の技法メモを読み比べると、同じ3点セットの組み合わせ方だけで、トーラスにも蛍にも 貝殻にもなることがわかります。数字をひとつ変えるだけで別の表情になるので、 コピーして手元で崩してみるのがいちばんの近道です。
よくある質問
コピーしたコードはどこで動かせますか？
コードは p5.js（グローバルモード）のスケッチとしてそのまま動きます。p5.js Web Editor などに貼り付ければ、このページと同じ絵が描かれます。収録24作品はすべて実際の p5.js（v1.9）で同一コードの動作を確認済みです。このページ内の再生には p5.js 互換の軽量レンダラー（自前実装・依存ゼロ）を使っていますが、実行しているコード文字列は表示されているものと同一です。
コードを使ったり改変したりしてもいいですか？
どうぞ。24作品すべてこのサイトのオリジナル作品で、コピー・改変・公開に制限はありません（クレジットも不要です）。数値をひとつ変えるだけで別の表情になるので、改変から始めるのがおすすめです。
こんなに短いコードでなぜ絵になるのですか？
ほとんどの作品は「大量の点を数式で配置する」だけでできています。座標に sin/cos を混ぜると有機的な揺れが生まれ、色相を角度や距離に連動させると自然なグラデーションになり、半透明の背景を重ねると動きの軌跡が残る。この3つの組み合わせが、短さのわりに豊かな絵を作ります。
AI が描いているのですか？
いいえ。ページ内の描画は収録コードの数式を計算しているだけで、実行時に AI もサーバー通信も使いません。すべてお使いの端末のブラウザ内で完結します。