p5.js:paint-tool
code:sketch.js
const sketch = p => {
let pen_color = '#333';
let pen_size = 16;
let canvas_color = '#eee';
p.setup = () => {
//キャンバスを作成
const canvas = p.createCanvas(600,600);
canvas.id = '__P5sc__';
//背景色
p.background(canvas_color);
p.fill(canvas_color);
}
p.draw = () => {
p.noStroke()
if (!p.mouseIsPressed) {
p.ellipse(p.mouseX, p.mouseY, pen_size);
}
}
//p.mousePressed = () => {
// p.fill(pen_color);
// p.ellipse(p.mouseX, p.mouseY, pen_size);
// }
p.touchMoved = () => {
p.fill(pen_color);
p.smooth();
p.stroke(pen_color);
p.strokeWeight(pen_size);
p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY);
return false;
}
p.keyPressed = () => {
if (p.keyCode === p.ESCAPE) {
p.fill(canvas_color);
p.rect(0,0,600,600);
}
}
p.keyTyped = () => {
if(p.key === 'a'){
p.fill(pen_color);
}
if(p.key === 'z'){
p.fill(canvas_color);
}
if(p.key === 's'){
pen_size = 8;
}
if(p.key === 'm'){
pen_size = 16;
}
if(p.key === 'l'){
pen_size = 32;
}
if(p.key === '0'){
p.fill(canvas_color);
}
if(p.key === '1'){
p.fill(pen_color);
}
if(p.key === '2'){
p.fill('rgba(250,0,0,0.5)');
}
if(p.key === '3'){
p.fill('rgba(250,250,0,0.5)');
}
if(p.key === '4'){
p.fill('rgba(250,0,250,0.5)');
}
if(p.key === '5'){
p.fill('rgba(0,250,0,0.5)');
}
if(p.key === '6'){
p.fill('rgba(0,250,250,0.5)');
}
if(p.key === '7'){
p.fill('rgba(0,0,250,0.5)');
}
return false;
}
}
new p5(sketch, 'editor');
p5-sketch-button.icon（実行ボタン）
https://img.shields.io/badge/p5.js--paint-tool-ED225D.svg?logo=p5.js&style=for-the-badge