Setting 1st instance location for evenly spaced rotated objects

Processing Coding Questions
1

I am rotating small evenly spaced circles around the circumference of a larger circle.

Using the while loop I have a version with 4 small circles and a version with 6 small circles.

The 4 small circles version places the circles at: 45°, 135°, 225° and 315°.
How do I adjust the code (below) so that the 4 circles appear at: 0, 90, 180 and 270?

void setup() {
  size(400, 400);
  background(255);
}

void draw() {

  fill(255);
  ellipse (width/2, height/2, 50, 50);

  translate (width/2, height/2);
  fill(0);
  float c = 0;

  //4 small cirlces evenly spaced around 
  //circumference of larger circle at 
  //90 degree intervals 
  
  while (c < 360/90) {
    rotate (radians(90));
    ellipse (20, 20, 20, 20);

    c = c +1;
  }
}

Also showing the 6 circle version as another example of how do I adjust so that circles appear at: 0, 60, 120, etc?

void setup() {
  size(400, 400);
  background(255);
}

void draw() {

  fill(255);
  ellipse (width/2, height/2, 50, 50);

  translate (width/2, height/2);
  fill(0);
  float c = 0;

  
  //6 small cirlces evenly spaced around 
  //circumference of larger circle at 
  //60 degree intervals 
  
  while (c < 360/60) {
    rotate (radians(60));
    ellipse (20, 20, 20, 20);

    c = c +1;
  }
}

It’s probably something very simple but I’ve not yet been able to find any documentation to address this.
Thank you to anyone who can help.
:slight_smile:

1 Like
2

That’s the angle and your answer.

In the for loop itself you also have to change the number 90 to the same amount

3

Do you mean the “90” in expression: while (c < 360/90)?

1 Like
4

Yes

Just test it, play with the code

5

I have been trying different numbers.
But isn’t: while (c < 360/90) just the counter?
I want the position of the 4 circles to move 45 degrees to the right along the circumference path so that the circles appear 1 at top, 1 bottom, 1 left side, 1 right side

6

Excuse me. This is the primary line.

Did you change this too?

Here the rotation takes place. Those add up.

In the for loop it’s determined how often we do this

7

I looked into this and I understand the confusion:

  • first off, 0 degrees is on the right side of the big circle (clock: 3 o’clock), not at the top as we would expect

  • 2nd, we rotate 90 degrees before drawing the first small circle. So first small circle is even at 6 o’clock now.

  • 3rd: problem is that the ellipse is drawn at (relative) position 20,20: ellipse (20, 20, 20, 20);. This means, it’s off in X and Y direction, which is even more confusing (made it look like an additional rotation by 45 degrees I guess).

Here is a sketch that solves this by printing **c** at the sides (so we know which ellipse is drawn first. It’s a neat trick to find out what is going on to use text() sometimes) and a few other things (what I just mentioned):

  • put 0 degree at 12 o’clock (instead of 3) by rotation -90 degree (rotate left) before the while-loop

  • inside the while loop we first draw the ellipse and then rotate after that (at the end of the while loop), so the first (0th) small circle is really at the top.

  • we say ellipse (20, 0, 20, 20); so x-position = 20 (gives you the radius), relative y-position = 0. This means we move 20 towards x every time (which does not add up), because of rotate this is first time: north (12 o’clock), then east (3 o’clock) then south (6) and then west (9)


void setup() {
  size(400, 400);
  background(255);
}

void draw() {

  fill(255);
  ellipse (width/2, height/2, 50, 50);

  translate (width/2, height/2);
  fill(0);
  float c = 0;

  //4 small cirlces evenly spaced around 
  //circumference of larger circle at 
  //90 degree intervals 

  rotate (-radians(90));   // !!!!!!!!!!!!!!!  put 0 degree at 12 o'clock (instead of 3)

  float angleStep = 90;  

  while (c < 360/angleStep) {

    ellipse (20, 0, 20, 20);     // draw BEFORE rotate; relative y-position = 0 
    text(c, 30, 20);
     
    rotate (radians(angleStep));

    c = c + 1;
  }
  noLoop();
}
5 Likes
8

Yes!! That’s it!
And I then tried it on the 6 circle version and works too.
Thank you!!!
:joy:

1 Like
9

By the way, since the big circle ellipse (width/2, height/2, 50, 50);

has a radius of 25

we should place the small circles also with a radius of 25:

ellipse (25, 0, 20, 20);

1 Like
10

please note that I made a new variable angleStep which I use in 2 places, because then the rotation degree matches the number in the while loop

Apart from that: Check out a new version:


void setup() {
  size(400, 400);
  background(255);
}

void draw() {

  fill(255);

  float mainRadius=150; 

  ellipse (width/2, height/2, 
    mainRadius, mainRadius);

  translate (width/2, height/2);
  fill(0);
  float c = 0;

  //4 small cirlces evenly spaced around 
  //circumference of larger circle at 
  //90 degree intervals 

  rotate (-radians(90));

  float angleStep = 90;  

  float upperBorder = 360/angleStep;  

  println (upperBorder); 

  while (c < upperBorder) {

    ellipse (mainRadius/2.0, 0, 
      20, 20);
    textAlign(CENTER, CENTER);
    text(nf(c, 1, 0), 
      48, 0);
    rotate (radians(angleStep));

    c = c + 1;
  }
  noLoop();
}
2 Likes
11

Yes, I saw regarding the new variable angleStep. Thank you again!
This was tremendously helpful!!!

1 Like
12

and with pushMatrix/popMatrix

final float mainRadius=150;
color colEllipse = 0;
final float angleStep = 90;
final float upperBorder = 360/angleStep;

void setup() {
  size(400, 400);
  background(255);
  textAlign(CENTER, CENTER);
}

void draw() {
  fill(255);
  translate (width/2, height/2);
  ellipse (0, 0, 
    mainRadius, mainRadius);

  fill(0);
  float c = 0;

  //4 small cirlces evenly spaced around 
  //circumference of larger circle at 
  //90 degree intervals 

  rotate (-radians(90));
  println (upperBorder); 

  while (c < upperBorder) {

    pushMatrix(); 
    rotate ( c * radians(angleStep));
    translate(mainRadius/2.0, 0);
    fill(colEllipse, 0, 0);

    ellipse (0, 0, 
      20, 20);
    text(nf(c, 1, 0), 
      48, 0);
    popMatrix(); 

    c = c + 1;
    colEllipse += 250.0/upperBorder;
  }//while 
  noLoop();
}
//
2 Likes