ブラウザに描画スケッチする方法【JavaScriptライブラリp5.js】 DAD UNION

JavaScriptライブラリp5.jsを使ってブラウザに描画スケッチをする方法をご紹介します。

Contents

p5.jsとは
p5.js（CDN）ファイル読込とサンプルJavaScriptの記述
- p5.jsダウンロード、サンプル、記述方法
p5.jsライブラリを使った描画サンプルデモページ

p5.jsとは

以下が公式サイトになります。
p5.js

公式サイトには「p5.js はProcessingの本来の目的である、アーティストやデザイナー、教育者、初学者のためのコーディング環境を今日のWebにおいて再解釈するJavaScriptライブラリです。 p5.jsにはオリジナルのProcessingスケッチのメタファを使った完全な描画機能があります。」とあります。

Processingでやる様なライブコーディングとかも出来ますね。

p5.js（CDN）ファイル読込とサンプルJavaScriptの記述

※p5.jsファイルをCDNから読み込み、ブラウザ上でマウスを動かすと、丸（〇）を描画するサンプルJavaScript処理になります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

<script type="text/javascript">
function setup() {
  createCanvas(1200, 500);
}

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