rotation - Rotate individual shape -

i'm working on replicating piece of art in processing. i'm having issue rotate functionality.

so image can found here. below can see code processing. can see differing part rotating of ellipses.

i've tried changing origin e.g:

translate(midpoint - (position*tenth + layer*tenth/2.0), i*tenth + layer*tenth/2.0,) 

then rotating , creating shape @ (0,0), doesn't i'd to!

any ideas appreciated

this changes origin x, y position want ellipse drawn at.

void setup(){   size(550,550);   background(187,182,179);    midpoint = height/2.0;   tenth = height/10.0;   circle_radius = 20.0; }  float circle_radius = 15.0; float midpoint; float tenth; float base_colour = 0;  float getcolour(float x_value){   float colour_val = ((x_value - 50.0)*255.0)/(450.0-50.0);    if(floor(colour_val/255.0)%2 == 0){     return colour_val%255.0;   }   return 225.0 - (colour_val%255.0); }  void draw(){   nostroke();   background(187,182,179);   base_colour += 5.0;   for(int layer = 0; layer < 2; layer++){     for(int = 1; < 12; i++){       (int position = 0; position < 5 - layer; position+=1){          if(i*tenth > tenth && i*tenth + layer*tenth/2.0 < height - tenth){             fill(getcolour(base_colour + midpoint - position*tenth - layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));            //rotate(pi/12.0);            ellipse(midpoint - (position*tenth + layer*tenth/2.0), i*tenth + layer*tenth/2.0,  2.0*circle_radius/3.0, circle_radius);             fill(getcolour(base_colour + midpoint + position*tenth + layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));           // rotate(pi/);            ellipse(midpoint + position*tenth + layer*tenth/2.0, i*tenth + layer*tenth/2.0, 2.0*circle_radius/3.0, circle_radius);          }         }     }  } } 

the main issue appears rotate command applied before translate, or positioning of ellipse.

a way avoid order of transformations issue use translate(), rotate() , draw shape @ (0, 0).

the second issue rotate of first ellipse applied second ellipse's rotate - , need keep them discrete operations. can use pushmatrix() , popmatrix() achieve this, because every transformation method in between these 2 methods kept separate other transformations on draw() call.

here code (first line , previous lines in supplied code unchanged).

if(i*tenth > tenth && i*tenth + layer*tenth/2.0 < height - tenth){                   pushmatrix(); // push , pop matrix keep transformations between them separate other transformations happening in draw method          fill(getcolour(base_colour + midpoint - position*tenth - layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));                     // removing coordinate calculations ellipse command translate command (and putting 0, 0, in place in ellipse method          translate(midpoint - (position*tenth + layer*tenth/2.0), i*tenth + layer*tenth/2.0);          rotate(pi/12.0);           // rotating applied after translate, don't order of transformation problem.          ellipse(0, 0,  2.0*circle_radius/3.0, circle_radius);        popmatrix();         pushmatrix();           fill(getcolour(base_colour + midpoint + position*tenth + layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));          translate(midpoint + position*tenth + layer*tenth/2.0, i*tenth + layer*tenth/2.0);          rotate(pi/-12.0);          // no divisor supplied in original code guessed opposite number make ellipses rotate opposite way          ellipse(0, 0, 2.0*circle_radius/3.0, circle_radius);        popmatrix();      }