Generative Art Circles

Next I'll declare some constants, both to maybe remind me what the values represent when I use them later and to have a place where I can change the values as I experiment with what looks interesting.

const DEGREES_IN_A_CIRCLE = 360;
const RADIUS = 100;
const SMALL_DIAMETER = 10;
const STEP = 5;
const TO_RADIANS = (2 * Math.PI)/ DEGREES_IN_A_CIRCLE;
const WIDTH = 3 * RADIUS;
const HEIGHT = WIDTH;

• The RADIUS holds the radius of the circle we're going to draw
• SMALL_DIAMETER holds the diameter of the circles I'm going to use to draw the main circle.
• STEP holds the number of degrees I'm going to rotate the starting point of the circle every time it's re-drawn
• WITDH and HEIGHT are the dimensions of the canvas

To make it less confusing I'll refer to the small circles that make up the big cicrle as "points" most of the time.

The variables are:

• center_x, center_y: the center coordinates for the circle. These could be constants but I usually set them in the setup.
• slider: to hold a slider that will set how many degrees we'll rotate between drawing points on the circle
• start: the angle at which we'll start drawing the circle.

let center_x;
let center_y;
let slider;
let start = 0;

We're going to rotate around the circle once using the start value as the angle to start at and the value the slider's set at for the number of degrees we move between drawing the points on the circle. To make it easier to think about I'm using degrees in the for-loop but the sin and cos functions expect radians so we need to convert the degrees. Since the circumference of a circle is both \(360^\circ\) and \(2\pi\) we can use a straight ratio to convert them.

\[ \textit{radians} = \textit{degrees} \times \frac{2 \pi}{360} \]

This is usually written using a half-circle \(\left(\frac{\pi}{180}\right)\) but I find it easier to remember the whole circle for some reason.

for (let angle=start; angle <= DEGREES_IN_A_CIRCLE + start;
     angle += slider.value()) {
  radians = angle * TO_RADIANS;

The coordinates for our point are calculated using the trigonometric definitions for sin and cos.

Using the radius we want as the hypotenuse and the adjacent and opposite values as the x and y coordinates we can re-write the equations as:

But since our coordinate system starts in the top left corner we have to add an offset to move the center of the circle to the center of the canvas.

x = center_x + RADIUS * Math.cos(radians);
y = center_y + RADIUS * Math.sin(radians);

Now that we have our x and y coordinates for the next point on the circle we can draw it.

p5.line(center_x, center_y, x, y);
p5.circle(x, y, SMALL_DIAMETER);

If we just draw the points and line we'll end up with a black dot, which still shows that it's working, but kind of negates the point of using something animated, so I'll draw a white background that's mostly transparent so we can see things move.

p5.background(255, 10);

And now I'll increment the start angle so the next time we draw a circle it will be rotated a little bit from where it started this time through the loop.

start = (start + STEP) % 360 ;