Github Repo
Docs
Docs
Docs
The inspiration for this small project was provided by a friend of mine who asked what would it look like if a love potion was made in real life. I took that, mixed in a little bit of matrix goodness and hey presto we have a cool animation.
There is actually an equation that denotes the shape of a heart. There are a whole family of equations dedicated to reproducing the classic symbol that is associated with love. The equation shown below was chosen due to it's aesthetically pleasing geometry, however it could easily be replaced with many other equations.
Equations for simple lines are usually given in the form of \( y = f(x)\) where \(f\) is an arbitrary function of \(x\). For example a straight line with a 45 degree slope is given by \(y=x\). This works for simple line where for each value of \(x\) there is only one value for \(y\). This is not the case for a heart and because of this we will be switching to polar coordinates where a line is defined by the angle around the origin \(\theta\) rather than the \(x\) and \(y\) coordinates.
$$ x = 16 sin^{3} ( \theta )$$ $$ y = 13cos(\theta) - 5cos(2\theta) - cos(3\theta) - cos(4\theta)$$
In this case the angle around the origin is given by the value \(\theta\). We normally think about angles in degrees from \(0^{\circ}\) to \(360^{\circ}\), however when we work with trigonometric functions it is customary to work in radians. When working with radians angles usually go from \(-\pi \le \theta < \pi\). Using the equation above we are able to find an \(x\) and \(y\) coordinate for every point along the heart line if we rotate all the way around the origin.
One interesting thing to note about computers is that when they display objects on screens they can't draw things with infinitely small lines. At some point the lines become smaller than the pixels and you don't gain anything by going smaller. In this case though it is more important to know that the more lines you draw on the screen the longer it takes to draw them, because the computer has to do lots of maths to calculate how to draw everything. With so many hearts scrolling by it is prudent not to let them have too many lines.
The way to limit the number of lines in the heart is to only draw points on the heart by incrementing the angle around the origin as we go. Doing this creates a pixelated heart. The smaller the increment the more smooth the heart is, but the longer it takes to draw. The values chosen for the step size in this code is related to the size of the heart. The larger the heart the smaller the step size so that large hearts don't look too pixelated in comparison to the smaller ones.
