# Unit Circle Art

But out of limitations comes creativity.

Debbie Allen

The enemy of art is the absence of limitations.

Orson Welles

## Curves

The art form I develop in this post involves colored
*curves* in two dimensions. Such a curve can be represented by a
function from a number range, here [0, 1], to a set of
colored *points*, where a point has an x and y coordinate, and
“rgb” (red-green-blue) values to represent its color.

For example, the following function `diagonal`

represents a
diagonal line

```
const diagonal = t => make_color_point(t, t, 0, 255, 0);
```

because it maps each value `t`

to a point `(t,t)`

, which means
that x and y coordinates increase from the lower left to the
upper right.
The line is green because the “red” value is 0, the “green” value
is 255 (the maximum rgb value), and the “blue” value is 0.
The programs in this post are
available here;
to see the images, uncomment the lines that start with
`//draw_connected_full_view...`

.

You can visualize curves with the function `draw_connected_full_view`

,
which takes a number `n`

as argument and returns a function that
can be applied to a curve to visualize it. For that, the
curve is applied to `n + 1`

values, 0, 1, …, `n`

, and the
resulting points displayed so that they all fit on the screen,
and are connected with each other with straight lines.

The following application draws the `diagonal`

curve
by applying `diagonal`

to the values 0, 0.25, 0.5, 0.75, and 1,
and the resulting points are connected.

```
draw_connected_full_view(4)(diagonal);
```

## The Unit Circle

Similarly, you can draw a red circle using the trigonometric functions of sine and cosine:

```
const π = math_PI;
const unit_circle = t => make_color_point(
math_cos(2 * π * t), // x
math_sin(2 * π * t), // y
255, 0, 0); // rgb
draw_connected_full_view(100)(unit_circle);
```

This circle is called the “unit circle” because it results from drawing a circle of radius 1 whose center has coordinate (0,0).

If you play with the rgb values, you can achieve a multi-colored unit circle:

```
const colored_unit_circle = t => make_color_point(
math_cos(2 * π * t), // x
math_sin(2 * π * t), // y
math_pow(math_cos(2 * π * t), 2) * 255, // r
math_pow(math_sin(2 * π * t), 2) * 255, // g
math_pow(math_cos( π * t), 2) * 255); // b
draw_connected_full_view(100)(colored_unit_circle);
```

In this post, I constrain myself to connecting points on this colored unit circle with straight lines, and turn this into an “art form”.

## Connecting Points on the Unit Circle

The following abstraction `connect_points`

comes in handy.
It takes a number `n`

and a function `f`

as arguments and connects
`n`

points with each other. The points result from applying
the colored unit circle to values
`f(0) / n`

, `f(1) / n`

, …, `f(n) / n`

```
const connect_points =
(n, f) =>
draw_connected_full_view(n)
(t => colored_unit_circle(f(math_round(t * n)) / n));
```

In the case where `f`

is the identity function, you just
connect `n`

points on the unit circle with each other, and
get a regular polygon with `n`

vertices:

```
connect_points(5, k => k);
```

connecting the points
`0 / n`

, `1 / n`

, `2 / n`

, …, `n / n`

The unit circle wraps around, if you apply it to values greater than 1, so you can obtain star shapes by connecting multiples of the given value.

```
connect_points(5, k => k * 2);
```

yields a pentagram

because you connect the points
`0 / 5`

, `2 / 5`

, `4 / 5`

, `6 / 5`

, `8 / 5`

, and `10 / 5`

.

In the same way, you can create a star shape by connecting the corners of a 50-vertex polygon with each other such that each point is connected to the point 21 positions further, in counterclockwise direction:

```
connect_points(50, k => k * 21);
```

Choosing random values on the circle also leads to an intriguing pattern, when you choose n large enough:

```
connect_points(1000, k => 1000 * math_random());
```

## Equation Signatures

Every equation seems to have a particular “signature” image in this art form. Here are some examples.

```
connect_points(6561, k => k * k );
```

```
connect_points(1024, k => k * k * k + 3 * k * k + 3 * k + 1);
```

```
connect_points(256, k => k * k * k * k);
```

```
connect_points(512, k => k * k * k * k);
```

```
connect_points(512, k => k * k * k * k * k);
```

```
connect_points(84, k => k * k * k * k * k * k * k);
```

## Connecting Lines

Another way of connecting points on the unit circle using
a function `f`

is to draw a line from `i`

to `f(i)`

, for each `i`

from 0 to `n`

. That can be accomplished using the `connect_points`

abstraction, by connecting (1) the point at `i`

with (2) the
point at `f(i)`

, then (3) going back to `i`

, which explains the
occurrences of the number 3 in the program.

```
const connect_lines =
(n, g) =>
connect_points(n * 3,
k => { const v = math_round((k - 1) / 3);
return k % 3 === 1 ? g(v) * 3 : v * 3; }
);
```

Connecting the every point with point 0 yields a picture like this.

```
connect_lines(150, k => 0);
```

which you can turn in counterclockwise direction by using a non-zero destination point, here point 25.

```
connect_lines(150, k => 25);
```

Connecting the points with a point that results from applying the modulo operator % yields intriguing interference patterns.

```
connect_lines(150, k => k % 3);
```

```
connect_lines(150, k => k % 11);
```

```
connect_lines(300, k => k % 11);
```

```
connect_lines(250, k => k % 11+160);
```

```
connect_lines(250, k => k % 10 + k / 10);
```

```
connect_lines(1000, k => k % 25 * 7);
```

## Drawing Times Tables

Connecting points with their multiples leads to a visualization
of “times tables”. The Mathologer has
a video on this genre of unit circle art.
You can draw times tables with the abstraction `draw_times_table`

:

```
const draw_times_table =
(n, m) => connect_lines(n, k => k * m);
```

The times table for 2 is called the *cardiod*.

```
draw_times_table(200, 2); // m = 2: cardioid: 1 lobe
```

The times table for 3 is called the *nephroid*.

```
draw_times_table(200, 3); // m = 3: nephroid: 2 lobes
```

The number of “lobes” of the picture increases with `m`

: For
`m = 4`

you get 3 lobes, etc.

```
draw_times_table(200, 4); // m = 4: 3 lobes...
```

Specific relationships between `n`

and `m`

create interesting
visual patterns. For `n = 397`

and `m = 200`

, you get a variant
of the cardiod…

```
draw_times_table(397, 200); // m = (n + 3) / 2: cardioid
```

…and for `n = 500`

and `m = 252`

, you get a variant of the
nephroid.

```
draw_times_table(500, 252); // m = (n + 4) / 2: nephroid
```

If you play with the numbers, you observe what relationship
between `n`

and `m`

gives rise to what kind of picture. Enjoy!

```
draw_times_table(501, 253); // m = (n + 5) / 2: 3 lobes...
```

```
draw_times_table(500, 168); // m = (n + 4) / 3: cardioid
```

```
draw_times_table(295, 100); // m = (n + 5) / 3: nephroid
```

```
draw_times_table(594, 200); // m = (n + 6) / 3: 3 lobes...
```

```
draw_times_table(395, 100); // m = (n + 5) / 4: cardioid
```

```
draw_times_table(494, 100); // m = (n + 6) / 5: cardioid
```

```
draw_times_table(593, 100); // m = (n + 7) / 6: cardioid
```

```
draw_times_table(400, 201); // m = n / 2 + 1 (/4,/8,/16)
```

```
draw_times_table(400, 199); // m = (n / 2) - 1: square
```