Curve Stitching: Color and Animation

In my first article on curve stitching, I explained how my niece inspired me to explore curve stitching again as an adult.

Curve Stitching: An Ode to Canvas

To make it easier to build templates for myself, I decided to write a program in JavaScript that would draw templates automatically on canvas, an HTML element for drawing on web pages. Soon, I had a set of tools for drawing the curves automatically as well, and I was thinking about animating the curves and adding in color.

A blue flower and purple star

A red-yellow star and blue-green flower

A purple-blue nautilus and green-yellow ring

Adding in color is still a work in progress, but I thought I’d share my initial experiments. On a canvas, it’s possible to create a polygon by connecting a series of points and then fill that polygon with a color. The tricky part of coloring in a curve is I don’t know the coordinates of the points where two lines happen to intersect, I only know the coordinates of the marks used in the template.

Color in four-sided strips formed by connecting four marks in the template. The strips are twisted so they cross in the middle.

The color used to fill in the strips is made darker or lighter. The colors are also semi-transparent, so they add up when strips overlap, creating a grid effect.

So, instead of coloring in individual spaces in the “grid”, I color in strips formed by connecting four marks in the template. Because the colors used to fill the strips are semi-transparent, the colors in the strips mix where they overlap, making it look like we are coloring in individual spaces when we’re not. This limits what I can do, but it’s still possible to create some nice color schemes.

A time-lapse drawing of a 3-pointed star

I have also implemented two types of time-lapse drawings. The first type simply draws the individual lines used to form the curve one at a time. The second type also includes a fade effect, where older lines fade out as newer lines are drawn in. Because very few people are actually looking at my interactive examples on CodePen, I’m including a gif to show you what the first type of time-lapse drawing looks like. But please try out the examples below—they are really cool!

Time-lapse drawings of a star

Time-lapse drawings of a flower

Time-lapse drawings of an epicycloid

Time-lapse drawings of a nautilus

I’m not sharing any code for coloring in the curves yet because I’m still at the prototyping stage and my tools aren’t very user-friendly, but I can share what I have if anyone wants it. Just leave me a comment. If you’re not a member of Medium, you can message me on Twitter by going to my profile page. You’ll find a link to my Twitter account there.