Spin rectangles in place

Processing Coding Questions
1

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;
float angle_incr = radians(2);
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 outer_rad = width*.45;

float sm_diameter = 20;
for (int i = 1; i <= 1000; i = i+10) {
float ratio = i/float(500);
float spiral_rad = ratio * outer_rad0.5;
float angle = iangle_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();
}
} >

2

Welcome @seldomcoder

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

2 Likes
3

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?

4

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).
  5. Use popMatrix() to return to the original coordinate system.

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

2 Likes
5

Hello,

Please format your code:
FAQ - Processing Foundation

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

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

Try this in your code:

  //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
6

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!

:nerd_face:

3 Likes