Curve stitching in code - parabolas, lasers, flash and canvas

May 28, 2014

While most of the attention during Seb Lee-Delisle’s session at smashing conference was focused on the lasers, something else he showed reminded me that I’ve been meaning to explore canvas animation for ages. In just a few lines of code, he created a spinning, colour-shifting shape on the screen.

In primary school we made artworks that were made of coloured thread, stretched between pins in a cloth-covered board. The arrangement of the pins was such that the straight lines of the thread formed curves, and they formed the shape of a scorpion.

It must have been quite a common thing, or maybe just something that one of the teachers at the school did every year, because my sister did something similar - I think hers was a ship. Probably a nice time-consuming activity to keep the kids busy for a while.

Sadly I don’t have it any more - it’s lost to the ravages of time and my parents’ attic, but the notion of straight lines combining to form curves strangely appealed to me. A quick Google hasn’t brought me much enlightenment, but at least I know I didn’t imagine it, and that curve stitching is a thing.

Years ago, in one of my only attempts at Flash animation, I did something similar.

Now, as an attempt to learn a bit of canvas, I’ve done something similar again, using JavaScript.

It’s a half-arsed thing, cobbled together in what little spare time I have, but there’s a certain satisfaction in it, it makes a change from wrangling with clients, and in a small way it’s reminded me of something Seb said at Smashing: You can do genuinely creative things with code.

See the Pen EAyfz by malcomio (@malcomio) on CodePen.