MENU
contact

VSCodeでp5.jsを使う方法

VSCode

採用はこちら

p5.jsは、JavaScriptを使って図形やアニメーション、インタラクティブな作品などを作成できるクリエイティブコーディング向けのライブラリです。

p5.jsにはブラウザだけで利用できるWeb Editorもありますが、VSCodeを使えば、コード補完やGit、拡張機能、ファイル管理などを活用しながら、より本格的な開発環境を構築できます。

VSCodeでp5.jsを利用する方法はいくつかありますが、主に次の2つがあります。

  • p5.js向けのVSCode拡張機能を利用する方法
  • HTMLとJavaScriptを自分で作成してp5.jsを読み込む方法

初心者の場合は、まずシンプルなHTMLとJavaScriptを用意して仕組みを理解するとよいでしょう。

目次

p5.jsとは

JavaScriptでグラフィックを扱いやすくするライブラリ

p5.jsは、JavaScriptでグラフィックやアニメーションを作成しやすくするためのライブラリです。

通常のJavaScriptでもCanvas APIを使えば図形を描画できますが、p5.jsを利用すると、より簡潔なコードで描画処理を記述できます。

例えば、次のコードではマウスカーソルの位置に円を描画できます。

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

function draw() {
  background(220);
  circle(mouseX, mouseY, 50);
}

createCanvas()で描画領域を作成し、circle()で円を描画しています。

mouseXとmouseYには、現在のマウスカーソルの座標が入ります。

VSCodeでp5.jsを使うために必要なもの

基本的な環境

シンプルなp5.js作品を作る場合、基本的に必要なのは次のものです。

  • Visual Studio Code
  • Webブラウザ
  • HTMLファイル
  • JavaScriptファイル
  • p5.jsライブラリ

通常のp5.jsであれば、Node.jsやnpmは必須ではありません。

p5.jsは基本的にWebブラウザ上で動作するJavaScriptライブラリだからです。

ただし、npmでパッケージを管理したり、Viteなどのビルドツールを利用したりする場合には、Node.jsが必要になります。

VSCodeでp5.jsを使う方法1：拡張機能を利用する

p5.js向けの拡張機能をインストールする

VSCodeでは、p5.jsのプロジェクト作成を支援する拡張機能を利用できます。

p5.js公式ドキュメントでは、VSCode向けの環境構築方法として「p5.js 2.x Project Generator」が紹介されています。

VSCodeを起動したら、左側にある「拡張機能」を開きます。

WindowsやLinuxでは、次のショートカットでも開けます。

Ctrl + Shift + X

macOSの場合は次のとおりです。

Cmd + Shift + X

検索欄に、

p5.js 2.x Project Generator

と入力して、対象の拡張機能をインストールします。

なお、「p5.js公式拡張機能」と断定するよりも、「p5.js公式ドキュメントで紹介されているVSCode拡張機能」と表現する方が正確です。

p5.jsプロジェクトを作成する

拡張機能をインストールしたら、VSCodeのコマンドパレットを開きます。

WindowsやLinuxでは、

Ctrl + Shift + P

macOSでは、

Cmd + Shift + P

を押します。

続いて、

Create a new p5.js 2.x Project

などのp5.jsプロジェクト作成コマンドを選択します。

保存先や設定を指定すると、p5.jsを動かすために必要なファイルが自動的に生成されます。

生成されるファイル構成は、拡張機能のバージョンや設定によって異なる場合があります。

VSCodeでp5.jsを使う方法2：CDNから読み込む

プロジェクトフォルダを作成する

p5.jsの仕組みを理解したい場合は、自分でHTMLとJavaScriptを作成する方法がおすすめです。

まず、次のようなフォルダを作成します。

p5-project/
├── index.html
└── sketch.js

index.htmlがWebページ本体で、sketch.jsにp5.jsのコードを書きます。

index.htmlを作成する

index.htmlには、p5.js本体とsketch.jsを読み込むコードを記述します。

