Hint: you have to use a combination of rotate() and translate(), to position the center and do the rotation.

If you want more concrete code, search the site (forum/wiki), or show what you have so far, so we can give you more concrete hints (or code!).

http://processing.org/learning/transform2d/

Thank you all for the answer!

Now, I think that I can make one "step forward" with my code...but I am still far away from the goal :)
I will post soon the new code. (I am beginner and I feel ashamed to post what I got so far...)

Hi,

I got this and I can not see an exit...

"cer" is a circle, "fre  and fre2" triangles.

1. PShape cer;
   PShape fre;
   PShape fre2;
   
   void setup() {
   size(600, 600);
   shapeMode(CENTER);
   smooth();
   cer = loadShape("cer.svg");
   fre = loadShape("f1.svg");
   fre2 = loadShape("f2.svg");
   }
   
   void draw() {
   background(255, 255, 255);
   shape(cer, 300, 300); //x,y
   shape(fre, 350, 450);
    
    pushMatrix();
     translate(100, 100);
       rotate(radians(90));
       shape(fre2, 70, 20); //fig
    popMatrix();
    
   }
   

1- I have the shapeMode(CENTER); why is the circle not in the middle of the document? and...

2- how the center of the circle can be the center for all the rotations?

3- I coudn´t find a good example for the "interactive part" / click--> shape rotates...

I am using Reas and Fry manual but I didn´t find any hint for my problem... . I have the feeling that my brain is not very orientated into coding...

thx!

Can we download the SVG file somewhere?

ok, you can try here... http://www.4shared.com/folder/O3MkFTww/_online.html

thx

As I guessed, your shapes are not drawn centered on 0, 0, but somewhere in the drawing zone of Illustrator. But Processing takes in account this offset. You can see it by adding reticules:

1. PShape cer;
2. PShape fre1;
3. PShape fre2;
4.  
5. void setup() {
6.   size(600, 600);
7. //  shapeMode(CENTER);
8.   smooth();
9.   cer = loadShape("cer.svg");
10.   fre1 = loadShape("f1.svg");
11.   fre2 = loadShape("f2.svg");
12. }
13.  
14. void draw() {
15.   background(255, 255, 255);
16. 
    
17.   shape(cer, 0, 0);
18.   drawCross(250, 201);
19.   shape(fre1, 0, 0);
20.   drawCross(193, 104);
21.   shape(fre2, 0, 0);
22.   drawCross(412, 147);
23.  
24.   drawCross(width / 2, height / 2);
25. }
26.  
27. void drawCross(int x, int y)
28. {
29.   stroke(#FF0000);
30.   line(x - 20, y, x + 20, y);
31.   line(x, y - 20, x, y + 20);
32. }

How I found out the values (where to draw the crosses)? By opening the SVG files with a text editor:
cre.svg:  cx="249.097" cy="201.779"
f1.svg: points="193.545,104.75 ...
f2.svg: points="412.58,147.364 ...

So you have to redraw the shapes on the 0, 0 coordinates, edit by hand the SVG files (a bit risky) or just compensate for these offsets with a preliminary negative translation.

1.   pushMatrix();
2.   translate(-250, -201);
3.   shape(cer, 300, 300);
4.   popMatrix();
5.  
6.   pushMatrix();
7.   translate(-193, -104);
8.   shape(fre1, 300, 360);
9.   popMatrix();
10.  
11.   pushMatrix();
12.   translate(240, 300);
13.   rotate(radians(90));
14.   translate(-412, -147);
15.   shape(fre2, 0, 0); // Better use 0, 0 when doing transforms
16.   popMatrix();
17.  
18.   drawCross(width / 2, height / 2);

Thank you phi.lho,
I will re-draw the SVG!

Back soon