P5jsで簡単お絵かきアプリを作ろう!


P5jsではお絵描きアプリも簡単に作れます!


作り方の解説はこちらから!

var stc = 0;
var stw = 1;
var slider;

function setup() {
	createCanvas(400, 400);
	slider = createSlider(1, 50, 1);
	slider.position(270, 10);
}

function draw() {
	//background(220);
	fill(100);
	stroke(100);
	strokeWeight(1);
	rect(0, 0, width, 60);
	button(0, 0, 50, 255);
	button(50, 0, 50, 0);
	button(100, 0, 50, color(255, 0, 0));


	stroke(stc);
	strokeWeight(stw);
	if (mouseIsPressed) {
		line(mouseX, mouseY, pmouseX, pmouseY);
	}

	stw = slider.value();
}

function button(x, y, s, c) {
	var bc = c;
	if (mouseX > x && mouseX < x + s && mouseY > y && mouseY < y + s && mouseIsPressed) {
		bc = 0;
		stc = c;
	}
	fill(bc);
	stroke(0);
	strokeWeight(1);
	rect(x, y, s, s);
}