p5.jsとは？事例・アニメーション・リファレンス例を紹介

はじめまして、エンジニアスタイル編集部です！

コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！
本記事が、皆様の参考になれば幸いです。

経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。

エンジニアスタイルは、最高単価390万円、国内最大級のITフリーランス・副業案件検索サービスです。p5.jsのフリーランス・副業案件一覧をご覧いただけますのであわせてご確認ください。

p5.jsとは？

視覚的なプログラミングやグラフィックス、インタラクティブなメディアアプリケーションを作成するためのツールとして広く利用されているp5.js（Processing 5 JavaScript）ですが、特徴やできること、活用例について知りたい方は多いものです。

この記事では、初心者からプロの開発者まで好評を博しているp5.jsについて、概要やメリット、具体的な事例について紹介します。

p5.jsの概要

p5.jsはProcessing 5 JavaScriptの略で、クリエイティブ・コーディングやビジュアルアートのためのJavaScriptライブラリです。

なお、「Processing」とは視覚的なアートやデザイン、デジタルアートなどを作成するために設計されたプログラミング言語や開発環境です。Processingは、非プログラマーでも直感的にプログラミングでき、視覚的な成果物を簡単に作成できることを目的に作成されました。シンプルな構文を持っているのも、Processingの特徴です。

主に2Dグラフィックスとアニメーションをサポートしており、線や円、四角形、画像などを描画する機能が豊富に組み込まれています。また、Windows、Mac、Linuxなど、さまざまなプラットフォームで動作します。

Processing言語は、デジタルアートやクリエイティブコーディング、視覚化プロジェクトなど、芸術的な側面に焦点を当てています。Processing言語のJavaScript版とも言えるp5.jsは、Processingと同じく、視覚的な表現に焦点を当てたプログラミングをサポートしているのが特徴です。プログラミングの基礎を理解していることが望ましい一方で、初心者にもアクセスしやすい構文と機能を提供しています。

p5.jsを使用すると、ブラウザ上で実行できるインタラクティブなグラフィックスやアニメーションや音声処理、データの視覚化などを手軽に作成できます。ウェブページに埋め込んで実行でき、結果を即座に確認できるため、学習やプロトタイピングに適しています。

p5.jsを活用するメリット

p5.jsを活用するメリットは、主に以下の6点です。

• 視覚的なプログラミング手法である
• ウェブブラウザ上で実行可能
• 即座にフィードバックを確認できる
• アートやデザインに適している
• 学習教材やコミュニティなどサポートが豊富
• クロスプラットフォームに対応している

p5.jsはクリエイティブなアートやデザインを作成する際に活用しやすいうえ、学習コストが低く、即座にフィードバックを得られることから、視覚的な表現を追求する方にとって魅力的な選択肢です。

視覚的なプログラミング手法である

p5.jsは非常にシンプルな構文を持ち、初心者でも直感的にプログラミングを学びやすい特長があります。プログラミング初学者やアーティスト、デザイナーにとって、複雑なコードを書かなくても視覚的な作品を簡単に作成でき、誰でも使いやすい点がメリットです。

例えばp5.jsで単純な円を描画するには、まずsetup関数でキャンバスを作成し、draw関数で円を描画しています。幅が400ピクセル、高さが400ピクセルのキャンバスを作成するためにはcreateCanvas(400, 400)と記述します。なお、backgroundでキャンバスの背景色を、fillで円の塗りつぶしの色をRGB形式で指定できます。中心座標が (200, 200) で半径が25の円を描画するには、ellipse(200, 200, 50, 50)と記述するだけで完了です。シンプルな線画を拡張し、より複雑なグラフィックスやアニメーションの作成もできます。

ウェブブラウザ上で実行可能

p5.jsはJavaScriptに基づいており、ウェブブラウザ上で直接実行できます。ユーザーは特別なソフトウェアをインストールすることなく、作品を共有し、オンラインでアクセス可能なプロジェクトを作成できます。

プロジェクトでp5.jsを利用するためには、CDN (Content Delivery Network) を使用してp5.jsのライブラリをプロジェクトに組み込むスクリプトを追加するのが一般的です。

もしオフラインでp5.jsを使いたい場合、公式HPの「Download」から最新のバージョンをダウンロードできます。ダウンロードしたファイル（通常は`p5.js`または`p5.min.js`）をプロジェクトのフォルダに保存し、HTMLファイル内で読み込むスクリプトを追加します。

即座にフィードバックを得られる

p5.jsを使用すると、コードの変更を加えると即座に結果を確認できるため、プログラムの効果的な学習が可能です。エラーを見つけて修正するプロセスが迅速に行えます。なぜなら、p5.jsはウェブブラウザ上で実行され、コードをリアルタイムで更新できるためです。

p5.jsスケッチが実行されている間、コードの変更を行うとウェブブラウザは自動的に変更を検知し、スケッチを即座に再読み込みすることで、修正や変更を即座に確認します。また、ウェブブラウザのデベロッパーツールを使用して、コンソールにエラーメッセージやログを表示できるため、実行時のエラーやデバッグ情報もリアルタイムで確認可能です。

なお、p5.jsスケッチをローカルで開発する場合、一部の機能がセキュリティ上の理由から正しく動作しないことがあります。動作しなくなる問題を避けるために、Visual Studio CodeのLive Server拡張機能などを使用してローカルサーバーを使用することが推奨されています。

アートやデザインに適している

p5.jsは主に2Dグラフィックスとアニメーションを扱うことに特化しており、アートやデザインの創造性を最大限に引き出すための機能が豊富に提供されています。図形、色、動きなどを自在に制御できるため、クリエイターは思い描いたアートを簡単に具現化できます。

ジェネレーティブアート

p5.jsを使用してランダムなアルゴリズムや数学的なパターンを組み合わせ、美しいジェネレーティブアートを作成することができます。例えば、ランダムに配置された図形や色、パーティクルシステムを使ったアニメーションなどが挙げられます。

データビジュアライゼーション

データセットを視覚的に表現するためのプロジェクトにも、p5.jsを利用すると便利です。円グラフ、バーチャート、散布図などグラフィカルな要素を使用することで、データを直感的に理解できます。

インタラクティブなウェブアート

p5.jsを使って、マウスの動きやクリック、キーボードの入力などに応じて動作するインタラクティブなウェブアートを制作できます。ユーザーとのコミュニケーションを通じてアートを作り出すことが可能です。

アートインストレーション

p5.jsを用いて、デジタルサイネージやアートインストレーションを構築できます。センサーやカメラの入力を取得し、それに応じて変化する映像やインタラクティブなデジタルアート作品を作成できます。

クリエイティブコーディング

p5.jsはクリエイティブコーディングのためのツールとしても知られています。コーディングを通じてアートやデザインを作り出すことができ、そのプロセス自体がアートになる場合もあります。

アートと音楽の統合

p5.jsを使って視覚的なアートと音楽を組み合わせるプロジェクトがあります。例えば、音の振幅や周波数に基づいて描画が変わるような作品などが挙げられます。音楽の特定のパターンに対応した視覚的なエフェクトやアートの制作も可能です。

学習教材やコミュニティなどサポートが豊富

p5.jsには多くの学習教材が用意されており、プログラミングやクリエイティブ・コーディングのスキル向上が可能です。p5.jsの学習教材は、初心者から上級者までさまざまなレベルのユーザーに向けて用意されています。また、p5.jsのコミュニティは非常に活発で、質問やアイディアの共有が行われています。

p5.js公式HPには、ドキュメンテーションやリファレンス、チュートリアルが豊富にあります。公式ウェブサイトの「Get Started」では、p5.jsの基本から始める方法が詳細に説明されています。

また、p5.jsに関する書籍もいくつかあります。例えば、「Make: Getting Started with p5.js」などがあります。p5.jsを使用してクリエイティブなプロジェクトを構築する方法に焦点を当てています。

さらにp5.jsのGitHubリポジトリでは、ソースコードやイシュートラッキング、コミュニティディスカッションなどが公開されています。GitHubを通じて、最新の開発情報にアクセスできます。

クロスプラットフォームに対応

p5.jsはウェブブラウザ上で動作するため、プラットフォームに依存せずに使うことができます。WindowsやMac、Linuxなど異なる環境で同じコードを実行でき、クロスプラットフォームの開発が簡単です。

p5.jsがクロスプラットフォームに対応している主な理由は、Processingという言語および環境に基づいているからです。

Processingはクロスプラットフォームな環境をサポートしています。Processing自体がJavaベースで開発され、Javaのクロスプラットフォームの特性を受け継いでいます。p5.jsはJavaScriptベースですが、Processingとの互換性を保つことで、異なるプラットフォームで同様のクリエイティブコーディングが可能です。

Processingとは？

p5.jsはProcessing言語のJavaScript版と見なすことができます。

ProcessingはもともとJavaをベースにしたプログラミング言語および環境で、主にビジュアルアートやデザイン、デジタルメディアの制作を目的としています。p5.jsはこのProcessingをベースにJavaScriptに移植され、Webブラウザ上で実行できるようになりました。

ここでは、Processingの概要やp5.jsとの使い分けについて紹介します。

Processingの概要

Processingは、Casey ReasとBen Fryによって、2001年にマサチューセッツ工科大学メディアラボ（MIT Media Lab）で開発されました。デジタルメディアやデザインの分野でプログラミングをよりアクセス可能にし、視覚的な表現を簡単にするための環境としてProcessingは生まれ、アーティストやデザイナーが簡単にクリエイティブなコーディングができるツールとして急速に広まりました。

Processingはもともとデスクトップアプリケーション向けに設計されたツールであるため、Webブラウザ上での実行ではなく、デスクトップアプリケーションを開発する場合は、ProcessingのJava版を検討することが適しています。

また、p5.jsはJavaScriptベースで、Webブラウザ上で実行されます。もしJavaScriptではなく、JavaやPythonといった別のプログラミング言語を使用したい場合は、Processingで該当するモードを検討するのも良い方法です。

Processingとp5.jsの違い

p5.jsとProcessingはどちらもクリエイティブなコーディングをサポートしてくれるツールですが、以下の点で異なります。

• プラットフォーム
• 環境
• ウェブ対応とブラウザ連携

p5.jsとProcessingはどちらも異なる環境やプラットフォームで使用するのに適しているため、使用する目的や環境によって使い分けが可能です。

プラットフォームの違い

p5.jsはブラウザ上で実行されるJavaScriptベースのライブラリで、Web開発やウェブブラウザ上での視覚的なプログラミングをサポートしています。

一方、ProcessingはJavaベースのデスクトップアプリケーションとして開発されました。その後、JavaScriptやPython、Androidなど他の言語への拡張も行われており、様々なプラットフォームで動作します。

環境の違い

p5.jsはWebブラウザ上での実行を前提としており、ブラウザで直接コードを記述して実行するのが一般的です。オンラインのエディタやプレイグラウンドが利用可能です。

一方、ProcessingのJava版はデスクトップアプリケーションとして提供され、統合開発環境（IDE）を使用してコードを記述し、実行することが一般的です。なお、ProcessingのJavaScriptモードもあり、Web上で実行できます。

ウェブ対応とブラウザ連携

p5.jsはWebブラウザ上で実行されるため、HTMLやCSSとの統合が簡単で、ウェブページに直接組み込んで使用することができます。

なお、Processingはデスクトップアプリケーションとして始まったため、Webブラウザとの統合はp5.jsほど直接的ではありませんでしたが、Web用に拡張されたバージョンもあります。

p5.jsの事例や作品とは

Web上には、p5.jsを使用した作品のギャラリーが数多く存在します。

ギャラリーでは、ユーザーがp5.js Webエディタを使用して公開したプロジェクトの閲覧が可能です。プロジェクトは言語フィルターやカテゴリフィルターを使用して探せる他、ソースコードも確認できます。新しいアイデアを得たり、他のクリエイターの作品から学ぶのに役立つリソースです。

ここでは、Processing Fan公式HPより、p5.jsの作品を数点紹介します。

Particle

Particle（粒子）は、上に小さく、下に大きい粒子を描画し、さらにガイド線を入れることで奥行きを演出した作品です。p5.jsを使用してパーティクルを描くためには、パーティクルのオブジェクトを定義し、それをアニメーションの中で動かすコードを書く必要があります。

drawParticle(i)関数は、各粒子の描画を担当します。rは粒子の半径で、iに応じて最小値から最大値まで変化します。xとyは粒子の位置で、ランダムに配置されます。crは色の変化を表すRGBの配列です。

なお、各粒子を描画するためにforループを使用し、半径に応じてグラデーションで塗りつぶします。

虹色のトンネル

虹色のトンネルは、円状に配置された四角形をランダムなパラメータで描画するようコーディングをしています。奥行きが出るように、中心部にいくほどカラーを薄くしているのが特徴的です。なお、draw関数ではアニメーションや図形の描画を行いますが、ここでは一度だけ実行されるようにnoLoop()が使用されています。また、fill(c, 255, 255, map(r, 0, 300, 0, 170))で色相をc、彩度と明度を255で固定し、透明度はrの値に応じて変化します。

Tidori

Tidoriは、白黒の鳥が連なって飛んでいる様子に見える格子柄「千鳥格子」を、p5.jsで三角形と四角形を組み合わせたパターンで再現した作品です。draw関数では一度だけ実行されるようにnoLoop()が使用されている他、キャンバス上にdrawTidori関数を使用して「Tidori」を配置しています。

p5.jsで表現できるアニメーション例