例えば、次のようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js Sample</title>

  <script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
</head>

<body>
  <script src="sketch.js"></script>
</body>
</html>

重要なのは、p5.js本体を先に読み込むことです。

基本的には、

p5.js
↓
sketch.js

という順番になります。

sketch.jsを先に読み込むと、createCanvas()などのp5.js関数を認識できず、エラーになる可能性があります。

p5.jsのバージョンを固定する方法

CDNではバージョン指定も可能

CDNでは、

<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>

のように、p5.js 2.x系を指定することもできます。

ただし、公開作品や長期間運用するWebサイトでは、バージョンを固定した方が安定しやすい場合があります。

例えば、使用するバージョンを明示したURLを指定します。

<script src="https://cdn.jsdelivr.net/npm/p5@バージョン番号/lib/p5.min.js"></script>

バージョン固定を行うと、将来的にp5.jsが更新されても、突然挙動が変わるリスクを抑えられます。

学習用途ではメジャーバージョン指定、公開作品ではバージョン固定というように使い分けるとよいでしょう。

sketch.jsを作成する

基本的なコードを書く

次に、sketch.jsを作成します。

例えば、次のコードを入力します。

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

function draw() {
  background(220);

  circle(mouseX, mouseY, 50);
}

これだけで簡単なp5.js作品を作成できます。

setup()とは

setup()は、p5.jsのスケッチ開始時に基本的に一度だけ実行される関数です。

例えば、

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

では、横600ピクセル、縦400ピクセルのキャンバスを作成しています。

setup()では、キャンバスの作成や変数の初期化などを行うのが一般的です。

draw()とは

draw()は、通常、繰り返し実行される描画用の関数です。

例えば、

function draw() {
  background(220);
}

とすると、背景を継続的に描画します。

ただし、draw()は必ず永久に繰り返されるわけではありません。

例えば、

noLoop();

を使えば、継続的な描画を停止できます。

再開する場合は、

loop();

を利用できます。

Live Serverでp5.jsを実行する

p5.jsはブラウザ上で実行する

p5.jsは基本的にWebブラウザ上で実行します。

そのため、VSCodeでコードを書いたあと、ブラウザでindex.htmlを表示して動作を確認します。

単純なスケッチであれば、index.htmlを直接開くだけでも動く場合があります。

ただし、画像やJSON、音声などの外部ファイルを読み込む場合、ブラウザのセキュリティ制限によって正常に動作しないことがあります。

そのため、ローカルWebサーバーを利用する方法がおすすめです。

Live Serverを利用する

VSCodeでは「Live Server」という拡張機能を利用できます。

Live Serverを使うと、ローカルWebサーバーを簡単に起動できます。

index.htmlを右クリックして、

Open with Live Server

を選択します。

すると、ブラウザが起動して、

http://127.0.0.1:5500/

や、

http://localhost:5500/

のようなURLでページが表示されます。

ポート番号は環境や設定によって異なることがあります。

なお、利用しているp5.js向けプロジェクト生成拡張機能によっては、Live Serverが関連拡張機能として一緒に導入される場合があります。

参考サイト

Visual studio codeを用いたp5.js環境構築 – Y.designstudio

p5.jsで図形を描く方法

円を描く

円を描く場合はcircle()を使用します。

circle(200, 200, 100);

基本的には、

X座標：200
Y座標：200
直径：100

という意味です。

長方形を描く

長方形を描く場合はrect()を使用します。

rect(100, 100, 200, 150);

デフォルト設定では、

rect(x, y, width, height);

という形式になります。

この場合、xとyは基本的に長方形の左上の位置を表します。

ただし、

rectMode(CENTER);

などを設定すると、座標の基準点を変更できます。

線を描く

線を描く場合はline()を使用します。

line(0, 0, 600, 400);

始点と終点の座標を指定して線を描画します。

p5.jsで色を設定する

背景色を設定する

背景色にはbackground()を使用します。

background(200);

