Drawing The Flower Of Life — Sacred Geometry in High School Math and JS

Alexander Carusillo

·

Follow

29 min read

·

Apr 15, 2019

--

6

Listen

Share

This is the Flower of Life. If you’ve been in a yoga class, wellness shop, occult bookstore, or even been around incense, you’ve probably seen it. It has that wonderful quality of optical illusions where you can’t see the whole thing at once (look really close and try to see multiple circles at the same time), and it’s always presented with really wonderful cosmic imagery and colors.

But, like, what’s the point of this thing?

As a net artist working in a style that I 75% sincerely call cybermystic I decided to spend some time on the New Age internet and learn what this is beyond ornamentation to see if I could incorporate it into my own work.

And, oh boy, did I learn some stuff.

The Flower of Life is:

• “a geometric shape composed of multiple evenly-spaced, overlapping circles arranged in a flower like pattern with six fold symmetry”
• “the creation pattern of everything in existence”
• “a visual expression of the connections life weaves through all sentient beings, believed to contain a type of Akashic Record of basic information of all living things”
• A pattern that, if thoroughly studied, can reactivate your Merkaba and guide you on your path of ascension.

And, if we’re being honest, that all sounds great! Specific promises and powers aside, there is something so instantly overwhelming about simple patterns repeating. Plus, if you’re the type that needs some kind of scholarly legitimacy, there are Serious Mathematics about similar stuff out there (and tbh they brand it every bit as galaxy brain-y by naming calling it Chaos Theory)

Plus it’s 2019, and I’ll take anything I can get at this point, you know? Unity with all things sounds rad just give me a vector.

But the problem I’ve consistently found when researching New Age thought is that so much of the writing out there is opaque or outright misleading. Even with really good intentions from the writers, I think there’s a lot of copy/pasting happening, and it makes it hard to get a handle on things. I spent a couple weeks just trying to understand the “geometry” part of this Sacred Geometry and couldn’t find any coherent explanation.

So, for all my fellow cybermonks out there, I figured I’d spend some time breaking this thing apart. This little article explains my understanding of what the Flower Of Life is, how it works, and then gives you the steps to follow to recreate it in your own work.

Consider this my little contribution to all the wild sites out there that have given me so much inspiration.

I’ve approached this as a math and code problem but you don’t need to know either of those things to read the bulk of this post. My hope is that this post is readable to both folks on the New Age internet looking for greater clarity and technical people who want to understand this shape and use it on their own.

For what it’s worth, I suggest anyone even casually interested in this kind of thing read through to understand what’s happening here. I don’t know the path to ascension but I know the more I studied this the more it powerful it became. Sometimes you’ve got to earn the vibes, man.

Table Of Contents

• What Is The Flower Of Life
• How The Flower Of Life Works
• The Math Of The Flower Of Life (+ implementing it in JavaScript)
• Exploring The Flower Of Life

What Is The Flower Of Life

“This one drawing contains within its proportions every single aspect of life”

Before getting into Sacred Geometry, generally, and the Flower of Life, specifically, it’s probably worth taking a minute to understand the collection of beliefs around them that make this shape more than just a neat collection of circles.

Everything we’re talking about here can be colloquially referred to as New Age but the truth is New Age isn't really 'a thing' and practitioners kind of run from that term because it boxes them in. There's no structure or hierarchy or even uniform set of beliefs that make up New Age and that’s how it should be. The whole thing is really just short-hand for a bunch of overlapping ideas that sample pretty broadly from a number of disciplines. There'sbits of zen and astrological cycles and theoretical physics and aliens and multiverses and secret DNA codes and kindness toward others. It's a lot, really, and some of it is helllllla problematic; but there’s a general thread that just encourages contemplation and pushes you toward a better life, and however you want to define that is fine.

There’s bits of zen and astrological cycles and theoretical physics and aliens and multiverses and secret DNA codes and kindness toward others.

Of that splatter of ideas, Sacred Geometry is one of my favorites. It’s a way of using shapes and ratios to connect the viewer with something larger. Sacred Geometry can be as explicit as directly ascribing meaning or to certain arrangements, like Platonic Solids or early Western Astronomy, or as simple tool to inspire wonder, as in Islamic or contemporary art.

I don’t know if the Flower Of Life has extranormal powers but drawing it and understanding the rules… kinda works? It’s fascinating and mystical the same way the Golden Ratio and The Fibonacci Sequence are. It just has more window dressing.

