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');