31 Creative Code Sketches

TLDR; Small creative code experiments, viewable here.

Screenshot of a sketch

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.

Screenshot of a sketch

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.

Screenshot of a sketch

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.

Screenshot of a sketch Screenshot of a sketch Screenshot of a sketch Screenshot of a sketch Screenshot of a sketch Screenshot of a sketch Screenshot of a sketch Screenshot of a sketch Back to blog
Random photo