And what window dressing it is! Drunvalo Melchizedek first named the Flower of Life in his 1999 book ‘The Ancient Secret of the Flower of Life, Vol. 1’ but it's siblings have been a recurring symbol in art for over a thousand years.

A fairly common New Age cosmological belief suggests that, once everything was unified, and only through some initial corruption did things separate from a harmonious everything and into different planes of reality.

Many practitioners believe that original state is still accessible, whether through breaking out of the consciousness hologram or simply “seeing the world as it is” as Buddhists do, and contemplation of the Flower Of Life is a tool on that path. Check out some of the things it can do:

Geometric models mirror our consciousness. Just as our bodies are expressions of our consciousness in a physical form, the physical geometric forms are representations of the original geometry of light that exists beyond the physical level. [Seed of Life Institute]

The complete ancient flower of life is an inter-dimensional tool, a portal, a stargate, a window into what some call the inter space planes [Sacred Geometry — The Flower Of Life]

The thirteen information systems that make reality come out of the Flower Of Life [Spirit Science]

It’s awesome, right? Transcendences through ratios! Information systems of reality! A map of our metaphysical DNA! The path back home!

Can it take you back to your initial, unfallen state of harmony and connectedness? That’s above my pay grade, tbh. But people have been drawing this thing for a long time and, honestly, the more I recreated it the more wonder I found. Plus, contemplation is never bad so let’s make this thing together and maybe one day we’ll meet in the stars.

“a geometric shape composed of multiple evenly-spaced, overlapping circles arranged in a flower like pattern with six fold symmetry like a hexagon.”

How The Flower Of Life Works

In attempting to draw this shape for myself, the best definition I could find of the Flower of Life was that it’s ‘a geometric shape composed of multiple evenly-spaced, overlapping circles arranged in a flower like pattern with six fold symmetry like a hexagon.’ Which, like, cool? But that’s not going to help me draw it, and I honestly still only sort of get what it means.

Wikipedia suggested it was of an Overlapping Circles Grid but, uhhh, you go ahead and look at that page? It’s also extremely confusing to me.

Weirdly, the best answer I got about how it worked was in a pdf on archive.org (and I later closed the tab and truly cannot find it now so maybe that’s divine intervention?) that explained the process of drawing the shape as a story. As alluded to above the Flower of Life isn’t just a pattern but a physical expression of a lost truth and the way back to it.

It’s the best way to understand how it works, too.

At First, There Was Only Everything

Before there was anything, there was everything. A single, completeSource that contained all that could or would be. We draw a single circle to represent it.

Ex nihilo

Then we have our moment where things change. You can call it the Big Bang, the corruption of our DNA, Let There Be Light, the start of another Yuga, Unity giving rise to Duality… Really whatever you want. All you need to know is that something moves and in turn something is created.

There is no more everything as something moves as far as possible, one radius as that's the maximum distance you can get on a circle. And when it gets there, pow!, the shape replicates itself and something new, in the originator’s image, springs into existence.

Repetition

Sacred Geometry is about patterns, their repetition, and the message that rises from that. So too is this shape. Our new circle, 2, does the same as its parent and runs one radius away where it hits the original source of things and creating another identical circle.

From here on out all we need to do to draw The Flower Of Life is to draw a circle at the first clockwise intersection point of our most recently drawn circle.

e.g. we draw a radius from the center of 1 to where it connects (clockwise) with our first circle 0. And then repeat

The Seed Of Life

This process goes on-on-and-on — each circle moving one radius until it intersects with an already existing circle — until a full rotation has been completed and we have a shape known as The Seed Of Life. A shape that is regularly used in the New Age

Changing Intersections

After six circles we’ve traveled all the way around the original circle and completed a full rotation. The last circle of our first rotation, 6, doesn’t first intersect with 0 as its predecessors had but rather intersects with 1 so we move out a round. From this point on every additional round of circles will have six more circles than the previous round

On and on forever

So that’s how it works. It’s actually really easy to draw with a compass [and if you’re near 12th Street & 1st Ave in Manhattan let me suggest the Best Price Deli on the corner where the guy said ‘What up, Galileo?’ when I bought mine. Only $3 too.] I suggest you try — there really is something compelling about doing such a simple thing over-and-over and getting such a complex shape.

But that’s not the math of how this works and you can’t easily implement it from those instructions. If you want to understand that and make your own keep reading.