p5.jsを使用したアニメーションの可能性は多岐に渡り、関数の組み合わせによってさまざまな動きを生み出せます。

ここでは、Processing Fan公式HPより、p5.jsのアニメーション例を紹介します。

Gear（動く歯車）

色の異なる歯車が、かみ合うよう回転するアニメーションです。

frameRate(5)を使用することで、アニメーションのフレームレートが1秒あたり5フレームに設定されています。また、各ギアはtranslate関数で位置を決定し、rotate関数で回転しています。

さらに画面のクリックによって回転の再開・停止を操作できるように、マウスがクリックされると呼び出されるmousePressed関数と、アニメーションの一時停止と再開を切り替えられるloopStatusを使用しています。

Snow（雪が降る・積もるアニメーション）

洋館に雪が降るアニメーションと、地面に雪が積もるアニメーションを組み合わせている作品です。

雪片はellipse関数で描かれており、fill(255, 255/n)で透明度を変化させて光のような効果を表現しています。また、各雪片の位置を更新しながらdrawLight()関数で描画しており、

drawIntegrate()関数で積もった雪を描画しています。

Random Flower（ノイズ関数）

Random Flowerは、ノイズに基づいて円周上に動く2つの点をつなげることで、花のような幻想的な模様を作り出すアニメーション作品です。

noise()関数を使用してノイズに基づいて2つの点の位置を更新し、stroke(frameCount / 5)でストローク（線）の色を時間に応じて変化させています。そしてline(point1[0], point1[1], point2[0], point2[1])で2つの点を線で結び、frameCountが1250を超えた場合はnoLoop()でアニメーションのループを停止するよう制御しています。

Rotate Cube（回転する正六面体）

頂点と線のみを動かして、まるで正六面体が動いているように見せているアニメーション作品です。上記のアニメーションで重要なのがvertexesという変数で、頂点座標を格納するための配列を表しています。vertexesは3Dグラフィックスにおいて、物体や形状の各頂点の座標を管理するのに利用されます。

また、回転角度thetaは、frameCountに依存して時間とともに変化します。そして、rotate_vertex関数を使用し、各頂点を回転させた新しい座標を計算しています。

p5.jsのリファレンス例を紹介

p5.jsの一部の基本的な関数とそれに関連するコードのリファレンス例を以下に紹介します。

リファレンスを参照することで、p5.jsを使用してさまざまなグラフィックスやアニメーションを作成するのに役立ちます。

以下は、p5.jsの一部の基本的な関数とそれに関連するコードのリファレンス例です。これにより、p5.jsを使用してさまざまなグラフィックスやアニメーションを作成するための出発点となるでしょう。なお、これらの例は基本的なものであり、実際のプロジェクトではこれを拡張したり変更したりして使用することが一般的です。

基本のキャンバスを作成する

createCanvas関数は、p5.jsプログラムで描画する領域を定義するための重要な関数です。もしもcreateCanvasを使用せずに描画を行おうとすると、p5.jsはデフォルトで20×20ピクセルのキャンバスを作成しますが、描画する領域が非常に小さいため、プログラムの意図通りの描画が難しくなります。

そのため、まずはcreateCanvas関数で描画領域を定義した後で、描画や色を設定をしましょう。

色

p5.jsで色を操作するためのカラーコーディネートの例を一部紹介します。

background関数、color関数、hue関数はp5.jsにおいて色付けに関連する基本的な関数です。background関数はキャンバスの背景色、color関数で色オブジェクト、hue関数は色相（Hue）の値を取得するために使用されます。

図形・塗りつぶし

上記の関数は、p5.jsの基本的な描画操作でよく使われます。それぞれの関数は異なる描画処理を担当しているため、組み合わせによって複雑なグラフィックやアニメーションの作成が可能です。

描画・テキストの制御

上記の関数を利用することで、描画方法の制御が可能です。なお、引数は関数によって異なります。

まとめ

今回はp5.jsの概要や事例、リファレンス例について紹介してきました。

p5.jsのメリットは直感的で使いやすいJavaScriptライブラリであり、グラフィカルな表現を簡単に行える点です。ビジュアルなプログラミング経験がなくても、豊富な描画関数やイベント処理を利用して、アート、デザイン、アニメーション、データ可視化などのクリエイティブなプロジェクトを実現できます。加えて、ウェブ上で動作するため、手軽に共有や公開が可能であり、豊富なコミュニティサポートも得られます。

プログラミング経験がない方も、p5.jsをアイデアを形にするためのツールとして活用してみましょう。

SNSシェア

• X
• facebook
• hatebu
• LINE
• pocket

CATEGORY

学習

TAGS

p5.js ライブラリ