---
title: "p5.jsとは？使い方・始め方とsetup/draw・図形の描き方を2.x対応で解説"
url: "https://www.issoh.co.jp/tech/details/7634/"
published: 2025-07-10
updated: 2026-10-23
categories: ["JavaScript"]
publisher: "株式会社一創"
---

# p5.jsとは？使い方・始め方とsetup/draw・図形の描き方を2.x対応で解説

p5.js（p5js）は、ブラウザ上で図形・アニメーション・マウス操作に反応する作品を短いコードで書けるJavaScriptライブラリです。2013年にLauren Lee McCarthyがProcessingをWeb向けに解釈し直して作り、現在はProcessing Foundationの支援のもとコミュニティが開発しています。

安定版の最新は2026年9月25日公開の[2.3.4](https://www.npmjs.com/package/p5)です。次の2.4.0は10月20日にリリース候補（rc.1）が出た段階で、Web Editorにはまだ入っていません。Web Editorの既定は2026年7月31日に2.xへ切り替わり、1.x系は[2026年3月末で更新が凍結](https://github.com/processing/p5.js/issues/8870)されました。ネット上の入門記事の多くは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対応で解説](/tech/details/9180/)、後者は[Three.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説](/tech/details/3051/)で扱っている専用ライブラリを選んだほうが、後から作り直さずに済みます。売上の推移のような定型グラフなら、[Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け](/tech/details/18667/)で扱っているChart.jsを使えば、軸や凡例を自分で描かずに済みます。

p5.js自体も3Dを描けます。`createCanvas(400, 400, WEBGL)` のように3つ目の引数にWEBGLを渡すと描画モードが切り替わり、[WebGLモード専用の box()](https://p5js.org/reference/p5/box/) などで立体を置けます。授業や試作で立方体を回す程度ならこれで足ります。WEBGLが裏で何をしているかは[WebGLとは？仕組み・対応ブラウザの確認・動くコードとUnity WebGLビルドの手順【2026年】](/tech/details/4884/)にまとめています。

## p5.jsの始め方：Web EditorとCDNの2通り

### Web Editorでの作成・実行・保存

最短はブラウザで editor.p5js.org を開くことです。新規スケッチには `index.html`・`sketch.js`・`style.css` の3ファイルが最初から入っており、左上の再生ボタンを押すと右側のプレビューに結果が出ます。コードを書いて実行するだけならログインは要りませんが、[公式チュートリアル](https://p5js.org/tutorials/setting-up-your-environment/)にある通り、スケッチを保存するにはアカウントへのログインが必要です。

保存したスケッチは共有メニューから2種類のURLで渡せます。作品だけを全画面で見せるFullscreen（`editor.p5js.org/ユーザー名/full/スケッチID`）と、コードごと見せるEdit（`editor.p5js.org/ユーザー名/sketches/スケッチID`）です。古い教材に出てくるPresent表示は、なりすましページへの悪用を防ぐため[2021年11月のエディタv2.1.4](https://github.com/processing/p5.js-web-editor/releases/tag/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/p5@2.3.4/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の[ビルド設定](https://github.com/processing/p5.js/blob/v2.3.4/rollup.config.mjs)は、`p5.min.js` を作る際にFESのモジュールを何もしない処理へ置き換えています。同じ2つのスケッチを `p5.min.js` で実行すると、どちらも何も表示されずに描画だけが進みました。前の章のCDN例は公開用に `p5.min.js` を指定しています。書いている途中は `lib/p5.js` に替え、動くようになってから `p5.min.js` に戻してください。

非圧縮版のまま、引数チェックなど処理の重い部分だけを止めたいときは、スケッチの先頭で [p5.disableFriendlyErrors = true;](https://p5js.org/reference/p5/disableFriendlyErrors/) と書きます。関数名の打ち間違い（`elipse` など）は、どちらの版でも `elipse is not defined` というReferenceErrorになります。エラー文中の名前とリファレンスの綴りを見比べれば原因が分かります。なお、2.4.0-rc.1の[リリースノート](https://github.com/processing/p5.js/releases/tag/v2.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()](https://p5js.org/reference/p5/randomSeed/) でシード値を固定してください。

雲や地形のように、隣り合う値がなめらかにつながる揺らぎが欲しいときは `noise()` を使います。[公式リファレンス](https://p5js.org/reference/p5/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）](https://github.com/processing/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を `p5@1.11.13` にすれば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からの移行](/tech/details/3558/)で扱っています。

## よくある質問

### 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などのゲーム向けエンジンを検討してください。

## 関連記事

- [PixiJSとは？WebGL/WebGPUで動く2D描画エンジンの使い方をv8.22対応で解説](/tech/details/9180/)
- [Three.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説](/tech/details/3051/)
- [Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け](/tech/details/18667/)
- [Anime.js v4の変更点と使い方｜v3からの移行手順とGSAPとの違い](/tech/details/12740/)
- [TensorFlow.jsでフェイストラッキングを実装する手順｜478点ランドマークと旧APIからの移行](/tech/details/3558/)

---

出典: [p5.jsとは？使い方・始め方とsetup/draw・図形の描き方を2.x対応で解説](<https://www.issoh.co.jp/tech/details/7634/>)（株式会社一創）