Otherwise let me take this chance to plug my portfolio and my YouTube series of ambient videos which work in this same digital mystical space. If you have you own stuff I’d love to see what you’re working on too!

The Math of The Flower of Life (+ implementing it in JavaScript)

Beginners: I promise if you can follow instructions you’ll make it through this and be able to extend it on your own. I try to explain most concepts but if something doesn’t make sense don’t hesitate to just copy and paste :) The most important part of creative coding is making something work. I learned everything I know through copy/pasting and seeing what happens

Developers: This starts slow but ramps up at Drawing The Rest Of The Circles. You can just jump there and copy the code right above if you already know p5 and geometry basics

So what are we •actually• doing here? Believe it or not it’s pretty much just what did above but with some math that fifteen year-olds know and I, as a grownup, totally had to google. The following is done in p5.js but the general principles apply everywhere.

Setting It Up

To build our Flower of Life we’re going to use p5.js, an art library that makes ‘coding accessible for artists, designers, educators, and beginners’.

Strictly for convenience we’re going to do this in CodePen to prevent you from having to do setup work. Go ahead and click this link, adjust the screen so it looks like the screenshot below, and you can immediately start coding. Now, let’s get to communing with everything!

Core Functions

The first thing we need to do is set up p5’s essential functions, setup() and draw(). Pretty much anything you do in p5 requires these two so let's talk a little bit about what they do.

setup() is called first and defines some of the initial properties of our program. In our case this will be the size of the canvas and the frame rate, the number of times per second our image refreshes. Go ahead and type the following block in.

Next let’s take a look at draw(). As the name implies this is where we put all of our instructions about what to draw. Right now let's just set a background color so we know everything is working.

Your First Circle

Okay cool. We’ve got ourselves a grey background but out of the void must come something… so let’s draw our first circle.

P5 has a bunch of functions that help you draw shapes as long as you know some basic information about them. To draw an ellipse we just use a function called, wait for it, ellipse()!

Ellipse() takes three parameters, or pieces of information, inside its parentheses: the x coordinate of the shape's center, the y coordinate of the shape's center, and the diameter of the circle.

Let’s add the following line to our draw() function

Looking good but maybe not the most exciting thing in the world. Let’s get our second identical circle on the screen and turn everything into every thing!

The Second Circle

We know the second circle starts one radius away from the center of the first but we need to give our ellipse() function coordinates. So how do we find them?

There are several ways to do this but as we're working in Sacred Geometry might as well use the Pythagorean Theorem and really commit to the aesthetic and our cybermonk forebears.

The Pythagorean Theorem, a² + b² = c², is a way to find the length of the sides of any right triangle. This may not seem like it will help us find coordinates on a circle but imagine a triangle that starts at the center of our circle with a hypotenuse, the c in the theorem, with a length of 100, the radius we used in ellipse()

Let's arbitrarily decide we want to draw our second circle at a 60º angle from the center of the first. If we can find the length of the other two sides of this triangle all we have to do is tell p5 to draw a circle at them.

First let’s find the length of the opposite side of the triangle which will represent our x coordinate. To get that we'll use the sin equation [you may remember it as the SOH part of SOHCAHTOA)

sin(angle) = opposite/hypotenuse

So in our case we can solve it like this

// We know the angle, 60, and the length of the hypotenuse, 100, so we fill those in
sin(60) = Y / 100
// then we multiple both sides by 100 so we get the Y alone
100 * sin(60) = Y
// which leaves us with our answer ~ 86.6
86.6 = Y

We do the same to find the value of X using the the cosine equation, the CAH part

//We know the angle, 60, and the length of the hypotenuse, 100, so we fill those in
cos(60) = X / 100
// then we multiply both sides by 100 so we get the Xalone
100 * cos(60) = X
// which leaves us with our answer of ~ 50
50 = X

Now that we know the length of both the X and Y sides of the triangle we can find the point of our first circle by adding these values to the center point of our first circle.

// We're adding the values we found to 400 as that's where our first circle is centered
circle2.x = 400 + 50
circle2.y = 400 + 86.6

We don’t even need to do the math in our code as p5 has convenient sin() and cos() functions

and there we go! We’ve got ourselves two circles. If you want to play more with basic trig this site was super helpful and taught me a ton.

The First Round Of Circles

