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.
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.
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.
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.
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!
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.