p5.js（p5js）は、ブラウザ上で図形・アニメーション・マウス操作に反応する作品を短いコードで書けるJavaScriptライブラリです。2013年にLauren Lee McCarthyがProcessingをWeb向けに解釈し直して作り、現在はProcessing Foundationの支援のもとコミュニティが開発しています。
安定版の最新は2026年9月25日公開の2.3.4です。次の2.4.0は10月20日にリリース候補（rc.1）が出た段階で、Web Editorにはまだ入っていません。Web Editorの既定は2026年7月31日に2.xへ切り替わり、1.x系は2026年3月末で更新が凍結されました。ネット上の入門記事の多くは1.x前提のため、掲載スケッチはp5.js 2.3.4をjsdomとnode-canvasで実行し、描画色やイベント処理を確認しています（2026年10月に再実行）。画像読み込み例では検証用画像に差し替えています。
まとめ：p5.jsの要点と2.xで押さえる違い
- p5.jsはLGPL-2.1のオープンソースで無料。インストール不要のWeb Editor（editor.p5js.org）ならブラウザだけで始められる
- 骨格は
setup()（最初に1回）とdraw()（毎フレーム繰り返し）の2関数。多くの環境で毎秒60回描き直す - 既定の2D描画では、座標の原点はキャンバス左上で、y座標を大きくすると下へ動く。楕円は
ellipse(x, y, w, h)、四角形はrect(x, y, w, h) - 安定版の最新は2.3.4（2026-09-25）。2.4.0はリリース候補の段階。1.x系は2026年3月末で更新凍結（npm上の最終版は1.11.13）。新規に書くなら2.xを使う
- 書いている途中は非圧縮の
p5.jsを読み込む。p5.min.jsでは初心者向けのエラー説明（Friendly Error System）が働かない - 1.xのコードで壊れやすいのは
preload()、keyCode、mouseButton、curveVertex()、旧p5.sound。互換アドオンか書き換えで対応する
以下、始め方から図形・色・繰り返し・動き、2.xへの移行、Webページへの組み込みの順に説明します。
p5.jsの特徴と他ライブラリとの使い分け
Processingとの違い
ProcessingはJavaベースのデスクトップ環境で、スケッチはアプリとして書き出します。p5.jsは同じ「スケッチ」の考え方と関数名（setup・draw・ellipse・fill など）を受け継ぎつつ、言語をJavaScriptに、実行場所をブラウザに移しました。できあがった作品はURLを共有するだけで誰でも開けます。Processingの教本で学んだ人はほぼ同じ感覚で書けますが、Processingのコードをそのまま貼って動くわけではありません。変数宣言は int x ではなく let x、size(400, 400) は createCanvas(400, 400) に置き換えます。
Canvas API・three.js・PixiJSとの使い分け
| 選択肢 | 向く用途 | 書き味 |
|---|---|---|
| p5.js | 2Dの図形・アート・授業・試作 | 関数を並べるだけで描ける |
| Canvas API（素のJS） | 依存を増やしたくない小さな描画 | パスや状態管理を自分で書く |
| three.js | 3Dシーン・モデル表示 | カメラ・ライト・メッシュを組む |
| PixiJS | 大量スプライトの2Dゲーム・UI | シーングラフで管理 |
| Chart.js | 棒・折れ線などの定型グラフ | 設定オブジェクトを渡す |
p5.jsが強いのは「思いついた絵をすぐ動かす」場面です。逆に、大量のスプライトを管理するゲームや、glTFモデルを読み込む3D表示には向きません。前者はPixiJSとは？WebGL/WebGPUで動く2D描画エンジンの使い方をv8.22対応で解説、後者はThree.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説で扱っている専用ライブラリを選んだほうが、後から作り直さずに済みます。売上の推移のような定型グラフなら、Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分けで扱っているChart.jsを使えば、軸や凡例を自分で描かずに済みます。
p5.js自体も3Dを描けます。createCanvas(400, 400, WEBGL) のように3つ目の引数にWEBGLを渡すと描画モードが切り替わり、WebGLモード専用の box() などで立体を置けます。授業や試作で立方体を回す程度ならこれで足ります。WEBGLが裏で何をしているかはWebGLとは？仕組み・対応ブラウザの確認・動くコードとUnity WebGLビルドの手順【2026年】にまとめています。
p5.jsの始め方：Web EditorとCDNの2通り
Web Editorでの作成・実行・保存
最短はブラウザで editor.p5js.org を開くことです。新規スケッチには index.html・sketch.js・style.css の3ファイルが最初から入っており、左上の再生ボタンを押すと右側のプレビューに結果が出ます。コードを書いて実行するだけならログインは要りませんが、公式チュートリアルにある通り、スケッチを保存するにはアカウントへのログインが必要です。
保存したスケッチは共有メニューから2種類のURLで渡せます。作品だけを全画面で見せるFullscreen（editor.p5js.org/ユーザー名/full/スケッチID）と、コードごと見せるEdit（editor.p5js.org/ユーザー名/sketches/スケッチID）です。古い教材に出てくるPresent表示は、なりすましページへの悪用を防ぐため2021年11月のエディタv2.1.4で削除されました。
1.x用に書かれた教材を動かしたい場合は、エディタの設定にあるライブラリ管理（Library Management）から互換アドオンをオンにできます（詳しくは後述の移行の章）。
CDNによるHTMLへの導入とバージョン固定
自分のサイトや手元のフォルダで使うなら、jsDelivrのCDNから読み込みます。版番号は必ず固定してください。公式ダウンロードページには p5@2 のような版を固定しないURLも載っていますが、これだとマイナー版が上がった日に挙動が変わる可能性があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>画像やフォントを読み込むスケッチは、HTMLファイルをダブルクリックして file:// で開くとブラウザのセキュリティ制限で読み込みに失敗します。VS CodeのLive Serverや npx serve などでローカルサーバーを立てて http://localhost から開いてください。ビルドツールを使う構成なら npm install p5 で入れられます。
p5.jsの基本構造：setupとdrawの役割
setupとdrawの実行順
p5.jsのスケッチは2つの関数でできています。setup() はスケッチ開始時に1回だけ実行され、キャンバスの作成や変数の初期化を置きます。draw() はその後、止めるまで繰り返し呼ばれます。公式リファレンスによると多くのコンピュータで既定のフレームレートは60fpsで、frameRate(30) のように指定すると目標値を変えられます（処理が重いと目標に届かないことがあります）。
function setup() {
createCanvas(400, 300);
}
function draw() {
background(240);
fill(255, 0, 0);
ellipse(200, 150, 120, 80);
}このコードを2.3.4で実行し、描画結果の色を読み取って確認しました。中心 (200, 150) は赤、中心から45px下の (200, 195) は背景のグレーで、高さ80の楕円が上下40pxずつに収まっていることが分かります。background() を draw() の先頭に置くのは、毎フレーム前の絵を塗りつぶすためです。これを setup() へ移すと、動く図形の軌跡が残ります。
経過フレーム数は frameCount で取れます。setup() の中では0です。draw() を呼ぶ直前に1増えるので、1回目の draw() の中では1になります。1枚だけ描いて止めたいときは setup() の最後で noLoop() を呼び、再開するときは loop() を呼びます。
2D座標系の原点とx・yの正方向
キャンバスの原点 (0, 0) は左上の角です。x座標を大きくすると右へ、y座標を大きくすると下へ移動します。数学のグラフとはyの向きが逆なので、最初につまずきやすい点です。キャンバスの幅と高さは width・height という変数に入っており、createCanvas() の幅と高さを省略すると100×100pxになります。
エラーの読み方：Friendly Error Systemが働く条件
p5.jsには、エラーの原因を初心者向けに言い換えて表示するFriendly Error System（FES）があります。メッセージはブラウザの開発者ツールやWeb Editorのコンソールに出ます。2.3.4で次の2つを実行すると、形式の違う2種類のメッセージが表示されました。
ellipse('100', 100, 50, 50)のように数値の引数へ文字列を渡す：p5.js says: Expected number at the first parameterで始まる説明で、1番目の引数に数値が必要だと指摘されるlet width = 100;のようにp5.jsの組み込み変数と同じ名前を宣言する：Function "width" … is being redeclared and conflicts with a p5.js functionという、p5.jsのwidthとの衝突を知らせる警告と、リファレンスのURLが出る
FESが働くのは、非圧縮の p5.js を読み込んだときだけです。2.3.4のビルド設定は、p5.min.js を作る際にFESのモジュールを何もしない処理へ置き換えています。同じ2つのスケッチを p5.min.js で実行すると、どちらも何も表示されずに描画だけが進みました。前の章のCDN例は公開用に p5.min.js を指定しています。書いている途中は lib/p5.js に替え、動くようになってから p5.min.js に戻してください。
非圧縮版のまま、引数チェックなど処理の重い部分だけを止めたいときは、スケッチの先頭で p5.disableFriendlyErrors = true; と書きます。関数名の打ち間違い（elipse など）は、どちらの版でも elipse is not defined というReferenceErrorになります。エラー文中の名前とリファレンスの綴りを見比べれば原因が分かります。なお、2.4.0-rc.1のリリースノートは、FESをモジュール化して翻訳に対応させたと案内しています。
図形の描き方：ellipse・rect・line・beginShape
| 図形 | 書き方 | x, y の意味 |
|---|---|---|
| 楕円 | ellipse(x, y, w, h) |
中心 |
| 円 | circle(x, y, d) |
中心（dは直径） |
| 四角形 | rect(x, y, w, h) |
左上の角 |
| 正方形 | square(x, y, s) |
左上の角 |
| 直線 | line(x1, y1, x2, y2) |
始点と終点 |
| 多角形 | beginShape()〜endShape() |
各頂点 |
楕円を描くときは ellipse(x, y, w, h) を使います。高さ h を省くと幅と同じ値になり円になります。注意したいのは基準点の違いで、ellipse と circle は中心、rect と square は左上の角が (x, y) です。基準を揃えたい場合は rectMode(CENTER) で四角形も中心基準に変えられます。rect に5つ目の引数を渡すと角の丸みの半径になります。
function setup() {
createCanvas(400, 300);
background(255);
stroke(0);
strokeWeight(4);
fill(0, 120, 255);
rect(20, 20, 120, 80);
fill(255, 200, 0, 128);
circle(250, 60, 80);
line(20, 150, 380, 150);
noFill();
stroke(255, 0, 0);
beginShape();
vertex(60, 200);
vertex(140, 280);
vertex(20, 280);
endShape(CLOSE);
}静止画なので draw() は書いていません。beginShape() と endShape() の間に vertex() で頂点を並べると自由な多角形になり、endShape(CLOSE) で最初と最後の頂点が結ばれます。実行して確認すると、三角形の閉じた辺の上 (40, 240) は赤い線、内側の (70, 260) は noFill() のため白いままでした。
色と線の指定：fill・stroke・strokeWeight
図形の塗りは fill()、輪郭線（枠線）の色は stroke()、線の太さは strokeWeight() で指定します。いずれも呼んだ後に描くすべての図形に効き続けるので、図形ごとに色を変えるなら描く直前に毎回指定します。
fill(255, 0, 0)：RGB（0〜255）。fill(255, 0, 0, 128)の4つ目は透明度fill(200)：引数1つならグレースケールfill('tomato')・fill('#1e90ff')：CSSの色名やカラーコードも使えるnoFill()・noStroke()：塗りや線を消す。両方呼ぶと何も描かれない
上の図形の例では fill(255, 200, 0, 128) の円が白い背景の上で (255, 227, 127) と半透明に表示されました。色相・彩度で指定したい場合は colorMode(HSB) に切り替えます。
繰り返しと乱数による模様：for・random・randomSeed
同じ図形をたくさん並べるときは、JavaScriptの for 文で座標をずらしながら描きます。次の例は50px間隔の格子に64個の円を置き、色と大きさを random() で決めます。
function setup() {
createCanvas(400, 400);
randomSeed(42);
noLoop();
}
function draw() {
background(255);
noStroke();
for (let y = 25; y < height; y += 50) {
for (let x = 25; x < width; x += 50) {
fill(random(255), random(100, 200), 255);
circle(x, y, random(10, 45));
}
}
}random(255) は0以上255未満、random(10, 45) は10以上45未満の値を返します。noLoop() で draw() を1回だけ実行するので、模様は1枚で止まります。randomSeed(42) の行を消して2回実行すると、左上の円の色は (159, 152, 255) と (152, 127, 255) で毎回変わりました。randomSeed(42) を残すと、2回とも (64, 108, 255) で同じ模様になります。授業で全員の画面を揃えたいときや、気に入った模様を後から再現したいときは、randomSeed() でシード値を固定してください。
雲や地形のように、隣り合う値がなめらかにつながる揺らぎが欲しいときは noise() を使います。公式リファレンスの通り、Perlinノイズの値を常に0〜1の範囲で返すので、noise(frameCount * 0.01) * width を円のx座標にすると、左右をゆっくりさまよう動きになります。
アニメーションとマウス・キーボード操作
frameCountによる周期処理とdeltaTimeによる速度調整
図形を動かすには、draw() のたびに座標の変数を少しずつ変えます。x += 2 のように毎フレーム同じ量を足すと、フレームレートが落ちたパソコンでは動きが遅くなります。速さを一定にしたいなら、直前のフレームにかかったミリ秒数が入る deltaTime を掛けます。frameCount は「60フレームごとに色を変える」のような周期的な処理に向きます。
mouseX・mouseYによる位置取得とmousePressedによる押下処理
現在のマウス位置は mouseX・mouseY に入っています。押されている間だけ何かしたいときは変数 mouseIsPressed、クリックした瞬間に1回だけ処理したいときは関数 mousePressed() を定義します。2.xでは mouseButton がオブジェクトになり、右クリックの判定は mouseButton.right と書きます。
keyIsDownによるキー入力の判定
矢印キーの押しっぱなしを判定するなら keyIsDown(UP_ARROW) を使います。2.xでは keyIsDown(88) のような数値のキーコードが使えなくなりました。keyIsDown('x') や keyIsDown('ArrowLeft') のように文字列で指定するか、LEFT_ARROW などの定数を使います（定数は内部で文字列に対応付けられています）。
let x = 0;
let size = 40;
function setup() {
createCanvas(400, 200);
}
function draw() {
background(220);
x += 0.12 * deltaTime;
if (x > width) x = 0;
if (keyIsDown(UP_ARROW)) size += 1;
if (keyIsDown(DOWN_ARROW)) size = max(10, size - 1);
fill(mouseIsPressed ? 'tomato' : 'white');
circle(x, height / 2, size);
line(mouseX, 0, mouseX, height);
}
function mousePressed() {
console.log('clicked', mouseX, mouseY, 'frame', frameCount);
}0.12 * deltaTime は1ミリ秒あたり0.12px、つまり毎秒約120pxの速さです。2.3.4で上矢印キーを押す操作とクリックを送って実行したところ、キーを押しているフレームごとに円の直径が1pxずつ大きくなり、クリック位置の座標が mousePressed() で出力されました。
p5.js 1.xから2.xへの移行で壊れる箇所
ネットに出回っている入門記事や大学の教材は、2025年4月17日の2.0公開より前の1.x前提で書かれたものがまだ多数です。公式の互換ガイド（p5.js-compatibility）は「多くのスケッチはそのまま動く」としていますが、次の5点は動かないか結果が変わります。
1.xのコードで動かなくなる5つの書き方
| 1.xの書き方 | 2.xでの書き方 |
|---|---|
preload() で読み込み |
async setup() 内で await |
keyCode === UP_ARROW |
keyIsDown(UP_ARROW) |
mouseButton === RIGHT |
mouseButton.right |
curveVertex() |
splineVertex() |
| 同梱の旧p5.sound | 別配布の新p5.sound.js |
影響が一番大きいのは画像・フォントなどの読み込みです。2.xでは preload() が呼ばれず、loadImage() などの読み込み関数はPromiseを返します。1.xの書き方のまま2.3.4で実行すると、setup() の時点で画像の変数が undefined のままでエラーになりました。2.xでは次のように setup() を async にして await で待ちます。この例を動かすには、index.html と同じフォルダに photo.jpg を置いてください。Web Editorではスケッチに画像をアップロードし、ファイル名を photo.jpg に合わせます。
let img;
async function setup() {
createCanvas(400, 300);
img = await loadImage('photo.jpg');
}
function draw() {
image(img, 0, 0, width, height);
}await で待っている間は draw() が始まらないため、読み込み前の画像を描こうとして落ちることはありません。実行して確認したところ、画像の読み込み完了時点で frameCount は0で、その後に draw() が始まりました。
ほかにも、append()・sort()・splice() などの配列用関数は2.xで削除されたため、JavaScript標準の push()・sort() を使います。ベクトルも、空の createVector() ではなく createVector(0, 0) のように次元を明示するよう2.3のリリースノートで案内されています。2.3.4で2次元と3次元のベクトルを足すと、警告を出したうえで2次元として計算されました。
互換アドオンを使うか、書き換えるかの判断
公式は1.xの機能を2.xで使えるようにする互換アドオン（preload.js・shapes.js・data.js）を用意しており、Web Editorのライブラリ管理からオンにできます。ただし互換アドオンはあくまで移行用です。継続的に更新する教材や作品、新しいアドオンを取り入れるスケッチは、上の表に沿って2.xの書き方へ直すべきです。
1.xのまま固定する選択肢も残っています。CDNのURLを [email protected] にすれば1.xの最終版で動き続けます。ただし、互換ガイドは1.xを「保守されない」と明記しており、1.x系は2026年3月末で更新が凍結されています。固定してよいのは、公開済みで今後手を入れない作品と、授業期間中だけ教材の版を変えたくないケースに限られます。
Webページへの組み込みと拡張ライブラリ
parentによる配置先指定とインスタンスモードによる名前の衝突回避
何も指定しないと、p5.jsは既存の最初の <main> 要素内にキャンバスを置きます。この要素がない場合は、bodyの末尾に <main> 要素を作り、その中にキャンバスを置きます。記事やLPの特定の位置に表示したいときは、createCanvas() の戻り値に .parent('要素のid') を付けます。ウィンドウ幅に合わせて伸縮させたい場合は、windowResized() の中で resizeCanvas() を呼びます。
ReactやVueのページ、または1ページに複数のスケッチを置く場合はインスタンスモードを使います。関数や変数をすべて p. 経由で呼ぶ書き方で、グローバル変数を汚しません。先にHTMLへ <div id="sketch-holder"></div> を置き、この要素より後ろでスケッチのスクリプトを読み込んでください。
const sketch = (p) => {
p.setup = () => {
p.createCanvas(300, 200);
};
p.draw = () => {
p.background(30);
p.fill(255);
p.circle(p.mouseX, p.mouseY, 20);
};
};
new p5(sketch, document.getElementById('sketch-holder'));このコードを実行すると、キャンバスは id="sketch-holder" の要素の中に作られ、グローバルには createCanvas などの関数が定義されないままでした。
createSliderとcreateButtonによる操作部品
キャンバスの外にスライダーやボタンを置くと、値を変えながら絵を確かめられます。
let slider, button, bg = 220;
function setup() {
createCanvas(300, 200);
slider = createSlider(10, 150, 60, 1);
button = createButton('背景を変える');
button.mousePressed(() => {
bg = bg === 220 ? 40 : 220;
});
}
function draw() {
background(bg);
circle(width / 2, height / 2, slider.value());
}createSlider(10, 150, 60, 1) の引数は最小値・最大値・初期値・刻み幅の順です。2.3.4で実行すると、slider.value() は文字列ではなく数値の60を返し、そのまま circle() の直径に使えました。ボタンを押すと mousePressed() に渡した関数が動き、背景が220から40に切り替わります。どちらの部品も <main> 内のキャンバスとは別に、bodyの末尾へ追加されました。キャンバスのすぐ下に並べたい場合は、部品にも .parent() で同じ親要素を指定します。
p5.sound・p5.brush・ml5.jsの2.x対応状況
| ライブラリ | 用途 | 最新版（npm） | p5.jsとの対応 |
|---|---|---|---|
| p5.sound.js | 音の再生・解析 | 0.4.1 | 1.x・2.x両対応の新版 |
| p5.brush | 筆や塗りの質感 | 2.2.3 | 2.x必須 |
| ml5.js | 機械学習（姿勢推定など） | 1.4.0 | 2.x対応の明示は未確認 |
音を扱うなら注意が必要です。1.xに同梱されていた旧p5.soundは2.xでは動かず、公式ダウンロードページも「ライブラリ一式のzipにp5.sound.jsが入っていたら古い版なので使わないように」と注意しています。新しいp5.sound.jsをCDNから別途読み込んでください。p5.brushのp5.js連携版は、READMEでp5.js 2.x以上とWEBGLキャンバスを要件としており、1.xのスケッチには組み込めません。ml5.jsはTensorFlow.jsの上に作られた機械学習ライブラリで、姿勢推定などをp5.jsの描画と組み合わせられます。TensorFlow.js自体の使い方はTensorFlow.jsでフェイストラッキングを実装する手順｜478点ランドマークと旧APIからの移行で扱っています。
よくある質問
p5.jsは無料で使えますか？
無料です。ライセンスはLGPL-2.1で、個人の作品にも商用サイトにも組み込めます。本体を配布するときは、改変の有無にかかわらず著作権表示とライセンス文を残し、ソースコードを入手できるようにする必要があります（提供の方法は配布の形によって変わります）。改変版を配布する場合は、これに加えて変更箇所を明示します。
p5jsとp5.jsは同じものですか？
同じものです。正式な名称は「p5.js」です。検索では「p5js」「p5 js」「p5*js」とも書かれますが、指しているライブラリは1つです。
p5.jsで楕円を描く関数は何ですか？
ellipse(x, y, w, h) です。(x, y) が中心、w が幅、h が高さで、h を省略すると円になります。正円だけなら circle(x, y, d) も使えます。
1.xで書いたスケッチは2.xでも動きますか？
多くはそのまま動きますが、preload() を使う読み込み、keyCode での数値判定、curveVertex()、旧p5.soundを使うスケッチは動かないか挙動が変わります。Web Editorで互換アドオンをオンにするか、2.xの書き方へ直してください。
p5.jsでゲームは作れますか？
シューティングやブロック崩しのような2Dゲームなら、draw() の中で座標を更新し、keyIsDown() で操作を受ければ作れます。当たり判定は円同士なら dist() で中心間の距離を測り、半径の和と比べるのが簡単です。スプライトの数が多く、まとめて管理したい規模ならPixiJSなどのゲーム向けエンジンを検討してください。