RGB形式で指定することもできます。

background(255, 200, 100);

図形の色を設定する

図形の塗りつぶしにはfill()を使用します。

fill(255, 0, 0);
circle(200, 200, 100);

この場合は赤い円になります。

枠線を設定する

枠線の色にはstroke()を使用します。

stroke(0);

枠線をなくしたい場合は、

noStroke();

を使用します。

p5.jsでアニメーションを作る

変数を少しずつ変化させる

draw()の中で変数を変化させると、簡単にアニメーションを作成できます。

例えば、次のコードでは円が左から右へ移動します。

let x = 0;

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

function draw() {
  background(220);

  circle(x, 200, 50);

  x += 2;
}

draw()が実行されるたびに、

x += 2;

によってX座標が増加します。

その結果、円が横方向へ移動しているように見えます。

マウス操作を利用する

mouseXとmouseYを使う

p5.jsでは、マウスカーソルの座標を簡単に取得できます。

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

function draw() {
  background(220);

  circle(mouseX, mouseY, 50);
}

mouseXがX座標、mouseYがY座標です。

マウスを移動すると、それに合わせて円も移動します。

クリックイベントを利用する

マウスクリックにも反応させることができます。

例えば、

function mousePressed() {
  console.log("クリックされました");
}

とすると、クリック時に処理を実行できます。

p5.soundを使う場合の注意点

p5.soundは別ライブラリとして扱う

p5.jsで音声を扱う場合には注意が必要です。

p5.js 2.xでは、p5.soundはp5.js本体とは別ライブラリとして扱われています。

そのため、p5.soundの機能を使いたい場合は、p5.jsとは別にp5.soundを読み込む必要があります。

単に、

assets/
└── sounds/

というフォルダを作っただけでは、p5.soundの機能を利用できるわけではありません。

使用するp5.jsとp5.soundのバージョンや互換性を確認したうえで、適切なライブラリを読み込むことが重要です。

p5.jsが動かない場合の確認ポイント

p5.js本体が読み込まれているか確認する

HTML内にp5.jsの読み込みがあるか確認します。

<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>

これがないと、createCanvas()やcircle()などは利用できません。

sketch.jsのパスを確認する

HTML側で、

<script src="sketch.js"></script>

と記述している場合、実際にindex.htmlと同じ場所にsketch.jsが存在する必要があります。

フォルダを分けている場合は、正しいパスを指定します。

例えば、

js/
└── sketch.js

という構成なら、

<script src="js/sketch.js"></script>

とします。

ファイル名の大文字と小文字を確認する

環境によっては、

sketch.js

と、

Sketch.js

は別ファイルとして扱われます。

特にWebサーバーへアップロードした場合は、大文字と小文字の違いに注意が必要です。

scriptタグの順番を確認する

基本的には、

<script src="p5.js"></script>
<script src="sketch.js"></script>

という順番にします。

p5.jsより先にsketch.jsを読み込むと、p5.jsの関数がまだ定義されていないため、エラーが発生する可能性があります。

ブラウザの開発者ツールでエラーを確認する

Consoleを確認する

p5.jsが正常に動かない場合は、ブラウザの開発者ツールを確認します。

ChromeやEdgeでは、Windows環境なら一般的に、

F12

または、

Ctrl + Shift + I

で開発者ツールを開けます。

「Console」タブを確認すると、JavaScriptのエラーが表示されます。

例えば、

circl(200, 200, 100);

のようにスペルを間違えると、エラーになります。

正しくは、

circle(200, 200, 100);

です。

p5.jsをローカルに保存して使う方法

CDNを使わない構成も可能

p5.jsはCDNだけでなく、ライブラリ本体をプロジェクト内に保存して利用することもできます。

例えば、次のような構成です。

p5-project/
├── index.html
├── sketch.js
└── lib/
    └── p5.min.js

HTMLでは、

<script src="./lib/p5.min.js"></script>
<script src="./sketch.js"></script>

のように読み込みます。

