# Spin rectangles in place

I have created a spiral of rectangles. Now, I want those rectangles to spin in their respective places. How do I go about it? I have attached the code here:
< // import the library
import com.hamoid.*;

// create a new VideoExport-object
VideoExport videoExport;

int nbr_circles = 100;
int r = 0;
int fspeed = 1;

void setup() {
size(1024,1024);
smooth();
background(255);
rectMode(CENTER);
videoExport = new VideoExport(this);
videoExport.setFrameRate(1);
videoExport.startMovie();

}

void draw() {

fill(0);

float cx = width/2;
float cy = height/2;

float sm_diameter = 20;
for (int i = 1; i <= 1000; i = i+10) {
float ratio = i/float(500);
float angle = i
angle_incr;
float x = cx + cos(angle) * spiral_rad - Math.floorDiv(i,100);
float y = cy + sin(angle) * spiral_rad - Math.floorDiv(i,100);

``````rect(x, y, sm_diameter, sm_diameter);
``````

}
videoExport.saveFrame()
}

void keyPressed() {
if (key == ‘q’) {
videoExport.endMovie();
exit();
}
} >

Welcome @seldomcoder

Have you checked the Transform section of the Processing reference? In particular, the `pushMatrix()`, `popMatrix()`, and `rotate()` functions.

2 Likes

Hey @tabreturn - thank you…
Yes, I have tried that inside the for loops and also outside them but they are going out of the frame and forming a vinyl disc feel (which in itself is cool though)…but I want them spinning in place…can you please let me know where to add those?

Before drawing each rectangle,

1. Use pushMatrix() to store the current coordianate system.
2. Use translate(centerx,centery) to put (0,0) in the center of the rectangle.
3. Use rotate(angle) to rotate the coordinate system.
4. Draw a rectangle with center (0,0).

See a complete example here: Rotate \ Examples \ Processing.org

2 Likes

Hello,

FAQ - Processing Foundation

There are resources (tutorials, references and examples) here:
https://processing.org/

Another example to look at:
Arm \ Examples \ Processing.org

``````  //Places rectangle at (x,y)
stroke(255, 0, 0);
rect(x, y, sm_diameter, sm_diameter);

//Translates rectangle at (0,0) to (x,y)
//Rotates rectangle; uncomment different combinations to see what this does
push();
//rotate(angle);
translate(x, y);
translate(10,10); //Shift it over to see the red rectangle!
//rotate(angle);
stroke(0, 255, 0);
rect(0, 0, sm_diameter, sm_diameter);
pop();
}
``````

I commented the rotate()'s in the above code.
Uncomment them (try different combinations) to see what happens.

Explore the tutorials, references and examples to understand transformations.

For starters:
2D Transformations \ Processing.org

`:)`

1 Like

Hello @seldomcoder

Here is a really good tutorial by Abe Pazos illustrating several of the points by the previous commenters in this thread:

Also, check his YouTube playlist for additional tutorials on rotation. Lots of useful information there…
Good luck! 3 Likes