The Heart-making Geometry of Valentines

  • 1

The Heart-making Geometry of Valentines

Category : Uncategorized

Around Valentine’s Day I usually make hearts with my coding students. But the old “two circles and a triangle” sketch is just not cutting it:

I’d like to make something a little more curvy. In graphics, you get curvy by using something called Bezier curves. Web Graphics Wizard Steven Wittens gave an excellent talk on “Making Things with Maths” and showed very visually the hidden mechanics behind Bezier curves:

It requires locating points located along the segments connecting a pair (or three pairs) of control points and the amount of curviness depends on where the control points are. In the figure below, P0 and P3 are “anchor points” and P2 and P3 are “control points.”

Processing makes it “easy” enough where you just have to enter the four points, and that’s 8 numbers, an x- and y-coordinate for each point. But what if the curve isn’t how you want it? I may be a number guy but I quickly got tired of changing numbers randomly and checking the results. If only there were a way to move the points dynamically and see the change in the curve in real time!

Well there isn’t a way.

So I made a way! I wrote a short program that would allow the user to create movable points so they could mess around with bezier curves until the heart looked like they wanted it to.

Play around with the draggable points (patent pending!) in this Codepen sketch:

See the Pen Draggable Points by Peter Farrell (@peterfarrell66) on CodePen.

Using Bezier curves, I was able to make a much nicer heart than my first attempt (and using what I learned in Dan Shiffman’s Circle Packing tutorial video), I was able to spell my wife’s name in randomly growing hearts:

Programming can be useful!

1 Comment

June 21, 2017 at 1:07 pm

Tape several heart chains together to make a chain of any length you like.

Leave a Reply

Recent Posts