在Processing中旋转、翻转和平移PShape对象

5

我想要:

  • 翻译倒置旋转一个四边形(PShape对象)多次
  • 然后改变它的2个顶点之一的高度

这样整个物体就可以像关节手臂一样向左或向右弯曲

为了尽可能清晰,我制作了一些图形。

enter image description here


enter image description here


enter image description here


enter image description here


enter image description here

我知道我可以:

  • 使用translate()函数来平移四边形
  • 使用scale(1, -1)函数来翻转(反转)它
  • 使用atan2()函数来旋转

enter image description here

问题

当将这三个组合在一起时,我最终得到了这个:

https://media.giphy.com/media/lkACPOxBLOhtk20gzD/giphy.gif

旋转角度似乎正确,但显然在平移方面存在问题(可能是在X或Y轴上),我无法确定具体是什么。

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

如果有人能帮助我理解我做错了什么以及如何解决这个问题,我将不胜感激。

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();
}
1个回答

4

终于找到了一个解决方法

修复:

  • QUADS的顶点顺序不正确
  • 枢轴高度的计算缺失(基于@Rabbid76的帮助)
  • 在旋转之前之后,需要根据该高度进行平移(不确定原因)
  • 旋转角度必须乘以-1(负角度),以改变弯曲方向

enter image description here

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()

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接