如何在p5.js中从特定点旋转矩形

Question

translate(width/2,height/1.87)
rotate(angle);
angle++;
rectMode(CENTER)//can i modify the rectmode and make it rotate at other point of the rect
rect(0,0,100,30)

我可以修改rectMode并使其在rect的其他点旋转吗？

Answer 1

如果要绕轴点旋转，则translate()移动矩形，使轴点位于坐标系的原点。之后，rotate()是矩形，最后translate()是它在世界上的位置：

translate(target_x, target_y);
rotate(angle);
translate(-pivot_x, -pivot_y);

function setup() {
createCanvas(300, 300);
}
// (-5, 15) measured form the center of the rectangle
let pivot_x = -5, pivot_y = 15;    
// Position at which the pivot point should be moved in the world
let target_x = 150, target_y = 100; 
let angle = 0;
let angle_change = 0.01;
function draw() {
background(255);

push()
translate(target_x, target_y);
rotate(angle);
translate(-pivot_x, -pivot_y);
noFill();
stroke(0)
rectMode(CENTER)
rect(0,0,100,30);
pop();

noStroke();
fill(255, 0, 0);
circle(target_x, target_y, 5)

angle += angle_change;
if (abs(angle) > 0.5)
angle_change *= -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>