rotation - 处理中的 “Rotate” 和 “translate” 让我头疼

Question

作为进入处理的一个小作业，我必须编写一些代码才能获得以下内容:

使用

public void setup() {
   size(300,200);
   noFill();
   rect(100, 20, 40, 80);
   ellipseMode(CENTER);
   fill(#000000);
   ellipse(width/2, height/2, 5,5);
   
   noFill();
   translate(width/2, height/2);
   rotate(radians(65));
   rect(-20, -40, 40, 80);
}
public void draw() {
}

到目前为止，效果非常好。但我不喜欢的是，我必须更改底部 rect 指令内的坐标才能正确旋转。我知道通过旋转，您并不是旋转单个元素，而是旋转整个坐标系。我不知道将哪些值放入 translate 指令中以使输出如上图所示，同时仍在 rect 命令中使用相同的坐标.

任务已经用我使用的代码完成了，我只是不太喜欢它。所以这不仅仅是要求别人做我的作业，而是纯粹的兴趣。

编辑:更广义的问题尝试:在旋转以获得我想要的结果之前，我如何知道要翻译哪些值？有没有办法计算它们？当然，这不仅仅是尝试，不是吗？

Answer 1

处理中的很多困惑都是坐标系。在处理中，原点 (0,0) 位于屏幕的左上角，屏幕上仅显示正坐标。最常见的解决方法是调用:

translate(width/2, height/2);

在 void draw() 方法的开头。这样，0,0 现在位于草图的中心，并且任何后续调用的方法(例如 rotate(radians(65)))将从草图的中心开始执行操作。

这也很好，因为使用 P3D 或 OPENGL 渲染器的草图通常会调用转换来将坐标系更改为更易于使用的坐标系。例如，位于 0,0 或 0,0,0 的对象位于中心，这样可以更轻松地使相机围绕该对象旋转或让对象绕其中心旋转。

另一种流行的绘制对象的方法是像上面那样设置原点，而不是给出每个对象的坐标，即 rect(-100, -50, 50, 50) 是使用在平移之前在 0,0 处绘制每个对象之前的 popMatrix() 和 PushMatrix，如下所示:

translate(width/2, height/2);
pushMatrix();
  translate(-100, -50);
  rect(0,0,50,50);
popMatrix();

如果您认为最终可能会转向 3d 渲染器，那么这是在 2d 渲染器中使用的好方法，因为您可以轻松地将 rect() 替换为 box() 或 sphere() 或创建您自己的方法或对象来绘制几何图形，假设原点位于 0,0。

如果用变量替换 x 和 y 坐标或在 for 循环中迭代数组，则可以非常轻松地以 2d 或 3d 形式绘制数百或数千个形状，并且只需最少的工作量和最少的代码重写。

<小时/>

更新:根据原始发帖者的评论添加了说明。

<小时/>

我稍微改变了问题，以向您展示我将如何解决这个问题。我将使用推送和弹出矩阵展示上面描述的平移/旋转方法。我只是猜测这些值，但如果您想要像素精确的值，您可以在图像编辑程序(如 Photoshop 或预览)中进行测量。

translate(180, 150);
rect(0, 0, 180, 80);

translate(185, 170);
rotate(radians(65));
rect(0, 0, 180, 80);

translate(180, 250);
ellipse(0, 0, 8, 8);

将它们与 pushMatrix() 和 popMatrix() 放在一起。

void setup(){
  size(400,400);
}

void draw(){
  // rect1
  noFill();
  pushMatrix();
    translate(180, 150);
    rect(0, 0, 180, 80);
  popMatrix();
  // rect2
  pushMatrix();
    translate(185, 170);
    rotate(radians(65));
    rect(0, 0, 180, 80);
  popMatrix();
  // ellipse
  fill(0);
  pushMatrix();
    translate(180, 250);
    ellipse(0, 0, 8, 8);
  popMatrix();
}