Trouble understanding for loops!

Processing Beginners
1

I am making this “illusion” and instead of coding it how I currently have it I need to use for loops and I’m not sure how to implement it for this code. I’m new so I would really appreciate the help. I would also like to add more rotating lines instead of the four spaced HALF_PI in angle apart.
This is what I have so far:

float angle1 = 0;
float angle2 = HALF_PI;
float angle3 = PI;
float angle4 = PI+HALF_PI;

final int BLACK = 0;
final int RED = #F70A0A;

final float SPEED = 0.02;
final float ORB_SMALL = 10;
final float ORBIT_RAD = 50;
final float ORB_LARGE = 100;
final float ORB_HUGE = 150;
final float ORB_MASS = 200;
final float ORB_FIN = 250;

void setup(){
  size(500, 500);
}

void draw(){
  background(127);
  //Draws inner rotating lines
  stroke(RED);
  line(width/2+ORB_SMALL*sin(angle1), height/2+ORB_SMALL*cos(angle1),
      width/2+ORBIT_RAD*sin(angle1), height/2+ORBIT_RAD*cos(angle1));
  stroke(BLACK);
  line(width/2+ORB_SMALL*sin(angle2), height/2+ORB_SMALL*cos(angle2),
      width/2+ORBIT_RAD*sin(angle2), height/2+ORBIT_RAD*cos(angle2));
  line(width/2+ORB_SMALL*sin(angle3), height/2+ORB_SMALL*cos(angle3),
      width/2+ORBIT_RAD*sin(angle3), height/2+ORBIT_RAD*cos(angle3));
  line(width/2+ORB_SMALL*sin(angle4), height/2+ORB_SMALL*cos(angle4),
      width/2+ORBIT_RAD*sin(angle4), height/2+ORBIT_RAD*cos(angle4));
      
  //Draws Innermost-middle rotating lines
  stroke(RED);
  line(width/2+ORBIT_RAD*sin(-angle1), height/2+ORBIT_RAD*cos(-angle1),
      width/2+ORB_LARGE*sin(-angle1), height/2+ORB_LARGE*cos(-angle1));
  stroke(BLACK);
  line(width/2+ORBIT_RAD*sin(-angle2), height/2+ORBIT_RAD*cos(-angle2),
      width/2+ORB_LARGE*sin(-angle2), height/2+ORB_LARGE*cos(-angle2));
  line(width/2+ORBIT_RAD*sin(-angle3), height/2+ORBIT_RAD*cos(-angle3),
      width/2+ORB_LARGE*sin(-angle3), height/2+ORB_LARGE*cos(-angle3));
  line(width/2+ORBIT_RAD*sin(-angle4), height/2+ORBIT_RAD*cos(-angle4),
      width/2+ORB_LARGE*sin(-angle4), height/2+ORB_LARGE*cos(-angle4));
  
  //Draws inner middle rotating lines
  stroke(RED);
  line(width/2+ORB_LARGE*sin(angle1), height/2+ORB_LARGE*cos(angle1),
      width/2+ORB_HUGE*sin(angle1), height/2+ORB_HUGE*cos(angle1));
  stroke(BLACK);
  line(width/2+ORB_LARGE*sin(angle2), height/2+ORB_LARGE*cos(angle2),
      width/2+ORB_HUGE*sin(angle2), height/2+ORB_HUGE*cos(angle2));
  line(width/2+ORB_LARGE*sin(angle3), height/2+ORB_LARGE*cos(angle3),
      width/2+ORB_HUGE*sin(angle3), height/2+ORB_HUGE*cos(angle3));
  line(width/2+ORB_LARGE*sin(angle4), height/2+ORB_LARGE*cos(angle4),
      width/2+ORB_HUGE*sin(angle4), height/2+ORB_HUGE*cos(angle4));
      
  //Draws outermost middle rotating lines
  stroke(RED);
  line(width/2+ORB_HUGE*sin(-angle1), height/2+ORB_HUGE*cos(-angle1),
      width/2+ORB_MASS*sin(-angle1), height/2+ORB_MASS*cos(-angle1));
  stroke(BLACK);
  line(width/2+ORB_HUGE*sin(-angle2), height/2+ORB_HUGE*cos(-angle2),
      width/2+ORB_MASS*sin(-angle2), height/2+ORB_MASS*cos(-angle2));
  line(width/2+ORB_HUGE*sin(-angle3), height/2+ORB_HUGE*cos(-angle3),
      width/2+ORB_MASS*sin(-angle3), height/2+ORB_MASS*cos(-angle3));
  line(width/2+ORB_HUGE*sin(-angle4), height/2+ORB_HUGE*cos(-angle4),
      width/2+ORB_MASS*sin(-angle4), height/2+ORB_MASS*cos(-angle4));
     
  
  //Draws outer rotating lines
  stroke(RED);
  line(width/2+ORB_MASS*sin(angle1), height/2+ORB_MASS*cos(angle1),
      width/2+ORB_FIN*sin(angle1), height/2+ORB_FIN*cos(angle1));
  stroke(BLACK);
  line(width/2+ORB_MASS*sin(angle2), height/2+ORB_MASS*cos(angle2),
      width/2+ORB_FIN*sin(angle2), height/2+ORB_FIN*cos(angle2));
  line(width/2+ORB_MASS*sin(angle3), height/2+ORB_MASS*cos(angle3),
      width/2+ORB_FIN*sin(angle3), height/2+ORB_FIN*cos(angle3));
  line(width/2+ORB_MASS*sin(angle4), height/2+ORB_MASS*cos(angle4),
      width/2+ORB_FIN*sin(angle4), height/2+ORB_FIN*cos(angle4));
  
  //Change the angle each time
  angle1+=SPEED;
  angle2+=SPEED;
  angle3+=SPEED;
  angle4+=SPEED;
  
  //Draw circles with no fill
  for(int circle = 0; circle <=500; circle += 100){
    noFill();
    ellipse(width/2, height/2, circle, circle);
  }
  ellipse(width/2, height/2, 20, 20);
}
1 Like
2