We know the first part of the Flower of Life has six, equally spaced circles around the edge of another and we’ve just learned the formula for finding the coordinates of different parts of a circle’s edge. As a circle has 360º all we need to do is place a circle every 60º (360/6) and we’re good-to-go!

To do that we’re going to use a for loop which just runs a bit of code as many times as we tell it to — check out out:

Things don’t look right, do they? That’s because by default p5 assumes any angle value you’re giving is in radians. We could convert the above formula to radians through a fairly simple formula but, honestly, it’s easier to just tell p5 that we’re working in degrees using the convenient angleMode() function. Go ahead and write

in your setup() function and pow! You've got yourself the right shape!

Adding some style

So now we’ve got some circles but, honestly, they don’t look great. The Flower of Life is so visually compelling because you see where the circles overlap… and we’ve got here is a mess of white circles. As the guy at my deli says ‘What up, Kahlo’

The first thing we want to do is to tell p5 we want to work in the Hue Saturation Brightness mode of color, or HSB. P5's site has a great article on color but all you really need to know that hue, what you might think of as the 'color' part of the color, is a visualized as a circle with values between 0 and 360 while brightness and saturation are given values between 0 and 100.

I know that’s a little confusing so if the graph above doesn’t help check out this great color picker by Hunor Marton Borbely I found. It should make it really clear.

HSB is a little unusual and you don't have to use it but I personally find it to be the best color system for animation and generative art. We'll see this in practice later. For now just go ahead and just add colorMode(HSB) to your setup() function.

Annnnnnd…. you’ll notice no change at all :/

That’s because to do that we need to tell p5 how we want to color our ellipses. We’ll do that using the fill() draw() like this:

Before we move onto drawing the next round of circles we should take a minute to clean things up and make sure my code is in sync with yours. I’ve done some light refactoring for readability.

Drawing The Rest Of The Circles

So now all that’s left is repeating the above formula with with different radius values, right? That’s what I thought and spent, uh, several days trying to figure out a formula that allowed me to easily do that. Feel free to try on your own but I’m almost certain no such formula exists :/

Our first set of circles can be easily drawn because they’re all one radius away from the center of the initial circle. After our first round, however, the intersections are at totally different distances so a simple formula is out of the question.

So how do we do this? It requires going back to the initial description of this shape: for each circle we draw a new circle at its first clockwise point of intersection. And lucky for us some smart people have already figured out a way for us to find those points.

To do this we’re going to be using Intersection of Two Circles by Paul Bourke (scroll down a bit on the linked page to see it.)

In conversational terms we’re able to find the intersections point, p3, as long as we know the radii, r0 and r1, and centers, p0 and p1, of the intersecting circles. We do it like this:

• Use the Distance Formula to find the straight line distance between p0 and p1
• Use this equation to find the lengths of a and b
• Find the length of h using the the Pythagorean Theorem
• Use h to determine the x/y coordinates of the intersection

Let’s try it with our circles:

We know that our first circle is at x = 400, y = 400; we derived that our second is at x = 500, y = 400; and both have a radius of 100.

Because we already know they intersect we can skip the first of Bourke’s steps and immediately find the length of the chord that connects the two centers, d. To do that we'll use the distance formula:

// Distance formula
d = √((x2-x1)^2 + (y2-y1)^2)
// For our example
d = √((500-400)^2 + (400 - 400)^2)
d = √(100^2 + 0^2)
d = √(10000)
d = 100

So d, the line connecting our two circles, is 100px long.

Next we’ll need to figure out how long just segment a is. We can do that using our new d value with the following equation:

// General Formula
a = (r^2 - r^2 + d^2 ) / (2*d)// For our example
a = (100^2 - 100^2 + 100^2) / 2 * 100
a = 100^2 / 2 * 100
a = 10000/200
a = 50

Okay! Now we know the length of a and the length of r so finding h is just the Pythagorean Theorem

//General Formula
h^2 = r^2 - d^2// For our example
h^2 = 100^2 - 50^2
h = 100 - 50
h = 50 

Now that we know this all we need to do is add our a length to our p0’s x value and our h length to our p0’s y value and we’ve got the coordinates p3 which are x = 450, y = 450.

Okay but that’s a lot to do every time and, honestly, it’s kind of confusing. Luckily the formula was converted into js so we can just use it without having to understand too much. Remember — creative coding is about getting it done :D

I’ve updated that function slightly so it’s better suited for us but this is largely just an adaptation of 01AutoMonkey’s work. Go ahead and take the following and just paste it into the bottom of your CodePen

Now when we want a circles intersection we can just call our new getIntersection() function, pass it the circles and radii we’re curious about, and get the values without doing any work :)

Creating Classes

We’ve made some real progress but our current approach in draw() is going to get us into trouble. Right now we’re calculating our ellipses in the for loop and not saving any information about them. See the problem? Our getIntersection() formula requires a reference to ur circles to tell us the intersection point. We can solve this by saving our circles in an array. While we’re at let’s stop calling our shapes circles and move to a more project-appropriate name and call them petals. Go ahead and update the top of your js file to include an allPetals array like this

We need something to put in that array, though. So why not make a class for each new petal!

A class is really just a way to create multiple versions of a thing that share certain properties. If you really want to learn more Eloquent JavaScript has a great section on the topic… but for our purposes you can just know it's an easy way to make a bunch of similar things.

Let's make a class for our petals like this and toss it just below those global variables:

Now let’s take advantage of all these cool new features and update our loop so instead of drawings petals with the ellipse() function we're storing information about them and saving them to the allPetals array.

But uhhh… now nothing is drawing? This seems like a lot of typing to have just gotten rid of everything?

That’s because we’re now saving our petals in the allPetals array but we’re not actually doing anything with them :/

Let’s fix that and see what classes can do all at once.

Doing Stuff With Classes

So we’ve got to tell something to use our ellipse() function so the shape is actually drawn… why not do it on that Petal class we just built!

Classes aren’t just data like x, y, or index. They can also contain functions that do stuff with that data. Lets prove it by giving our Petal class the ability to draw itself by calling a function called drawPetal()

So now we can draw our petals but we’re still not actually telling our program to draw them anywhere. Let’s head to our draw() function and do just that:

But how are we going to draw those ellipses? We can do it easily by just iterating through our allPetals array and calling our new drawPetal() method on each thing inside of it. It looks like this

Simply this new code just tells our program to go through each petal in the order they’re in our array and call the drawPetal() function on each of them. With that in our draw() function and we're... back to where we started... That’s just coding sometimes 😓

We’ve just made a bunch of changes so before we move on why not do another quick checkin to make sure we’re in sync:

You with me? Great. Now that we’re through that detour let’s make the most of all this new stuff.

Improving Performance

I’ll admit I’ve been misleading you a bit — maybe you’ve ever noticed. I said this shape is just a pattern of

1. draw a circle
2. find the first thing that circle intersects
3. draw another circle there
4. repeat

But instead I’ve got us doing a for loop with a bunch of math. and we’re doing a bunch of math that just isn’t necessary. Let’s refactor a bit and use that getIntersection() function.

First thing we should do is move our flower creation process out of the draw() function. That function runs 30 times per second which is great for things that change a lot, like animation, but terrible for things that never do, like math.

Let’s make a function called getPetalPositions() and move all our our current creation stuff into it. It’ll look like this:

now go ahead and call getPetalPositions() in setup() so this function only runs once when the program is first started.

That’s better! You may have even noticed a slight speed increase in your browser. Coding is dangerous business 🤕

Using getIntersection()

Now let’s finally use that getIntersection() function we worked so hard on. It’ll look like there’s a lot of new stuff here but really we’re just restating the work we’ve already done

You’ll notice we have an if statement that draws our 0th and 1st petals differently. This is because those are the two that set up all the rules every later petal follows. It makes the code a little bit less graceful than it otherwise might be but it’s really just repurposing work we did earlier and this is just one of those annoying realities of adapting things from the real world into code :)

Drawing More Rounds

So I wish I could tell you we just increase the number in circleCount and call ourselves in harmony with all things but it’s not that easy. They tell me enlightenment never is. 😓

You’ll notice we’ve currently just hardcoded our getIntersection() to always give the intersection between the previous petal and the origin circle. This is true for the first six circle but, if you think back to our animations, petal 6 intersects with petal 1, not 0, and it’s at that intersection that we need to draw the new circle.

So, uhhhh, how do we figure that out then? Well it ain’t easy and I spent about a week drawing increasingly wacko graphs on a legal pad and writing serial killer-lite notes like ‘something about 7 is wrong’ and, for reasons I literally could not tell you, the word ‘angle’ in an octagon?

But eventually I found a general formula but, unfortunately, I had to derive it just by looking at the shape for awhile. (Though for what it’s worth I think that struggle is literally the point of Sacred Geometry)

The general formula is: each new petal intersects with the petal one ‘row’ below itself unless it’s rounding a corner (hitting a vertex) in which case it intersects with the vertex twice before continuing it’s previous pattern.

Which like, what? Look, I said it’s true; I didn’t see it was clean. This is one of those things I think is easier if you see it for yourself.

Let’s take a look at what this will look like as pseudocode

- Create a variable to store the index of the first intersected neighbor and set its value to 0 
- increase that value if the next neighbor is the final petal in a round
- increase that value if the next neighbor is not a vertex
 

It’s easy enough to handle steps one and two of our pseudocode but how do we know if something is a vertex? Do that we need one last bit of geometry.

Using atan2 to find angles

We can describe the Flower of Life as a circle with each petal located at some x/y coordinates some distance from the center. We already know the shapes center and the coordinates of our petals — we just don’t know that petal’s angle from center. Magically there’s an existing function for that, it’s called atan2() and you would not believe how happy I was to learn about it

atan2, from 2 argument arctangent, is a formula that tells you the angle between the positive x axis (the right part of the horizontal line) and a specific point.

Getting a petal’s angle should be as easy as passing the petals coordinates to that atan2(). So let’s make a function, and call it getPetalAngle(), that does just that.

you’ll notice a couple things that may be unusual in there so let’s talk through them:

• In line 4we subtract our petal’s x/y coordinates from those of the first ellipse. That’s because our shape starts at (400, 400) and not (0, 0). This subtraction just shifts our final calculation to the right spot.
• In lines 6 & 8 we do some strange math on the result of atan2, also known as theta. This is because the result of atan2 is in radians and we’ve been working in degrees.
• In line 10 we round our end value. This isn’t strictly necessary but pixels are note reality and we get some strange angles like 30.000000002 and rounding just makes things easier.

Now that we have a function that returns an angle for any x/y coordinates let’s add it to our Petal constructor so that every new petal automatically gets its angle from center.

Drawing The Second Round

Now that we know the angle from center of each petal we can use it to increase our firstIntersection iterator and draw a second round of petals.

Let’s head to our getPetalPosition() function and make the following changes:

The first big change is the offset calculation up top. The Flower of Life is made up of evenly-spaced circles of which there are six more even rotation through (i.e. the first round has six circles, the next twelve, the following eighteen, etc) so to find their spacing we just divide the number of degrees in a circle, 360º, by the number of circles we want to draw. We call that value an offset.

Once we have that offset value we use it in our vertexIntersection calculation which just tells us if our new petal is going to be intersecting a vertex.

As the Flower of Life is, effectively, a hexagon each of its vertices is 60º from the center. We can test if our new petal is going to be intersecting with a vertex by using the modulo operator which, honestly, just tells us what the remainder would be if you were to divide the two numbers. If our petal is hitting any angle other than one divisible by 60 we know it’s not a vertex and can safely increase the iterator.

Drawing More Rounds

To be honest, though, our getPetalPositions() function is ugly and full of these weird things like that hard coded petalCount === 6 statement or the bizarre offset calculation. It would be easier if we could just tell our program how many rounds of petals we want to draw and not have to mess around with individual numbers. Luckily, we can! Let’s hand back to the getPetalPositions() function and refactor it so it draws based on rounds rather than petalCount

You’ll notice we’re now focused on how many rounds we want to draw rather than how many petals. We no longer need to manually calculate offset or petals for each round values and instead we leave our program to work it out. Go ahead and pop any round count in here and you’ll see you can make a huge number of petals with no additional work!

Tidying Up

You may notice our flower is getting bigger than our screen — lets decrease the size of the ellipseRadius so everything fits

Adding Some Life

Well, we’ve sort of done what we set out to do. You’ve researched the Flower of Life, understood the math behind it, and built your own. That’s a big accomplishment and I bet there was a lot of new stuff in here so feel proud 🖤

But — for me at least — it seems like something is missing. It doesn’t quite have as much style as I’d hope for so let’s add some color.

The first thing we want to do is change up our Petal class so that each petal can have its own color rather than relying on the universal fill() function. To do that head to your petal class and add the following.

Two big changes to understand here:

• Our petal now takes round, fillColor, and strokeColor values
• When we call drawPetal() it now checks its instance for strokeColor and fillColor and uses those values, The reason we want to store these values in the instance rather than the draw() function is that it allows us to color and animate individually petals individually.

But where are those colors coming from? Variables of course :)

Now that we’ve got these colors let’s actually pass them to our petals when we create them

That’s a pretty straight forward update but you’ve probably noticed this strange code on line 22: fillColorArray[(roundCount + fillColorArray.length — 1) % fillColorArray.length]

We’re once again using the modulo operator but this time we’re telling our roundCount to, effectively, go back to zero if it’s greater than the length of fillCountArray. It allows us to create as many rounds of petals as we want without having to worry about creating an entry in our color array for each.

Okay let’s do another checkin to make sure we’re both on the same page:

Animation

So far we’ve really just been using p5 as a drawing program but so much of its magic is in its ability to animate things. Let’s try a simple example that should set you up to do all sorts of stuff on your own

But first a quick SEIZURE WARNING.

None of the steps I’m about to walk you through will cause rapid flashing. That said, we are working with a system that refreshes 30 times per second and you have arbitrary control over values. If you’re not an experienced developer I’d suggest just copy pasting the final code and not manipulating things manually.

P5 makes it really easy to creating compelling animations, particularly when working in something as rules-based and psychedelic as Sacred Geometry. When you’re still learning I find you can get the biggest impact by focusing on small changes that affect everything on screen the same way. Let’s try changing two of our values to see this in practice.

Petal Hue

Earlier I suggested we use the HSB color system and here we finally get to see why. HSB allows you to uniformly change the appearance of colors using simple math which is ideal for us. Want to decrease the saturation of everything? Great! Just subtract from the s value across the board. Same with hue and brightness. If you want to see this in action check out the HSB Color Picker I linked earlier.

So let’s try something simple like changing the hue of all of our petals every frame. This can be easily done in the draw() function:

Pretty cool, right? And all we’re doing is taking the fill color we assigned earlier and adding 0.05 to the hue (the 0th value of the fillColor array) every frame.

Diameter

You could (and should!) do the same with the saturation and brightness values but I’ve found changing the diameter of the circle to be really fun and show the way the Flower of Life retains many of its properties even when it changes dramatically.

To change the diameter we can follow the exact same pattern as above and just add a little bit every frame. It’d look like this:

This is a neat effect but after awhile it lacks dynamism and aesthetically there’s no real sense of pace. Personally, I think it would be better if it both expanded and contracted in a predictable way.

The most popular way of doing this in web animation is using the sin() function [amazing tutorial from Allison Parrish here] but in the interest of simplicity I’m going to show you an easier, if less graceful, way :)

Up in your global variables set up a new value called diameterIterator and set it to 0.2

then let’s edit our draw() function so that our diameter grows until it’s 150% its original size and shrinks until it’s 50% of its original size

It’s, like, really cool isn’t it? Every frame we’re just checking the size of the diameter and, if it’s past our boundaries, flipping the iterator.

And with that you’ve set yourself to build some really cool stuff. Here’s what your final code should look like:

Future Exploration

This is really just the start though. Here’s some other things you could try:

• Animate only certain angles by limiting changes with

if (petal.angle > x && petal.angle < y) {
  // do something cool like change the size or color
}

• Change the position of certain indices

if (petal.index === x) {
 petal.x += this
 petal.y += that
}

• Convert our 2d ellipses to 3d cylinders
• Change the stroke color or remove it entirely
• Animate only parts the user hovers over

Pretty much anything you can identify you can arbitrarily change. I’ve even got the prototype that turns this into a generative music system using Tone.JS! Play around — I’d love to see what you come up with 😇

I originally wrote this post because I wanted to use this shape in another project and there was no information on the internet about how to make it. I have no idea if this post will be useful to anyone else out there but if there are other cybermonks lurking around I encourage you to straight up copy/paste this and throw it into your own work. Share it with me too!

I don’t know if there are gods in the wires or contemplating ratios can help us… but I can’t imagine it hurts.

If you thought this was interesting I encourage you to sign up for my, infrequent, email list on my art site, Under Construction Club. I make a lot of generative work that has this general sensibility and I’m always interested in feedback.

As long as I’m plugging you should check out my Our Little Planet series on YouTube. It’s just static videos of empty New York spots with electromagnetic field records as background noise. It’s weird but if you made it this far I bet you are too.