/suto3/p5.js:rect() - Scrapbox Reader

generated at 2/23/2025, 11:27:05 AM

p5.js:rect()
四角形、長方形、方形、矩形（rectangle、rect）

https://p5js.org/reference/#/p5/rect

キャンバスを用意する
sketch1.jsfunction setup() {
  $('<h2>').text('長方形を描く').appendTo($('body'))
  createCanvas(600, 600)
  noLoop()
  background(220)
}

雑に長方形を描く
sketch1.jsfunction draw() {
 //四角形を描く．引数は順に（左上のX，Y座標，幅，高さ）
 rect(100, 100, 200, 200);
 // fill(0, 0, 0);
 rect(200, 200, 200, 200);
 rect(300, 300, 200, 200);
}

実行→https://suto3.github.io/runp5/?code=https://scrapbox.io/api/code/suto3/p5.js:rect/sketch1.js

 rect(始点のx座標, 始点のy座標, 横幅、縦幅) 
sketch.jsconst 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://suto3.github.io/runp5/?code=https://scrapbox.io/api/code/suto3/p5.js:rect/sketch.js
（実行ボタン）

#p5.js-function