サイト制作に関するメモ書き

HOME > JavaScript > p5.jsを使ってみる

p5.jsを使ってみる

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

準備

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

it-started-with-p5-js01

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

setup() 最初に1回実行される関数。
draw() 毎フレーム実行される関数。
createCanvas(width, height) ドキュメント内にcanvasを作成。
mouseIsPressed マウスが押下されている場合はtrue、押下されていない場合はfalseを返す。
fill(color) 塗りつぶす色を指定。
ellipse(x, y, width, height) 楕円を描画。
x,yで楕円の中心座標、widthとheightで楕円のサイズを指定。
mouseX カーソルのcanvas上の現在位置のX座標を返す。
mouseY カーソルのcanvas上の現在位置のY座標を返す。

 

サンプル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;
}

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

stroke(color) 線の色を指定。
strokeWeight(num) 線の太さを指定。
line(x, y, x2, y2) x,y座標からx2,y2座標へ線を描画。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP