But for drawing patterns that repeat in a circle around a point, it’s easier to use polar coordinates, an alternative coordinate system where points are determined by:
I chose to work in a polar coordinate system where angles are measured clockwise from the upwards vertical axis, like so:
This choice of coordinates gives you a straightforward conversion between polar and Cartesian:
import math
def polar_to_cartesian(origin_x, origin_y, radius, angle):
return {
"x": origin_x + radius * math.cos(angle),
"y": origin_y + radius * math.sin(angle),
}
This helper function allows me to define my shapes with polar coordinates, then convert to Cartesian when I want to actually draw them in the SVG.
First I drew “spokes” that emanate from the centre of the diagram. I picked a random number, then draw that many spokes which are equally-spaced around the centre:
I added a random offset angle, to rotate all the spokes slightly – this was to avoid creating a series of diagrams that all had the same vertical upward spoke at 0°. Notice how, for example, the four spokes in the first diagram aren’t perfectly horizontal or vertical.
Next I wanted to connect the spokes, to create something vaguely resembling flower petals. Initially I connected their ends with straight lines, creating sets of equal-sized triangles:
That first one reminded me of looking down at a spiral staircase. I went and manually added some colours to create the illusion of steps, and then I kept playing with more varieties:
These colours are static and hard-coded. I also played with adding animation, to create a basic colour spinner – there are a few rough edges and it’s a bit jerky, but if you’re interested, you can see what the animation looks like.
Returning to the line art, I wanted to replace those straight lines with something a bit more visually interesting.
I started with spiky “petals”. I allowed my script to choose randomly: would the spikes bend inward or outward, and by how much. The pictures I got back remind me of stars and flowers:
But the thing I really wanted was round petals – where each spoke would continue outwards, follow a circular arc, and come back to join the next spoke along. This involved a bit of trigonometry to work out the angles, and my first few attempts didn’t work – but I think they have a certain beauty all the same:
But eventually I got it all figured out, and I was able to reproduce my original idea: flower “petals” with circular ends. (And despite generating over 60 examples, I never got one with four parts. Whatever your medium, a four-leafed clover is a tricksy and elusive thing.)
And once I’d worked out the angles required to make a single curve work, I was able to stack them so there could be multiple arcs along the edge of each segment, like so:
I like the ones with fewer segments, so you can really see the extra arcs. The eight-segment one reminds me of a citrus fruit.
It was at this point that I noticed that all my diagrams looked quite… symmetrical. I’d pick a random starting value, and then repeat that value throughout the picture. What if I allowed even more randomness?
First I tried varying the radius of different segments. In my first version of this code, I had a bug where I didn’t join the extra-wide segments properly, leading to a rather fun “hook” effect:
After I fixed the bugs, I was able to get petals with different radii:
Then play with the angles:
It took me a couple of tries to work out how to partition 360° in a way that isn’t very lopsided – I ended up picking a random float in [0, 1] for each segment, then scaling those values up so their total was 360.
Here’s a final set of doodles, which are all “mistakes” where the code didn’t do what I was expecting, but made something pretty anyway:
There are more things I could try, like adding colour and moving the centre, but this is all I had time for. That’s okay. I was only drawing to have fun and because I wanted to make some pretty pictures, and I did both of those. I like how far I was able to get from a single idea: “what if I repeated a pattern in a circle around a central point”.