Hello,

To get you started:

float angle = 0; 

void setup()
  {
  size(500, 500);
  }

void draw()
  {
  background(127);
  translate(width/2, height/2);
  
  //Draw circles with no fill
  for (int circle = 0; circle <=500; circle += 100)
    {
    noFill();
    ellipse(0, 0, circle, circle);
    }

  ellipse(width/2, height/2, 20, 20);   
   
// Added
  pushMatrix();
  rotate(angle);
  for (int i= 0; i<= 100; i+=25)
    {
    noFill();
   pushMatrix();    
    rotate(i*TAU/100);
    line(50, 0, 100, 0);
   popMatrix();  
  }  
  popMatrix();
  
  angle+= TAU/300; //Added
  }

https://processing.org/tutorials/transform2d/
https://processing.org/tutorials/trig/
https://processing.org/reference/TAU.html
https://processing.org/reference/rotate_.html

:slight_smile:

3 Likes
3

Also check out examples that come with Processing:

image
image.png321×640 11 KB

:slight_smile:

1 Like
4

Thank you. I have not learnt anything about push matrices or what TAU is. Also, what does the translating the width/2 and height/2 mean? Does that mean it sets width/2 and height/2 as the new origin point of sorts? Thank you though, this is all very helpful!

1 Like
5

Hello,

You can replace the push\pop and rotate with what you have done in your code already! It will require some modification to work with the for loop and increment angle2 with each loop

And then add angle (see my example) to angle2 (your code) and rotate the whole thing!

float angle = 0; 

void setup()
  {
  size(500, 500);
  }

void draw()
  {
  background(127);
  translate(width/2, height/2);
   
  //pushMatrix();
  //rotate(angle);
  for (int i= 0; i<= 4; i++)
    {
    noFill();
   //pushMatrix();    
    //rotate(i*TAU/4);
    // Modify and add your code here!
   //popMatrix();  
  }  
  //popMatrix();
  
  angle+= TAU/300; //Added
  }

You can look up all the references; if you highlight a keyword like TAU and right click and select “find in references” references that works too!

I prefer to use TAU as it represents 2*PI a full rotation; use what you are comfortable with here.

I feel that I have assisted too much already!
Please try to understand what this is doing and work through this.

:slight_smile:

2 Likes
6

Thank you so much. This was all very very helpful!

1 Like