31 Creative Code Sketches

TLDR; Small creative code experiments, viewable here.

Throughout January (2021) I’ve been trying to consistently do some ‘creative coding’. Inspired by prompts from Codecember and Genuary. I have particularly enjoyed the prompts from Codecember - varied, with explanations and links to explore more around each topic. It reminded me of how I started coding (with processing, and later with p5 js). Although it has been hard to find motivation and energy to work on it everyday, after a day of dev work, I will have a series of foundations to start from if (when, hopefully) I want to experiment more.

I didn’t use p5 js but interacted directly with the HTML canvas api, as a learning exercise. Things I’ve learned ->

Setting up canvas with svelte
Using snowpack as a dev (non) bundler
Periodic functions
More geometry
Lines, arcs, ellipses, rects; in SVG and canvas
Bitwise operators like XOR
Growth algorithms
Vector maths

There are some screenshots from various sketches below, but all the rest are viewable here. The code is on Github.

I think my favourite is number 31 -> try pressing ENTER, BACKSPACE and SPACE to clear the canvas. Then you can draw on the canvas, and click to see growth over your drawn movements.

The sketches are not optimised, and some of the canvas calculations may make the device hot/slow down/turn the fans on. And they may not work well on mobile. But doing one sketch a day is intensive, and I didn’t have the time or motivation to optimise too much.

Hopefully I can incorporate more of this into this website -> in particular I would like to make some photos interact with code and potentially the user.

Back to blog