how to rotate a child PShape around its own axis?

dsy199610

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!

Chrisir

Entire code or working example please?

jeremydouglass

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/

dsy199610

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; }

dsy199610

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

jeremydouglass

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

jeremydouglass

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.

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