Make it for Wikipedia: Drawing Cardioids

In this article, I create a gif for use on the Cardioid Wikipedia page.

Cardioid is the largest shape in the center right. Source: https://upload.wikimedia.org/wikipedia/commons/a/a5/Cardioid_animation.gif

NOTE: There is a lot math (which I find interesting) at the top of this post, but there are pretty pictures towards the bottom. Feel free to scroll ahead if cosines scare you.

I recently watched a great video about visualizing the Mandelbrot Set in Processing, and I decided to investigate the topic more. The largest shape visualizations of the Mandelbrot set is a cardioid. It looks a bit like a jelly bean, and can be drawn in an extremely surprising way that I aim to emulate in this post. The gif was the main image on the Cardioid page whenever I created my own, and inspired me to create my own version.

Parametric equation definition of a cardioid

I started by graphing the parametric equations from [0, 2*PI] in Matlab, which produced the below visualization:

Cardioid from [0, 2*PI]

This is mostly what we expected to see.

I then graphed both components before realizing that the y component causes the internal flurry:

We would like to eliminate the regions circled in red

So if we solve this y component for zero, we can plot our cardioid without those bounds:

Great, so let’s plot again from pi/3 → (5*pi)/3:

Perfect little Cardioid

And now we finally have something that looks right. Now we can start breaking apart these equations to see how they work.

Creating the Visualization

I used Processing to create these visualizations. My code is available here.

Let’s think about the basic case where x = cos(t) and y = sin(t). At every location in time (t), we are at a specific (x, y) coordinate which defines our position. If we visualize this movement over time, we see that our point is moving around the unit circle:

Moving around the unit circle (radius of 1)

In our original equations, the first term is x = 2*cos(t) and y = 2*sin(t). So what happens when we visualize that?

x = 2*cos(t), y = 2*sin(t)

Our point is simply moving around in a circle that is twice as big as before. So I’ll draw the moving circle twice as big as before.

Circles are the exact same size.

Pretty much the same, but now we can see that both of the circles are in fact the same size and we are rolling the outer one along the inner one. So I’ll add a reference line to the rotating circle so that we can see it’s rotation.

If you look carefully, the end of that line is drawing a cardioid! So if we draw a red line wherever the end of our rotating line goes, we can see the cardioid:

Our final product

I have since published this image on Wikipedia. Feel free to use / modify it. By the time that you read this post, there may very well be a much different image on the Cardioid page, but for now, there’s this one! Hopefully you learned something today!

Thanks for reading!