【p5.js】p5.jsの導入

JavaScriptでビジュアルコーディングをします。そのため、p5.jsを使います。p5.jsは、ProcessingをJavaScriptに移植したものです。今回は、その導入記事です。簡単なサンプルコードも書いていきます。

下準備

p5.jsをダウンロードするかCDNを利用して、HTMLに読み込む。

• p5.js公式サイト:https://p5js.org/

<!-- xxx.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<script src="./mysketch.js"></script><!-- このファイルに記述していく-->

//mysketch.js
function setup() {
  //最初の1回だけ実行する処理を記述する
}

function draw() {
  //繰り返したい処理を記述する
}

function setup(){}に、最初の1回だけ実行する処理を記述する。function draw() {}は、再描画の処理。ここに、繰り返したい処理を記述する。

Get Started

まず、Get Startedに倣って最初のコードを書く。

• https://p5js.org/get-started/

//mysketch.js
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

幅400px、高さ400px、背景色がグレーの領域が表示される。

//mysketch.js
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

先ほどのグレーの領域に、円が表示される。

//mysketch.js
function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

マウスの動きに合わせて、円が描画される。マウスが押されている時は、塗りの色を黒にする。マウスが押されていない時は、塗りの色を白にする。

まとめ

• p5.jsをHTMLに読み込む
• function setup(){}に最初の1回だけ実行する処理を、function draw() {}に繰り返したい処理を記述する
• p5.jsの公式サイトのサンプルプログラムを試す