p5.jsを使ってみる

ProcessingのJavaScript版ライブラリ「p5.js」をさわってみます。

準備

公式サイトからダウンロードします。

zip版とJavaScriptファイル単体の圧縮版・非圧縮版、CDNから選んで使用ください。
今回はzip版をダウンロードして使用しました。

ダウンロードしたJavaScriptファイルを読み込ませて準備完了です。

<script src="./p5.min.js"></script>

サンプル

公式で用意されているチュートリアルを試してみます。

JavaScript

function setup() { // 最初に実行される関数
	createCanvas(640, 480); // canvasの作成
}

function draw() { // 毎フレーム実行される関数
	// マウスが押下した状態かどうか
	if (mouseIsPressed) {
		fill(0); // 塗りの指定
	} else {
		fill(255); // 塗りの指定
	}
	ellipse(mouseX, mouseY, 80, 80); // 円の描画
}

canvas上でカーソルを動かすと円が描画され、押下した状態だと塗りが黒色になります。
チュートリアルのデモページ
　

サンプル2

先ほどのサンプルをベースに、ドラッグで線を引けるようにしてみます。

JavaScript

function setup() { // 最初に実行される関数
	createCanvas(640, 480); // canvasの作成
}

var currentX;
var currentY;
function draw() { // 毎フレーム実行される関数
	// マウスが押下した状態かどうか
	if (mouseIsPressed) {
		stroke(0); // 線の色指定
		strokeWeight(4); // 線の太さ指定
		line(currentX, currentY, mouseX, mouseY); // 線の描画
	}
	// カーソルのcanvas上の現在位置を保存しておく
	currentX = mouseX;
	currentY = mouseY;
}

ドラッグで線を引くデモページ
　

【参考サイト】

• p5.js