There are many ways to draw a heart shape. It could be something really simple like rotating a square by PI/4 and attatching half circles to two adjacent sides. You can also render a heart using higher order math equations. Following Daniel Shiffman's approach in his Heart Curve coding challenge, I choose the later route. I utilized the equations from two different websites. In some cases, I had to tinker a bit with the parameters until I was able to render a decent heart shape.
Daniel used the following equations to render a heart curve.
const r = height/40;
const x = r * 16 * pow(sin(a), 3);
const y = -r*(13 * cos(a) - 5*cos(2*a) - 2*cos(3*a)- cos(4*a)
Coding Train P5 sketch
Coding Train Heart Curve Coding Challenge
The equations for the first and second heart curves are from Mathematische-Basteleien, while the equations for heart curves 3 and 4 are from MathWorld. All four hearts are added as classes in this p5 sketch. Heart curve 3 is the heart that will render and the others are commented out.
In the first heart curve, the equations draw a petal shape. I rendered the heart by drawing the shape and its reflection.
const r = 10 * pow(sin(a), 7) * pow(e, 2 * a);
const x = r * cos(a);
const y = -r * abs(sin(a));
The second curve is tall and skinny, and renders a little slowly.
const r = 40 * (1-abs(a))*(1+2*abs(a));
const x = r * cos(a/2)*sin(a);
const y = -r* sin(a);
This one is my favorite. Just a typical heart shape.
const r = 325;
const x = -r * sin(a) * cos(a) * log(abs(a) * 0.9);
const y = -1.25 * r * pow(abs(a), 0.7) * cos(a);
This heart is very curvy. It would probably look a little better with a deeper curve in the middle.
const r = 2 - 2 * sin(a) + sin(a)*(pow(abs(cos(a)), 0.5)/(sin(a) + 1.4)
const x = r * cos(a);
const y = r * sin(a);
There are many ways to render a heart in a shader. Inigo Quelez has a signed distance function (SDF) for a heart curve on his website. Additionally, Martijn Steinrucken (The Art of Code) has a tutorial where he demonstrates how to render a heart shape.
The trick to getting this one to render was using the clamp function to limit theta.
Here is the version from Making a Heart in ShaderToy tutorial by The Art of Code.
Here is a screen shot of an animation adapted from Shader Coding: Making a starfield tutorial by The Art of Code (Martyn Steinrucken).
Martyn Steinrucken explains the algorithm to create this effect in his tutorial, so if you are interested in it go watch his excellent video.
I have tried several different approaches to rendering a 3D heart. My most successful version is a little hacky and I got the idea from a failed attempt to ask chatGPT to render a 3D heart (it gave code for a rotating 2D heart -- most likely from Daniel Shiffman's Heart curve coding challenge.) While it did not give me the answer I was hoping for, it did suggest a way to render the heart -- draw hearts with different combinations of r and z.
Here is a 3D shader version. This is my attempt to follow along with Inigo Quelez's Making a heart with Maths Youtube tutorial, which is rendered by starting with a sphere and adding distortions. While I have managed to render a 3D heart, my version is not as nicely curved as his.
