如何从 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 并使其在矩形的其他点旋转吗？

Answer 1

如果你想围绕一个枢轴点旋转，你translate() move the rectangle so that the pivot point is at the origin of the coordinate system. After that, rotate() the rectangle and finally 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>

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

How do I rotate a rectangle shape from a specific point in p5.js

javascript

processing

p5.js