# Translating twice, Once to rotate around center, Again for placement on page
**URL:** https://discourse.processing.org/t/translating-twice-once-to-rotate-around-center-again-for-placement-on-page/23881
**Category:** Coding Questions
**Created:** [September 15, 2020, 11:35pm UTC](https://discourse.processing.org/t/translating-twice-once-to-rotate-around-center-again-for-placement-on-page/23881 "2020-09-15T23:35:47Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@tobie](https://discourse.processing.org/u/tobie)
#### Post date: [September 15, 2020, 11:35pm UTC](https://discourse.processing.org/t/translating-twice-once-to-rotate-around-center-again-for-placement-on-page/23881/1 "2020-09-15T23:35:47Z")
```auto
void setup() {
background(240, 237, 235);
size(500, 500);
}
void draw(){
background(240, 237, 235);
noStroke();
int gap = 20;
float mult = 2;
for(int i = -width; i <= width; i+=(gap*mult)){
pushMatrix();
translate(i,0);
for(int x = 0; x <= width ; x+=gap){
rec(x);
}
popMatrix();
}
}
void rec(int x){
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
// Rotation not working.
// Each rect should maintain x,y postion,
// but be randomly rotated around it's own center.
// Uncomment to see broken rotation.
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
//rectMode(CENTER);
//translate(width/2,height/2);
//rotate(PI/random(1,180));
fill(12, 12, 12);
rect(x,x,5,5);
}
```
Any tips would be appreciated, thanks!
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 16, 2020, 1:40am UTC](https://discourse.processing.org/t/translating-twice-once-to-rotate-around-center-again-for-placement-on-page/23881/2 "2020-09-16T01:40:18Z")
you have to consider the origin of your rectangle.
rectMode(CENTER);
pushMatrix();
rotate(random(0,TWO\_PI);
translate(100,0);
rect(0,0,50,50);
popMatrix();
will rotate the rect randomly and then move it into a random direction.
all rectangles will orient themselves along a circle with the standard origin (upper left corner) as center.
rectMode(CENTER);
pushMatrix();
translate(width/2,height/2);
rotate(random(0,TWO\_PI);
rect(0,0,50,50);
popMatrix();
will put it in the middle of the screen and rotate it around its center.
your problem is, that you are mixing absolute coordinates with translations. for me that makes it always difficult to track whatโs really happening with my coords.
```auto
void setup() {
background(240, 237, 235);
size(500, 500);
rectMode(CENTER);
fill(0);
}
void draw(){
background(240, 237, 235);
noStroke();
int gap = 20;
float mult = 2;
for(int i = -width; i <= width; i+=(gap*mult)){
pushMatrix();
translate(i,0);
for(int x = 0; x <= width ; x+=gap){
pushMatrix();
translate(x,x); // translate to each cubes position
rotate(random(TWO_PI)); // rotate it there
rect(0,0,10,10);
popMatrix(); //"rewind" only the last two transformations for the next cube
}
popMatrix();
}
noLoop();
}
```
-\> rectMode(CENTER), or else you rotate around the corner of the rectangle
-\> a second pushMatrix() nested in the first one, since you use that loop to distribute your rectangles on the screen. so you would add many translates/rotates one after another otherwise.
-\> noLoop() because you update those angles in draw. eventually you will use a class or make a list of random angles in setup that do not change each frame
if I use transformations, I am always happiest when I can write a (0,0) as x,y when I place my object. it allows me to use that spot for offset values, like when a ship drives by and pushes your cubes off their positions ๐
---
### Author:  [@tobie](https://discourse.processing.org/u/tobie)
#### Post date: [September 17, 2020, 6:49pm UTC](https://discourse.processing.org/t/translating-twice-once-to-rotate-around-center-again-for-placement-on-page/23881/3 "2020-09-17T18:49:23Z")
> [@Hyperion65](#):
>
> I use transformations, I am always happiest when I can write a (0,0) as x,y when I place my object. it allows me to use that spot
Thank you so much for this helpful explanation! I learned a lot with your comments ๐