コードでえがく、
うごく実験帳。
p5.js は、絵を描くように プログラムを書ける JavaScript ライブラリ。数式とノイズと少しの規則だけで、 生き物のような群れ、自然が生む模様、音に反応する光が生まれます。 ここにある9つのスケッチは、すべてその場で動き、さわれて、コードも読める。
流れ場
FLOW FIELD
パーリンノイズが生む見えない流れに、数千の粒子が身をまかせる。
向日葵の螺旋
PHYLLOTAXIS
黄金角137.5°だけで、ひまわりの種が描く自然の最適配置。
群れ
BOIDS / FLOCKING
分離・整列・結合の3規則だけで、数百の個が一つの生き物になる。
再帰の樹
RECURSIVE TREE
自分を呼び出す一つの関数が、無限に枝分かれする木を育てる。
ライフゲーム
GAME OF LIFE
生と死のたった4つの規則から、自己複製や移動が立ちあがる。
反応拡散
REACTION–DIFFUSION
2つの化学物質の拡散が、珊瑚や豹の斑紋のような模様を自然に生む。
万華鏡
KALEIDOSCOPE
あなたの一筆が、回転対称で12方向へ同時に咲く。完全にあなたの作品。
音に踊る
SOUND REACTIVE
マイクが拾った周波数が、放射状のスペクトルとして脈打ち回る。
3Dノイズ核
NOISE SPHERE
ノイズで脈打つ球体を、WEBGLモードでリアルタイムに回す。
ゆらぐ色面
FRAGMENT SHADER
p5.jsはGPUも操る。GLSLで書いたノイズが全画面を流れ、色が脈打つ。
文字の粒子
PARTICLE TYPE
数千の粒子が集まって文字になり、さわると散ってまた集まる。
水面の波紋
RIPPLES
クリックした場所に雫が落ち、広がる波紋が干渉して水面のうねりを描く。
ABOUT p5.js
絵を描くように、書く。
p5.js は Processing の思想を受け継ぐ、 初学者にもやさしいクリエイティブコーディング用ライブラリ。setup()で準備し、draw()が毎フレーム呼ばれる——たったそれだけで、アニメーション・インタラクション・3D・音までを扱えます。
このサイトの作品はどれも、各画面の「コードを見る」ボタンで 核となる実装を読めます。短いコードが世界を動かす感覚を、ぜひ手で確かめてください。
すべてブラウザ内で完結 / サーバー送信なし / オフライン対応(PWA)