Random starting Angle to finish Circle

[aldofermaldo]

I want to be drawing a circle with beginShape(), starting with a random angle, and to finish a complete circle from that random angle. The problem I’m having is that when I draw from a random starting angle, I don’t know how to set the condition for the code to stop drawing when it finishes the complete circle.

Less than or greater than doesn’t work for me because the angle could start close to TWO_PI and continue past the value, never meeting conditions to exit the for loop.

the end goal here, is to draw from different angles to avoid the pen down bleed marks on a plotter all in a line at a = 0;

void draw() {

beginShape();
translate(width/2,height/2);
noFill();

for (float a = random(0,TWO_PI); a < TWO_PI; a += 0.02) {
   float r = 100;
   float x = r * cos(a);
   float y = r * sin(a);

   vertex(x,y);
  }
endShape();
}

[quark]

Since the functions sin and cos are cyclic (repeat themselves every 2PI) simply change the loop end condition

@aldofermaldo

for (float a = random(0,TWO_PI); a < TWO_PI + a; a += 0.02) {
   float r = 100;
   float x = r * cos(a);
   float y = r * sin(a);

   vertex(x,y);
  }

[aldofermaldo]

It seems when the condition is set to “a < TWO_PI + a” the condition is never met.

println(a); returns values increasing infinitely.

[javagar]

The condition a < TWO_PI + a will of course always evaluate to true.

Why not first choose a random starting angle, like this?:

  float start_angle = random(0, TWO_PI);

With that, you can write the program as follows:

void setup() {
  size(400, 400);
}
void draw() {
  translate(width/2, height/2);
  noFill();
  beginShape();
  float r = 100;
  float start_angle = random(0, TWO_PI);
  for (float a = 0; a < TWO_PI; a += 0.02) {
     float x = r * cos(a + start_angle);
     float y = r * sin(a + start_angle);
     vertex(x, y);
    }
  endShape();
}

[quark]

Slight change

for (float a = start_angle; a < TWO_PI + start_angle; a += 0.02) {

[javagar]

@quark’s code would also work. With that loop header, the assignments to x and y would be as follows, as they were originally:

   float x = r * cos(a);
   float y = r * sin(a);

You can close the shapes drawn in each each frame to make them polygons by doing this, though it won’t make much difference regarding the visual outcome, since the final side of the resulting polygons will nearly always be shorter than the other line segments:

  endShape(CLOSE);

Since you are approximating the outline of the circle by drawing chords, you can make the drawn outline really thin by reducing the increment that is applied to a in the loop header. But just for fun, we could make it larger instead, and stop the drawing after a few frames.

  float increment = 2.7;
  float start_angle = random(0, TWO_PI);
  for (float a = 0; a < TWO_PI; a += increment) {
     float x = r * cos(a + start_angle);
     float y = r * sin(a + start_angle);
     vertex(x, y);
    }
  endShape(CLOSE);
  if (frameCount == 7) {
    noLoop();
  }

Of course, this does run counter to the intent of the original sketch.

[aldofermaldo]

Thank you all who responded. Not sure why I didnt think of initializing the random angle first with a variable. and @javagar that is interesting, thank you for the idea.

[javagar]

Something worthy of note is that the code posted here produces some visible artifacts related to the fact that the sketch is composed of pixels of finite size arranged in a grid. Below is a capture of the graphical output.

The outline of the circle varies in thickness due to the varying orientations of the drawn chords relative to the grid of pixels. Do these artifacts appear when your plotter is used to draw the image? If so, you can experiment with various parameters, such as the size of the increment in the loop header. For example, we can use a smaller increment, as follows:

  for (float a = 0; a < TWO_PI; a += 0.0001) {

The result is a thinner, more even outline, as below:

There are still visible artifacts, but they are less pronounced.

To get a thicker outline, you could use a larger increment such as in the following:

  for (float a = 0; a < TWO_PI; a += 1.0) {

Here is the result:

With the thicker outline, some aspects of the artifacts are less obvious.

[aldofermaldo]

I do get some artifacts in the sketch window, but when exporting the sketch to a PDF, the artifacts are not there as the lines are scalable vectors. I am actually using this in the context of 2d perlin noise, as to get a random loop back to itself. The random angle as a variable has definitely solved the problem though. Every time the pen starts at a random angle and the ink bleed on the paper is now to a minimal level.

I’ve attached the bottom image of an example when the start angle was always 0, and a picture of the PDF exported out of processing.

• I might have scaled down the pdf a bit much as im seeing some moire effects on screen, but you get the idea.

[javagar]

Wow, amazing stuff!

[aldofermaldo]

Thank you so much! Still learning, but its a lot of fun.