# Setting 1st instance location for evenly spaced rotated objects

**URL:** <https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479>\
**Category:** Coding Questions\
**Created:** [December 17, 2019, 8:15pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479 "2019-12-17T20:15:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 17, 2019, 8:15pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/1 "2019-12-17T20:15:45Z")

</div>

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?**

```auto
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?

```auto
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.  
🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2019, 8:40pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/2 "2019-12-17T20:40:56Z")

</div>

> [@debxyz](#):
>
> rotate (radians(90));

That’s the angle and your answer.

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

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 17, 2019, 9:06pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/3 "2019-12-17T21:06:21Z")

</div>

Do you mean the **“90” i** n expression: `while (c < 360/90)`?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2019, 9:08pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/4 "2019-12-17T21:08:33Z")

</div>

Yes

Just test it, play with the code

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 17, 2019, 9:18pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/5 "2019-12-17T21:18:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2019, 9:24pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/6 "2019-12-17T21:24:38Z")

</div>

> [@Chrisir](#):
>
> rotate (radians(90));

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2019, 9:41pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/7 "2019-12-17T21:41:59Z")

</div>

> [@debxyz](#):
>
> 1 at top, 1 bottom, 1 left side, 1 right side

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)

```auto

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();
}

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 17, 2019, 9:54pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/8 "2019-12-17T21:54:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2019, 10:01pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/9 "2019-12-17T22:01:58Z")

</div>

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);`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2019, 10:05pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/10 "2019-12-17T22:05:05Z")

</div>

> [@Chrisir](#):
>
> float angleStep = 90;

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:

```auto

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();
}

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 17, 2019, 10:10pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/11 "2019-12-17T22:10:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 17, 2019, 11:08pm UTC](https://discourse.processing.org/t/setting-1st-instance-location-for-evenly-spaced-rotated-objects/16479/12 "2019-12-17T23:08:12Z")

</div>

and with pushMatrix/popMatrix

```auto
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();
}
//

```