フレームワークを整える
中級p5.js を整える。
＝ setup() で準備し draw() を回すだけで絵が動き出す——ブラウザ内で実際に動かす
サンプルコード（クリックでエディタに挿入）
JS EDITOR p5.js 2.3.2
Ctrl/⌘ + Enter で実行
PREVIEW
CONSOLE
「▶ 実行」を押すとここにログが出ます。
このページについて
- ライブラリは
cdn.jsdelivr.netから読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。 - プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
- 「停止」は iframe を破棄して作り直します。draw() ループを使うサンプルはアニメーションが回り続けるので、書き換える前に一度「停止」を押すか、そのまま「▶ 実行」で作り直してください。
- 無限ループに近い重い処理を書くと、プレビュー内のタブ（iframe）が固まることがあります。その場合も「停止」で iframe ごと破棄できます。
このツールについて
p5.js は setup() で1回だけ準備し、draw() を毎フレーム呼び直すだけで絵が動き出すライブラリです。実際にコードを書き換えながら、その場で動きを確かめられます。
左にコード、右にプレビュー。p5.js の setup()/draw() を書き換えて、円・マウス追従・アニメーション・ランダムウォークをその場で動かせます。
主な機能
- 4サンプル（円・マウス追従・アニメーション・ランダムウォーク）
- 左エディタ／右プレビュー＋console の2カラム
- 「■ 停止」で iframe を破棄して draw() ループを止める
- p5.js は cdn.jsdelivr.net から初回のみ・送信ゼロ
よくある質問
Q. 書いたコードはサーバーに送られますか？
A. 送られません。p5.js（cdn.jsdelivr.net から初回のみ）を読み込んだサンドボックス iframe 内で実行され、コードと結果は端末内で完結します。
Q. draw() ループが回り続けて画面が固まったように見えます。
A. 「■ 停止」で iframe 自体を破棄できます。再度「▶ 実行」を押せば作り直されます。
Q. キャンバスはどこに表示されますか？
A. setup() 内の createCanvas() が生成するキャンバスは、プレビュー iframe の body 直下に自動的に追加されます。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
