rotate around center - PShape wrong, possible to correct?

Chrisir

Hello all!

I made a code with a rotating rect rotating around its center. Good.

Now I want a PShape to do the same. But it is not placed correctly on the origin.

But the PShape data are only positive values (and not neg and pos values placing it on the origin)

(this is part of a much bigger project with much more PShapes)

Now instead of re-calculating ALL PShapes so that they are on the origin:

• HOW can I magically tell the PShape to be on the origin please? Either by using some brilliant way of placing it on the origin using translate OR by recalc or vertex with a cool formula?

Thanks!

Best, Chrisir ;-)

PShape s; 

void setup() {

  size(700, 600);

  background(0);

  s = createShape();
  s.beginShape();
  s.fill(0, 0, 255);
  s.noStroke();


  s.vertex(352, 85);
  s.vertex(582, 218);
  s.vertex(582, 477);
  s.vertex(355, 606);
  s.vertex(126, 471);
  s.vertex(126, 211);
  s.vertex(351, 84);

  s. endShape();
}

void draw() {
  background(100);

  translate(width/2, height/2);

  rotate(radians(frameCount));



  rect(-20, -20, 40, 40); // this works  



  shape(s); // this doesn't 
}

Chrisir

like this:

PShape s; 

float avgX, avgY; 

void setup() {

  size(700, 600);

  background(0);

  s = createShape();
  s.beginShape();
  s.fill(0, 0, 255);
  s.noStroke();


  s.vertex(352, 85);
  s.vertex(582, 218);
  s.vertex(582, 477);

  s.vertex(355, 606);
  s.vertex(126, 471);
  s.vertex(126, 211);

  s.vertex(351, 84);

  avgX = 352+582+582
    +355+126+126
    +351;
  avgX = avgX / 7; 

  avgY= 85+ 218+ 477
    +606+471+211
    +84; 

  avgY= avgY/ 7;  

  s. endShape();
}

void draw() {
  background(100);

  translate(width/2, height/2);

  rotate(radians(frameCount));

  pushMatrix(); 
  translate(-avgX, -avgY-33);
  shape(s); // this doesn't
  popMatrix(); 

  rect(-20, -20, 40, 40); // this works
}

jeremydouglass

Have you looked at shapeMode() -- e.g. shapeMode(CENTER)?

• https://processing.org/reference/shapeMode_.html

Also, if you want to do custom offsets instead of using a centering mode, keep in mind that you can pass them to the shape function with shape(s, x, y) (the same as image).

• https://processing.org/reference/shape_.html

Lord_of_the_Galaxy

I guess it depends on what you mean by centre...
Assuming you mean what you just gave as example to be the method for calculating centre, you would need to "shift" the entire PShape by the negative of the calculated centre.

Lord_of_the_Galaxy

Translating the PShape may work. See PShape.translate().

Lord_of_the_Galaxy

To really understand how to do something like that will probably require a good understanding of how OpenGL and computer-graphics work.

Lord_of_the_Galaxy

So... It worked?

Chrisir

my 2nd post was the solution, using averageX and Y

jeremydouglass

@Chrisir --

This is close to centered, but I don't think you want the average of all the points to find the center. That will make the rotation wobble. I can see that you fixed the wobble by subtracting 33 -- but it shouldn't wobble in the first place.

I think you actually want -(min+max)/2.

Instead, here are two solutions -- modify your initial sketch:

---

Solution 1: Translate by half the width of and height of your points.

Add this line just before your vertex calls (line 14):

s.translate(-(126+582)/2,-(84+606)/2);

---

Solution 2: Center your shape, get rid of half the empty margin.

The bounding box of your vertex points starts at 126,84 -- not 0,0. If we fix this then we can center it automatically using shapeMode(CENTER). Add this line before your shape vertex calls (line 14):

s.translate(-126/2,-84/2);

...and add this anywhere in setup():

shapeMode(CENTER);

Chrisir

Very nice!

Thank you!

Lord_of_the_Galaxy

@Chrisir I don't think that using the translate() on the PApplet's graphics object (PGraphics g AFAIK) is a very wise idea. It will clobber up the draw() function with too many popMatrix()/pushMatrix() calls.

Chrisir

My 2nd post shows a working version albeit mathematically wrong as has been shown

But it doesn't carry too much clobber, does it?

Lord_of_the_Galaxy

I was thinking that you were going to be using many PShapes in your project.....

(this is part of a much bigger project with much more PShapes)

Imagine the great advantage you would have if you just used translate on the PShape.

Chrisir

I see. Faster.

In fact I first wrote a program "help" to record the points where I click the mouse and when I had all the vertices I used them in the program above.

Lord_of_the_Galaxy

I didn't quite understand what you meant by

I see. Faster.

I'm not a native English speaker, so sorry.

jeremydouglass

@Lord_of_the_Galaxy -- I think @Chrisir is saying "I understand. [The code would run] faster."

Lord_of_the_Galaxy

Ok, thanks @jeremydouglass.

Chrisir

Yeah.