p5.js（p5js）は、ブラウザ上で図形・アニメーション・マウス操作に反応する作品を短いコードで書けるJavaScriptライブラリです。2013年にLauren Lee McCarthyがProcessingをWeb向けに解釈し直して作り、現在はProcessing Foundationの支援のもとコミュニティが開発しています。2026年9月25日公開の2.3.4が最新版です。Web Editorの既定は2026年7月31日に2.xへ切り替わり、1.x系は2026年3月末で更新が凍結されました。ネット上の入門記事の多くは1.x前提のため、掲載スケッチはp5.js 2.3.4をjsdomとnode-canvasで実行し、描画色やイベント処理を確認しています。画像読み込み例では検証用画像に差し替えています。
まとめ：p5.jsの要点と2.xで押さえる違い
- p5.jsはLGPL-2.1のオープンソースで無料。インストール不要のWeb Editor（editor.p5js.org）ならブラウザだけで始められる
- 骨格は
setup()（最初に1回）とdraw()（毎フレーム繰り返し）の2関数。多くの環境で毎秒60回描き直す - 座標の原点はキャンバス左上で、y座標を大きくすると下へ動く。楕円は
ellipse(x, y, w, h)、四角形はrect(x, y, w, h) - 最新版は2.3.4（2026-09-25）。1.x系は2026年3月末で更新凍結（npm上の最終版は1.11.13）。新規に書くなら2.xを使う
- 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 | シーングラフで管理 |
| D3.js | データ連動のグラフ | データとDOMを結び付ける |
p5.jsが強いのは「思いついた絵をすぐ動かす」場面です。逆に、数千個のスプライトを滑らかに動かすゲームや、glTFモデルを読み込む3D表示には向きません。前者はPixiJSとは？WebGL/WebGPUで動く2D描画エンジンの使い方をv8対応で解説、後者はThree.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説で扱っている専用ライブラリを選んだほうが、後から作り直さずに済みます。データを軸・目盛り付きのグラフにする用途ならD3.js v7の基本設計とv6以前から刷新されたモジュール構成の全体像で解説しているD3.jsが適しています。
p5.jsの始め方：Web EditorとCDNの2通り
Web Editorでの作成・実行・保存
最短はブラウザで editor.p5js.org を開くことです。新規スケッチには index.html・sketch.js・style.css の3ファイルが最初から入っており、左上の再生ボタンを押すと右側のプレビューに結果が出ます。コードを書いて実行するだけならログインは要りません。作ったスケッチを保存・共有するときにアカウントが必要になります。
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になります。
図形の描き方：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) に切り替えます。2.0ではこの colorMode() に新しい色空間が追加されています。
アニメーションとマウス・キーボード操作
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の末尾に作成します。記事や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 などの関数が定義されないままでした。既存サイトへ後から埋め込む場合は、他のスクリプトと名前が衝突しないこちらの書き方のほうが安全です。
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などのゲーム向けエンジンを検討してください。
