p5.js を整える。

＝ setup() で準備し draw() を回すだけで絵が動き出す——ブラウザ内で実際に動かす

p5.js が初めての方は、先にそもそも p5.js とは・どんな場面で使うかをどうぞ。

サンプルコード（クリックでエディタに挿入）

JS EDITOR p5.js 2.3.2

Ctrl/⌘ + Enter で実行

PREVIEW

コンソール

「▶ 実行」を押すとここにログが出ます。

そもそも p5.js とは

プログラムで絵や動きを描く、「コードで作品を作る」ための入口。

p5.js は、図形・色・動き・音などをプログラムで表現するための JavaScript のライブラリです。アーティストやデザイナーが、コードで絵を描くために作られた Processing の考え方を、ブラウザの中で使えるようにしたものです。

circle() や rect() のような短い命令で図形を描き、毎フレーム呼ばれる draw() の中で位置を変えれば動きになります。Processing Foundation が支えるオープンソースで、ゲーム専用の Phaser や 3D 向けの Three.js と比べると、「まず描いてみる」ことに特化しています。

どこで・どんな場面で使うか

プログラミングを初めて学ぶとき

結果がすぐ画面に出るので、変数・繰り返し・条件分岐の意味を目で見て理解できます。
学校・ワークショップでの授業

図形を描くだけで始められるため、プログラミング教育の教材としてよく使われます。
ジェネラティブアート・デザイン作品

乱数や数式から模様を作る作品づくりに向いています。
データの見せ方を試す

数値を図形の大きさや色に変えて、独自の見せ方を作る実験に使えます。
Web サイトの飾りやインタラクション

マウスに反応する背景など、動きのある演出を作るのに使えます。

向いている場面・向いていない場面

向いている：短いコードで絵や動きを試したいとき。思いついたらすぐ動かせるので、試作や学習に合います。
向いている：プログラムの基礎を目で確かめたいとき。動きや色で結果が見えるため、ミスにも気づきやすくなります。
向いていない：本格的なゲームや業務アプリ。ゲームなら Phaser、3D なら Three.js、データのグラフなら Chart.js のように、目的に合った道具のほうが早く作れます。

上の練習場でサンプルを動かし、数字や色を書き換えて、絵がどう変わるか試してみてください。

このページについて

ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
「停止」は iframe を破棄して作り直します。draw() ループを使うサンプルはアニメーションが回り続けるので、書き換える前に一度「停止」を押すか、そのまま「▶ 実行」で作り直してください。
無限ループに近い重い処理を書くと、プレビュー内のタブ（iframe）が固まることがあります。その場合も「停止」で iframe ごと破棄できます。