how to rotate a child PShape around its own axis?

I create a group PShape which includes a number of child PShape. I want to rotate one of the child PShape around its own axis instead of the axis of the group PShape. However, when I use getChild() and then use childname.rotateZ(), it always rotate around the axis of the group PShape:

PShape JL2 = JL12.getChild(1);
JL2.rotateZ(0.01*PI);

Thank you very much!

Answers

  • Entire code or working example please?

  • First guess without seeing asserts or demo sketch: That is probably because your child is rotating around its 0 point -- but it has a defined offset in x and y. So you need to JL2.translate() before you rotate.

    To understand why rotate operates from 0,0 read:

    https://processing.org/tutorials/transform2d/

  • edited April 2018

    Thank you for your answer. However, if I do JL2.translate(), it will shift to the origin and then rotate, but I need it to rotate on its current position. Is there a way to solve this? Here is the function drawJL12() and JL2 is a child of it: PShape drawJL12(PShape JL12){ JL12 = createShape(GROUP); JL1 = drawJL1(JL1); JL2 = drawJL2(JL2); JL2.translate(0, -0.25*height, 0); JL12.addChild(JL1); JL12.addChild(JL2); return JL12; }

  • What I am thinking is a way to define the axis of rotation.

  • if I do JL2.translate(), it will shift to the origin and then rotate, but I need it to rotate on its current position.

    Well, you can translate (-x,-y), rotate (r), and translate back (x,y), draw.

    If you don't want to center every time, you could also save the child shapes already centered on their axes of rotation -- write them into layers or into a new pshape, or modify the source graphic. Then you only have to rotate (r) and place (x,y).

  • edited April 2018

    Here is a simple example of the principle of defining the axis of rotation with a basic image (not a PShape child shape). The image is 512x512, it is being rotated by its center and drawn from 0,0.

    PImage img;
    void setup() {
      size(512, 512);
      img = loadImage("https:" + "//processing.org/img/processing3-logo.png");
    }
    void draw() {
      translate(img.width/2, img.height/2);
      rotate(TWO_PI * (millis()%6000/6000.0));
      translate(-img.width/2, -img.height/2);
      image(img, 0, 0);
    }
    

    Notice that how to define the axis of rotation is discussed in the 2D tutorial I linked earlier.

Sign In or Register to comment.