JavaScript

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

JavaScriptライブラリ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>

p5.jsダウンロード、サンプル、記述方法

p5.jsダウンロード、サンプル、記述方法等は以下に参考がありました。
p5.js|get started

CDNやjsファイルをダウンロードしなくてもブラウザ上のエディターでも実行可能です。
p5.js Web Editor

p5.jsライブラリを使った描画サンプルデモページ

p5.jsライブラリを使った描画サンプルデモページ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。