p5.jsは、コードだけでアートが作れる時代を実現するのか

はじめに

「絵を描きたいけれど、デザインソフトの操作は苦手」「プログラミングは書けるけれど、ビジュアル表現には縁がない」——そんなふうに感じたことはありませんか。

コードとアートは、実はとても相性がいい組み合わせです。数行のfor文が幾何学模様を生み出し、マウスの座標がそのまま絵筆になる。そんな体験を、JavaScriptだけで実現できるのがp5.jsです。HTML Canvasの複雑なAPIを意識することなく、直感的な関数呼び出しだけで図形や色、アニメーションを操れます。

この記事では、p5.jsの特徴からインストール方法、実際に手を動かして試せるコード例までを順を追って紹介します。

p5.jsとは

p5.jsは、Processingというビジュアルアート向けプログラミング言語の思想をJavaScriptに移植した、クライアントサイドのライブラリです。GPLライセンスのもとProcessing Foundationが開発を続けており、GitHubのprocessing/p5.jsリポジトリで活発にメンテナンスされています。

2024年にリリースされたメジャーバージョンの2系では、WebGL・WebGPU両対応の描画パイプラインが強化され、シェーダーをより手軽に書けるp5.strandsという新機能も追加されました。単なる「お絵描きライブラリ」にとどまらず、3Dグラフィックスやインタラクティブアートの制作環境としても進化を続けています。

主な特徴

圧倒的な学習コストの低さ - setup()とdraw()という2つの関数を書くだけで、キャンバスの初期化からアニメーションループまでが完成します
豊富な描画・数学関数 - 図形描画、色操作、ベクトル演算、ノイズ生成などがすべて組み込み関数として用意されています
入力デバイスとの親和性 - マウス・キーボード・タッチ操作の状態がグローバル変数として常に取得でき、インタラクティブな作品を作りやすい設計です
3D/WebGLサポート - WEBGLモードを指定するだけで2Dのコードをほぼそのまま3D空間に拡張できます
拡張ライブラリ・エコシステム - サウンド処理用のp5.soundなど、公式・コミュニティ製のアドオンで機能を追加できます

インストール

p5.jsは用途に応じて複数の導入方法を選べます。

CDNから直接読み込む

一番手軽な方法です。HTMLファイルに<script>タグを1行追加するだけで使い始められます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>p5.js sample</title>
  <script src="https://cdn.jsdelivr.net/npm/p5@2.3.1/lib/p5.min.js"></script>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

npmでプロジェクトに組み込む

Vite・Webpackなどのビルドツールを使ったプロジェクトでは、npmパッケージとしてインストールします。

# npm
npm install p5

# yarn
yarn add p5

# pnpm
pnpm add p5

基本的な使い方

p5.jsのスケッチは、setup()（初期化処理）とdraw()（毎フレーム実行される描画処理）という2つの関数を中心に組み立てます。

// sketch.js
function setup() {
  // 400x400ピクセルのキャンバスを作成
  createCanvas(400, 400);
}

function draw() {
  // 背景を薄いグレーでリセット
  background(240);

  // 塗りの色を設定して円を描画
  fill(30, 144, 255);
  noStroke();
  circle(mouseX, mouseY, 50);
}

このコードを実行すると、マウスカーソルの位置に追従して青い円が描かれ続けます。mouseX・mouseYはp5.jsが自動的に更新してくれるグローバル変数で、特別な初期化なしにマウス座標へアクセスできる点が大きな特徴です。

npmでインストールした場合は、インスタンスモードで記述するとモジュールバンドラとも相性よく利用できます。

import p5 from 'p5';

new p5((sketch) => {
  sketch.setup = () => {
    sketch.createCanvas(400, 400);
  };

  sketch.draw = () => {
    sketch.background(240);
    sketch.fill(30, 144, 255);
    sketch.noStroke();
    sketch.circle(sketch.mouseX, sketch.mouseY, 50);
  };
}, document.getElementById('sketch-container'));

実践的なユースケース

パーティクルアニメーション

配列とオブジェクトを組み合わせれば、多数の要素が動くアニメーションも簡単に構築できます。

let particles = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: random(width),
      y: random(height),
      speed: random(1, 3),
    });
  }
}

function draw() {
  background(10, 10, 30);
  noStroke();
  fill(255, 200);

  for (const p of particles) {
    circle(p.x, p.y, 4);
    p.y += p.speed;
    // 画面下に到達したら上に戻す
    if (p.y > height) {
      p.y = 0;
      p.x = random(width);
    }
  }
}

星が降るような表現も、パーティクルの位置を毎フレーム更新するだけで実現できます。データの可視化やローディング画面の演出にも応用しやすいパターンです。

WebGLによる3D表現

WEBGLをキャンバス生成時に指定するだけで、2Dの延長線上で3Dオブジェクトを扱えます。

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(20);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  fill(100, 200, 255);
  noStroke();
  box(150);
}