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ライブラリを使った描画サンプルデモページ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告