Circular coordinates

Processing Coding Questions
1

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!

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

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://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:

  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
image502×527 6.12 KB

:)

3

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

4

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

Can you show your progress?

5

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

6

Hello,

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

  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.

:)

7

perfect:) thank you so much!!!

8

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.

:)