p5.js（ピーファイブジェイエス）は、もともとアートやデザイン教育の文脈で誕生した Java ベースの「Processing」言語の理念を、JavaScript の世界に持ち込んだクリエイティブコーディング向けライブラリです。2014 年に Processing Foundation の支援を受けて Lauren McCarthy 氏が中心となって開発を開始し、Casey Reas 氏や Ben Fry 氏ら Processing の原作者の思想を受け継ぎながら、ブラウザだけで美術・音楽・データビジュアリゼーションなどを学べる入り口として広く普及しました。教育現場やアーティストの間で、最初に出会う JavaScript ライブラリとして親しまれています。
この記事の目次
- setup と draw の基本構造
- 豊富な描画 API と座標系
- アクセシビリティとコミュニティ重視
- プロダクション利用と注意点
- まとめ
setup と draw の基本構造
p5.js のプログラムは、Processing と同様に setup() と draw() という二つのグローバル関数で構成するのが基本です。setup() はアプリ開始時に一度だけ呼ばれ、createCanvas(800, 600) のようにキャンバスを生成したり、背景色や初期値を設定したりします。draw() は毎フレーム呼び出される関数で、ここに rect、ellipse、line、image といった描画コマンドや、状態更新ロジックを書きます。フレームレートは frameRate() で制御でき、デフォルトでは 60fps で再描画されます。
プログラムの書き方は手続き的でシンプルなため、プログラミング初心者でも「画面に何かを描いてみる」という体験に最短距離で到達できます。ループ、条件分岐、関数定義、配列、オブジェクトといった JavaScript の基本構文を、見た目の変化と結びつけて学べるため、計算機科学の入口として教育現場で広く利用されています。エディタは公式の p5.js Web Editor を使えば環境構築不要で、ブラウザだけでコードを書いて即実行できます。
豊富な描画 API と座標系
p5.js は、基本的な図形（rect、ellipse、triangle、line、bezier）から、ベクター数学（p5.Vector）、色操作（HSB / RGB / Lerp）、テキスト描画、画像合成（tint、blendMode）、3D 描画（WEBGL モード）まで、クリエイティブコーディングに必要な API がほぼワンパッケージで揃っています。座標系はデフォルトで左上原点ですが、translate や rotate、scale、push/pop を使って自由に変換でき、フラクタル図形や再帰的な描画も簡単に書けます。
ノイズ関数（noise()）、ランダム関数、三角関数を組み合わせると、有機的でリアルな模様や、自然界に近い動きを生成できます。Perlin ノイズを使った地形生成、ボイドアルゴリズムによる群衆シミュレーション、フラクタルツリーの再帰描画など、教科書的に有名な作例の多くが p5.js で簡潔に再現できます。これらは美術・デザイン・教育の文脈で「コードによる表現」の入り口として大きな魅力を持っています。
アクセシビリティとコミュニティ重視
p5.js の特徴的な思想として、アクセシビリティとコミュニティの包摂性を強く重視している点があります。公式の Web Editor はスクリーンリーダー対応が考慮されており、視覚障害のあるプログラマーでも p5.js のプログラムを学習できるように、テキスト記述や音声フィードバックの機能が用意されています。Processing Foundation 自体が「コードによる表現を多様な背景の人に開く」というミッションを掲げており、技術ドキュメントもジェンダー・人種・障害などへの配慮を意識した語彙で書かれています。
コミュニティも非常に活発で、Coding Train（Daniel Shiffman 氏）の YouTube チャンネルは初学者から中級者まで広く愛されており、ゲーム・物理・AI・遺伝的アルゴリズムなど多彩なテーマを p5.js で実装するチュートリアル動画が大量に公開されています。書籍「Generative Design」「The Nature of Code」なども p5.js を題材としており、アート系大学や中高生向けプログラミング教室の教材としても定番化しています。
プロダクション利用と注意点
p5.js は本来「学習と実験」のためのライブラリですが、軽量な LP のヒーロー演出、ブランドサイトのバックグラウンドジェネラティブビジュアル、データジャーナリズム記事のインタラクティブな図解、アート作品のオンライン展示など、プロダクション用途でも利用例が増えています。WebGL モードを有効にすれば、簡単な 3D シーンや GLSL シェーダーも扱えるため、Three.js を持ち出すほどではない軽量な 3D 表現にも使えます。
一方で、巨大な SPA に組み込んで状態管理と複雑に絡ませる用途や、TypeScript で型を厳密に管理したい大規模プロジェクトには向きません。グローバル関数前提の API は、フレームワーク内で扱うときには instance モードに切り替える必要があり、React や Vue と組み合わせるには少し工夫が要ります。プロダクションで使う場合は、p5.js を「演出のレイヤー」として切り離し、ライフサイクルの開始・破棄を意識して管理することが大事です。
まとめ
p5.js は、Processing の思想を Web に持ち込んだクリエイティブコーディング用ライブラリで、教育・アート・プロトタイピングの強力な入り口です。setup と draw を中心にした分かりやすい API、豊富な描画関数、アクセシビリティ重視の姿勢、活発な学習コミュニティが揃っており、プログラミング初心者にもプロのアーティストにも適した道具になっています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント