# Random starting Angle to finish Circle

**URL:** https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694
**Category:** Coding Questions
**Created:** [April 28, 2021, 6:13am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694 "2021-04-28T06:13:35Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![aldofermaldo](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@aldofermaldo](https://discourse.processing.org/u/aldofermaldo)
#### Post date: [April 28, 2021, 6:13am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/1 "2021-04-28T06:13:35Z")

</div>

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;

```auto

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

```

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [April 28, 2021, 7:22am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/2 "2021-04-28T07:22:50Z")

</div>

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

> [@aldofermaldo](#):
>
> ```auto
> 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);
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![aldofermaldo](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@aldofermaldo](https://discourse.processing.org/u/aldofermaldo)
#### Post date: [April 28, 2021, 7:44am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/3 "2021-04-28T07:44:12Z")

</div>

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

println(a); returns values increasing infinitely.

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [April 28, 2021, 9:41am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/4 "2021-04-28T09:41:04Z")

</div>

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

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

```auto
  float start_angle = random(0, TWO_PI);

```

With that, you can write the program as follows:

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

```

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [April 28, 2021, 12:29pm UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/5 "2021-04-28T12:29:48Z")

</div>

Slight change

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

```

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [April 28, 2021, 11:06pm UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/6 "2021-04-28T23:06:15Z")

</div>

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

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

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

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

```

![Chords](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7148c016c6cd36c5859a679b6753852e9b87ccc9.png)

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

---

<div class="post-metadata">

### Author: ![aldofermaldo](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@aldofermaldo](https://discourse.processing.org/u/aldofermaldo)
#### Post date: [April 29, 2021, 5:24am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/7 "2021-04-29T05:24:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [April 29, 2021, 10:52am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/8 "2021-04-29T10:52:41Z")

</div>

Something worthy of note is that the code posted [here](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/4) 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.

 ![Screen Shot 2021-04-29 at 6.35.02 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/45929fa4ba95ca297b76c7e438c973a4bf0468d4.png)

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:

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

```

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

 ![Screen Shot 2021-04-29 at 6.43.01 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/673df28659d2e2e8d6a1d40aca4ac085d43e4a6e.png)

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:

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

```

Here is the result:

 ![Screen Shot 2021-04-29 at 6.49.48 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/575e1d8e5fb707c28abbc0611b657e29c6e9264c.png)

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

---

<div class="post-metadata">

### Author: ![aldofermaldo](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@aldofermaldo](https://discourse.processing.org/u/aldofermaldo)
#### Post date: [April 29, 2021, 11:04am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/9 "2021-04-29T11:04:34Z")

</div>

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.

 ![ppnl](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f381fd3e9c50c5a4f90f584baf2389d5ce55c7bf.jpeg)

 ![20210429_040051](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0eb38eedfaee18f61aae9059be12de2f7c8ce6fb.jpeg)

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [April 29, 2021, 11:09am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/10 "2021-04-29T11:09:47Z")

</div>

Wow, amazing stuff! 🤩

---

<div class="post-metadata">

### Author: ![aldofermaldo](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@aldofermaldo](https://discourse.processing.org/u/aldofermaldo)
#### Post date: [April 29, 2021, 11:49am UTC](https://discourse.processing.org/t/random-starting-angle-to-finish-circle/29694/11 "2021-04-29T11:49:43Z")

</div>

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