Learning the rules

I made a simple interactive doodle in JS Canvas! Click on the canvas to add points, hit ‘reset’ to reset the image. Simple.


I realized recently that I’ve done a lot of stuff this year that hasn’t made it on to this blog. To fix that, here are some quick posts about sketches I’ve done and what I’ve learned. First up is an expansion of my dynamic drawing toolkit inspired by a doodle that my friend Aidan sent me:

I really love everything that’s going on in this, The gradients, the rounding in the corners and the shadows look like they should be part of a game or a music video.

This original image was produced in in Adobe Illustrator, but after the projects at work for Cheetos and Allstate, I’ve been thinking a lot more about what’s actually required to produce images like this: the offsets and the radii, where to draw the circles and how to invert everything for a convex angle rather than a concave one.

There’s an excellent library called paper.js that has some overlap with what I’ve produced here. I still value the experience of writing the functionality as it exists here. Ultimately I’d like to integrate the toolkit I’ve produced with paper, though, so the wider community can make use of it. In the meantime, though, click and be merry!

[UPDATE: After playing around briefly with the brilliant Clipper.js I can wholeheartedly recommend their system over anything I’ve built in this instance. I still value the experience of working it out on my own, but they’ve done a spectacular job and I’ll be using theirs from now on! ]