CODEWITHSUNDEEP
for-loopgeometry2dprocessingtrigonometry
J doh
J doh

Reputation: 115

How can I use a FOR loop to create circles in a circle (in Processing)

I need to create a loop which will space circles equally around a circle in Processing.

I know I can somehow implement a FOR loop.

I need to be able to increase or decrease the number of circles around this circle (with button presses) but keep them equally spaced.

I know the formula's I need to include in the FOR loop to get the X and Y axis. The formulas: 

being
   X = R*cos(angle-90)+Y0
   Y = R*sin(angle-90)+X0

I understand the three parameters of the FOR loop; when does it start, when does it finish, what changes when it runs.

What I can't see is how to implement the formulas into the FOR loop.

Many thanks

Here is the code I do have

void setup () {
  size (600, 600);
  background (255, 255, 255);
  smooth ();
  ellipse (width/2, height/2, 200, 200); // the guide circle. Not needed in final code.
}


void draw() {


  for (int i = 0; i < 20; i ++) {
    for (int j = 0; j < 20; j ++) {

      ellipse (i *20, j * 20, 20, 20);
    }
  }
}

Upvotes: 2

Views: 12669

Answers (2)

J doh
J doh

Reputation: 115

Thank you to everyone who helped.

I managed to do it (slightly differently to you @Jose Gonzalez

   int nbr_circles = 2;
void setup() {    
  size(600, 600);

  smooth();
  background(255);
} 

void draw() { 
  background(255);
  float cx = width/2.0;
  float cy = height/2.0;
  fill(0);
  //float x, y; //  
  for (int i = 0; i < nbr_circles; i++) 
  {
    float angle = i * TWO_PI / nbr_circles;
    float x = cx + 110.0 * cos(angle);                
    float y = cy + 110.0 * sin(angle);                
    ellipse(x, y, 20, 20);
  }
}

void mousePressed() {

  if (mouseButton == LEFT) {
    if (nbr_circles < 20)
    nbr_circles = nbr_circles + 1;

  } else if (mouseButton == RIGHT) {
    if (nbr_circles > 2) 
      nbr_circles = nbr_circles - 1;

  }
}

Upvotes: 0

Jose Gonzalez
Jose Gonzalez

Reputation: 1478

This code should do the trick:

    float incrementalAngle = 0.0;

void setup(){
  size(600, 600);
  smooth();
  background(0);

  ellipse(width/2, height/2, 200, 200);
  drawCircles(20, 200);
}

void draw(){

}

void drawCircles(int circlesNumber, int bigCircleNumber){
  float angle = incrementalAngle;

  for(int i = 0; i < circlesNumber; i++){
    ellipse(bigCircleNumber * cos(incrementalAngle) + height/2, 
            bigCircleNumber * sin(incrementalAngle) + width/2, 
            circlesNumber, circlesNumber);
    incrementalAngle += TWO_PI / circlesNumber;  
  } 
}

Here is the output

So the second loop wasn't needed, and the formula you were trying to introduce would go in the X and Y position of your ellipse, there by playing whit the angle and the cos and sin you can get the result you were looking for.

What's left now is for you to get the number of circles you want by the clicking inside a mousePressed() method and drawing that amount.

Hope this comes useful and call me if you need more help

Regards Jose.

Upvotes: 1

Related Questions