元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【p5.js】p5.jsの導入

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

下準備

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

<!-- 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に倣って最初のコードを書く。

//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の公式サイトのサンプルプログラムを試す