处理中的"旋转"和"翻译"让我感到头痛

Question

作为进入Processing的小作业,我必须编写一些代码来获得以下内容:

运用

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渲染器的通常会调用translate来将坐标系更改为更易于使用的内容.例如,0,0或0,0,0处的对象位于中心,这使得围绕对象绕摄像机旋转更容易,或者使对象围绕其中心旋转.

另一种流行的绘制对象的方法是将原点设置为上面而不是给出每个对象的坐标,即 rect(-100, -50, 50, 50)在翻译之前使用popMatrix()和pushMatrix,然后在0,0绘制每个对象,如下图所示:

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中绘制数百或数千个形状变得非常容易,只需要很少的工作量和最少的代码重写.

更新:根据他们的评论添加原始海报的说明.

我稍微改变了问题,向您展示我将如何处理这个问题.我正在使用push和pop矩阵显示我上面描述的translate/rotate方法.我只是猜测值,但如果你想要像素精确的东西,你可以在像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();
}