この方法なら、インターネットに接続できない環境でもp5.jsを実行できます。

おすすめのプロジェクト構成

ファイルの役割ごとにフォルダを分ける

ある程度大きな作品を作る場合は、ファイルの役割ごとに整理すると管理しやすくなります。

例えば、次のような構成です。

my-p5-project/
├── index.html
├── sketch.js
├── css/
│   └── style.css
└── assets/
    ├── images/
    └── sounds/

それぞれ、

index.html
→ Webページ本体

sketch.js
→ p5.jsのプログラム

style.css
→ CSS

images
→ 画像ファイル

sounds
→ 音声ファイル

という役割に分けられます。

実際のフォルダ構成は、手動で作成する場合とプロジェクト生成拡張機能を使う場合で異なることがあります。

VSCodeの実行ボタンで動かすわけではない

p5.jsはブラウザで実行する

初心者が特に混乱しやすいのが、p5.jsの実行方法です。

p5.jsはPythonなどとは異なり、基本的にVSCode上で直接実行するものではありません。

基本的な流れは、

VSCodeでコードを書く
↓
HTMLからp5.jsとsketch.jsを読み込む
↓
Live ServerなどでWebサーバーを起動する
↓
ブラウザで確認する

となります。

VSCodeはあくまでもコードを書くためのエディターであり、p5.jsの描画結果は基本的にWebブラウザ上に表示されます。

p5.js Web EditorとVSCodeの違い

Web Editorは初心者向け

p5.jsにはブラウザだけで利用できるWeb Editorがあります。

Web Editorでは、ほとんど環境構築をすることなく、すぐにコードを書き始められます。

そのため、p5.jsを初めて学ぶ人には便利です。

VSCodeは本格的な開発に向いている

一方、VSCodeでは、

  • Git
  • GitHub
  • HTML
  • CSS
  • JavaScript
  • npm
  • Node.js
  • 外部ライブラリ
  • 画像
  • 音声

などを組み合わせて開発しやすいというメリットがあります。

複数ファイルで作品を管理したい場合や、Webサイトとp5.jsを組み合わせたい場合にはVSCodeが向いています。

VSCodeでp5.jsを始める基本的な流れ

初心者はシンプルな構成から始める

初めてVSCodeでp5.jsを使う場合は、次の順番で進めると分かりやすいでしょう。

  1. VSCodeをインストールする
  2. p5.js用のプロジェクトフォルダを作る
  3. index.htmlを作る
  4. sketch.jsを作る
  5. HTMLからp5.jsを読み込む
  6. sketch.jsにコードを書く
  7. Live Serverなどでローカルサーバーを起動する
  8. ブラウザで動作を確認する
  9. エラーがあればブラウザのConsoleを確認する

拡張機能を利用したい場合は、p5.js公式ドキュメントで紹介されているVSCode向けのプロジェクト生成拡張機能を利用する方法もあります。

まとめ

VSCodeでp5.jsを使う場合、最も基本的なのは、HTMLからp5.js本体と自分のJavaScriptファイルを読み込み、ブラウザ上で実行する方法です。

最小構成であれば、

index.html
sketch.js

の2ファイルだけでも始められます。

p5.jsでは、まず次のような基本機能から覚えるとよいでしょう。

createCanvas()
background()
circle()
rect()
fill()
stroke()
mouseX
mouseY

その後、

変数
↓
条件分岐
↓
関数
↓
アニメーション
↓
マウス操作
↓
キーボード操作
↓
画像や音声

という順番で学習すると、p5.jsの仕組みを理解しやすくなります。

VSCodeを利用すれば、p5.js単体の作品だけでなく、HTMLやCSSと組み合わせたWebサイト、GitHubで管理する作品、外部ライブラリを使ったプロジェクトなどにも発展させやすくなります。

以上、VSCodeでp5.jsを使う方法についてでした。

最後までお読みいただき、ありがとうございました。

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeでp5.jsを使う方法
目次