# Circular coordinates

**URL:** <https://discourse.processing.org/t/circular-coordinates/19344>\
**Category:** Coding Questions\
**Created:** [April 2, 2020, 4:44pm UTC](https://discourse.processing.org/t/circular-coordinates/19344 "2020-04-02T16:44:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lumicon9](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@lumicon9](https://discourse.processing.org/u/lumicon9)\
**Post date:** [April 2, 2020, 4:44pm UTC](https://discourse.processing.org/t/circular-coordinates/19344/1 "2020-04-02T16:44:26Z")

</div>

how to make this circular coordinates more evenly distributed? …will say; the inner ring less dot frequency becoming more to the outer. maybe fibionacci like…? thank you!

```auto
float px, py;
float angle;
float radius = width/2-100; //800/2-10
//int outFrequ=30, inFrequ=10;
int frequency=10;

void setup(){
  size(1000, 1000);
  background (127);
}

void draw(){
background (127);
//for(int frequ=outFrequ; frequ>inFrequ; frequ--){
for(int i=0; i<360; i+=frequency){
  for(int rad=0; rad<width-20; rad+=80){
  angle=i;
  px = width/2 + cos(radians(angle))*(rad);
  py = height/2 + sin(radians(angle))*(rad);
  ellipse (px, py, 5, 5);
 }
}
//}
noLoop();
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 2, 2020, 7:32pm UTC](https://discourse.processing.org/t/circular-coordinates/19344/2 "2020-04-02T19:32:59Z")

</div>

Hello,

Think of drawing:

- one ring at a time (outer loop).
- sweeping around and plotting points at equal increments (inner loop).

You can do this with a bit of trigonometry:  
[https://www.mathwarehouse.com/trigonometry/radians/s=r-theta-formula-equation.php](https://www.mathwarehouse.com/trigonometry/radians/s=r-theta-formula-equation.php)  
[https://processing.org/tutorials/trig/](https://processing.org/tutorials/trig/)

Using the references above:

- s, r and theta (θ) is in code below.
- point() is used to plot x and y.

The ? are left for you to complete:

```auto
  for(int r=0; r<width; r+=50)
    {
    for(int i=0; i<r; i+= 2)
      {
      float s = i*?;        
      float theta = ?;      
   
      stroke(255, 255, 0);
      strokeWeight(5);
      float x = ?;
      float y = ?;
      point(x+width/2, y+height/2); 
      
      println(r, theta, s);
      }

```

Works nicely:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/724803c44949b70034d9f4fa834cefd526a52afa.png)

`:)`

---

<div class="post-metadata">

**Author:** ![lumicon9](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@lumicon9](https://discourse.processing.org/u/lumicon9)\
**Post date:** [April 3, 2020, 4:41am UTC](https://discourse.processing.org/t/circular-coordinates/19344/3 "2020-04-03T04:41:08Z")

</div>

thank you! but it just draws 1 point in the middle…?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 3, 2020, 7:34am UTC](https://discourse.processing.org/t/circular-coordinates/19344/4 "2020-04-03T07:34:29Z")

</div>

I left the ? in the code for you to complete.

Can you show your progress?

---

<div class="post-metadata">

**Author:** ![lumicon9](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@lumicon9](https://discourse.processing.org/u/lumicon9)\
**Post date:** [April 3, 2020, 8:15am UTC](https://discourse.processing.org/t/circular-coordinates/19344/5 "2020-04-03T08:15:27Z")

</div>

thanks for getting back! …sorry, don’t understand this sort of polar coordinate system yet, since i started with cartesian system…  
if you could give me a sample, i could roll back to get it…

hold on

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 3, 2020, 9:14am UTC](https://discourse.processing.org/t/circular-coordinates/19344/6 "2020-04-03T09:14:34Z")

</div>

Hello,

It is plotted on the x, y plane as per your original code.

```auto
  int r = 200;
  for(int i=0; i<r; i+= 2)
    {
    float s = i*TAU; //TAU = TWO_PI;
    float theta = s/r;      
    stroke(255, 255, 0);
    strokeWeight(5);
    float x = r*cos(theta);
    float y = r*sin(theta);
    point(x+width/2, y+height/2);
    }

```

You can look up TAU in the references.

`:)`

---

<div class="post-metadata">

**Author:** ![lumicon9](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@lumicon9](https://discourse.processing.org/u/lumicon9)\
**Post date:** [April 3, 2020, 9:19am UTC](https://discourse.processing.org/t/circular-coordinates/19344/7 "2020-04-03T09:19:01Z")

</div>

perfect:) thank you so much!!!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 3, 2020, 9:54am UTC](https://discourse.processing.org/t/circular-coordinates/19344/8 "2020-04-03T09:54:46Z")

</div>

Once you wrap your head around it is is easier to understand and modify.  
This was a quick effort on my part and it could use some finesse.

Try TAU/2, TAU/4, TAU/8 etc.

I also used integer increments in loop for spacing and they plotted nicely in my example; this could also use some work as well as they don’t always line up.

`:)`