p5.js:rect()

キャンバスを用意する

code:sketch1.js

function setup() {

$('<h2>').text('長方形を描く').appendTo($('body'))

createCanvas(600, 600)

noLoop()

background(220)

}

雑に長方形を描く

code:sketch1.js

function draw() {

//四角形を描く．引数は順に（左上のX，Y座標，幅，高さ）

rect(100, 100, 200, 200);

// fill(0, 0, 0);

rect(200, 200, 200, 200);

rect(300, 300, 200, 200);

}

rect(始点のx座標, 始点のy座標, 横幅、縦幅)

code:sketch.js

const sketch = p => {

p.setup = () => {

//キャンバスを作成

const canvas = p.createCanvas(600,425);

canvas.id = '__P5sc__';

//背景色

p.background('#eee');

p.stroke('#aaa');

}

p.draw = () => {

if (p.mouseIsPressed) {

p.fill(0,0,0,10);

} else {

p.fill('#fff');

}

p.rect(p.mouseX, p.mouseY, 80, 60);

}

}

new p5(sketch, 'editor');

https://img.shields.io/badge/p5.js-rect()-ED225D.svg?logo=p5.js&style=for-the-badge