polygons to blobs

In this post I’ll show you how to make blobby shapes out of polygons. Click or tap on the shape below to see what I mean.

I’ll be using the same polygon in all the demos, but the concept will work for any polygon.

To transform the polygon into a blob we’ll harness the power of the quadratic Bezier curve. Don’t worry though. You don’t really need to know the math behind Bezier curves in order to use them. Most vector graphics systems like SVG have support for Bezier curves.

In fact, in SVG any 3 points can define a quadratic Bezier curve. They are:

  1. a start point
  2. an end point
  3. a control point

the beautiful bezier curve

Woah! A wild Bezier curve coming this way. If you don’t like the way it looks, it’s cool. You can click/tap it to generate a new one or you can modify it to your liking by dragging around its points.

If you put the start point and end point on the same line and then drag the control point across the line’s midpoint really fast it kinda looks like you’re strumming a one-string guitar.

The neat thing about Beziers is that you can string them together to make really curvy shapes. Below is a heart made up of Bezier curves. It’s so big that it almost doesn’t fit in the viewbox. Click or tap it to make it go ba-dum ba-dum.

So the question is, what’s a good strategy for transforming a pointy polygon into a beautiful blob composed of Bezier curves? Well, I thought you’d never ask.

the blobification method

Here’s a closer look at what’s going on.

To put it into words, take two consecutive midpoints, m1 and m2, from the lines that define the polygon and draw a quadratic Bezier curve from m1 to m2 with the curve’s control point equal to the vertex of the polygon that lies between m1 and m2. To draw the entire blob, just repeat this for each pair of midpoints around the polygon. You should have n curves where n is the number of sides of the polygon. Then just string your curves together and voila you have yourself a good ole blobby blob.

I wanted to have a grand finale to end this post but I’ve already put more effort into it than I probably should have. For the last demo below, you can grab hold of the handle in the middle of the line and move it back and forth to see the differences between the polygon and its blob counterpart.

resources