在处理中旋转，反转和平移PShape对象 [英] Rotating, inverting and translating a PShape object in Processing

问题描述

我想:

多次
• 翻译，反转和旋转单个四边形(PShape对象)
• 然后更改其2个顶部顶点之一的高度

• translate, invert and rotate a single quadrilateral (PShape object) multiple times
• then change the height of one of its 2 top vertices

因此，整个事情就像是可以弯曲的铰接臂 向右或向左.

so as the whole thing act as an articulated arm that can be bent either to the right or the left.

为清晰起见，我制作了一些图形.

To be as clear as possible I've made some graphics.

我知道我可以做到

使用translate()
• 翻译四边形
• 翻转(用scale(1, -1)
反转)
• 旋转，使用atan2()函数

• translate the quadrilateral using translate()
• flip (invert) it with scale(1, -1)
• rotate it using the atan2() function

问题

将3个组合在一起时，我得到以下结果:

When combining the 3 together I end up with this:

旋转角度似乎是正确的，但很明显平移存在一些问题(在X轴或Y轴上)，我无法确切知道是什么.

The angle of rotation seems correct but obviously there's something off with the translation (either on the X or Y axis) and I can't figure out what exactly.

我怀疑枢轴缺少翻译，或者转换顺序不正确(或者可能两者都有).

I suspect a missing translation for the pivot, or an incorrect order of transformations (or maybe both).

如果有人可以帮助我了解我在做什么错以及如何解决此问题，我将不胜感激.

I would really appreciate if someone could help me understand what I'm doing wrong and how to fix this problem.

int W = 40;
int H = 40;
int offset = 10; 

float[] p0 = {-W/2, -H/2};
float[] p1 = {-W/2,  H/2};
float[] p2 = {W/2, H/2};
float[] p3 = {W/2, -H/2 - offset};

PShape object;


void setup(){
    size(600, 600, P2D);
    smooth(8);
    noFill();
}


void draw(){
    background(255);

    pushMatrix();
    translate(width>>1, height>>1);

    float angle = atan2(p3[1] - p0[1], p3[0] - p0[0]);

    for (int i = 0; i < 6; i++){

        int factor = (i % 2 == 0) ? 1 : -1;

        //Height translation
        translate(0, H*factor);

        //Flip all quads except 1st one
        if (i > 0){
          scale(1, -1);
        }

        //Rotate once every 2 quads
        if (i%2 == 1){
          rotate(-angle*2);
        }

        object();
      }

    popMatrix();

}


void object() {
    beginShape(QUADS);

    vertex(p0[0], p0[1]);
    vertex(p1[0], p1[1]);
    vertex(p2[0], p2[1]);
    vertex(p3[0], p3[1]);

    endShape();
}

推荐答案

最终找到了解决方法

修复:

• QUADS的顶点顺序不正确
• 缺少枢轴高度的计算(基于@ Rabbid76的帮助)
• 基于该高度的平移需要在旋转之前和(不确定原因)
进行操作
• 旋转角度必须乘以-1(负角)才能更改弯曲面

• the vertices order of the QUADS was incorrect
• the computation of the pivot height was missing (based on @Rabbid76's help)
• the translation based on that height needs to be operated before and after the rotation (not sure to understand the reason)
• the rotation angle has to be multiplied by -1 (negative angle) in order to change the bending side

add_library('controlP5')

W, H = 40, 40
nQuads = 8
offset = 0

p0 = PVector(-W/2, -H/2)
p1 = PVector(-W/2,  H/2)
p2 = PVector(W/2, H/2)
p3 = PVector(W/2, -H/2)


def setup():
    size(600, 600, P2D)
    noFill()
    smooth(8)

    global cp5, slider
    cp5 = ControlP5(this)
    slider = cp5.addSlider('Bend').setPosition(width/2-50, height-150).setSize(100,10).setHandleSize(40).setDecimalPrecision(1).setColorBackground(color(100)).setColorForeground(color(140)).setColorActive(color(240)).setRange(-H, H).setValue(offset).setSliderMode(Slider.FLEXIBLE)


def draw():
    background(255)

    global off1, off2
    if slider.getValue() >= 0:
        factor = -1
        off1 = slider.getValue()
        off2 = 0
    else:
        factor = 1
        off2 = abs(slider.getValue())
        off1 = 0

    pushMatrix()
    translate(width>>1, height>>1)


    angle = atan2(p3.y - p0.y - abs(slider.getValue()), p3.x - p0.x)
    H2 = -H/2 + W *tan(angle)/2

    for i in range(nQuads):

        pivotHeight = H2 if i%2 == 1 else H/2

        #Height translation
        if i > 0:
            translate(0 , pivotHeight)

        #Rotate once every 2 quads
        if i%2 == 1:
            rotate(angle*2*factor) 

        #Height translation
        if i > 0:
            translate(0 , pivotHeight)            

        #Flip all quads except 1st one
        if i > 0:
            scale(1, -1)        

        object()

    popMatrix()


def object():

    beginShape(QUADS)
    vertex(p0.x, p0.y - off1) 
    vertex(p1.x, p1.y) 
    vertex(p2.x, p2.y)
    vertex(p3.x, p3.y - off2)
    endShape()

这篇关于在处理中旋转，反转和平移PShape对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！