p5.jsを使ってお絵かきツールを作ってみる

p5.jsを使って簡単な絵を描画できるようにしてみます。

サンプルコード

今回はp5.jsとp5.dom.jsを使用して、線の色と太さの変更、白紙に戻す機能を付けてみます。

JavaScript

var slider = []; // 各スライダーを格納
var input = []; // 各inputを格納
var delButton;
function setup() { // 最初に実行される関数
	createCanvas(640, 480); // canvasの作成
	noStroke();

	// color用のスライダーとinput作成
	for (var i = 0; i < 3; i++) {
		slider[i] = createSlider(0, 255, 0);
		slider[i].position(460, (i * 30) + 10);
		slider[i].input(sliderFunction);
		input[i] = createInput('0');
		input[i].size(30).position(600, (i * 30) + 10);
		input[i].input(inputFunction);
	}
	var rText = createElement('div', 'R').position(445, 15);
	var gText = createElement('div', 'G').position(445, 45);
	var bText = createElement('div', 'B').position(445, 75);

	// weight用のスライダーとinput作成
	slider[3] = createSlider(1, 20, 5);
	slider[3].position(460, 100);
	slider[3].input(sliderFunction);
	input[3] = createInput('5');
	input[3].size(30).position(600, 100);
	input[3].input(inputFunction);
	var wText = createElement('div', 'W').position(445, 105);

	// delボタン作成
	delButton = createButton('Clear');
	delButton.position(540, 140);
	delButton.mousePressed(del);
}

function draw() {
	// colorとweight用の値取得
	r = slider[0].value();
	g = slider[1].value();
	b = slider[2].value();
	w = slider[3].value();

	// マウスが押下した状態かどうか
	if (mouseIsPressed) {
		push();
		stroke(r, g, b); // 線の色指定
		strokeWeight(w); // 線の太さ指定
		line(currentX, currentY, mouseX, mouseY); // 線の描画
		pop();
	}
	// カーソルのcanvas上の現在位置を保存しておく
	currentX = mouseX;
	currentY = mouseY;

	// 右上のゲージ部分では線が描画されないようにする
	push();
	fill(200);
	rect(440, 0, 200, 180);
	pop();
}

// canvas内の線を削除
function del() {
	background(255);
}

// inputの値を変更したときの処理
function inputFunction() {
	for (var i = 0; i < slider.length; i++) {
		var inputVal =  input[i].value();
		var sliderVal =  slider[i].value();
		if(i != 3) {
			var sliderMin = 0;
			var sliderMax = 255;
		} else {
			var sliderMin = 1;
			var sliderMax = 20;
		}
		// inputの値がスライダーの範囲内でない場合は飛ばす
		if(!(inputVal >= sliderMin && inputVal <= sliderMax)) {
			continue;
		}
		// inputの値とスライダーの値が異なるとき
		if(inputVal != sliderVal) {
			slider[i].value(inputVal); // スライダーの値を変更
		}
	}
}

// スライダーの値を変更したときの処理
function sliderFunction() {
	for (var i = 0; i < slider.length; i++) {
		var inputVal =  input[i].value();
		var sliderVal =  slider[i].value();
		// スライダーの値とinputの値が異なるとき
		if(inputVal != sliderVal) {
			input[i].value(sliderVal); // inputの値を変更
		}
	}
}

お絵かきツールのデモページ
　

【参考サイト】

• p5.js | reference