Sketching in Code

For a variety of projects, prototypes, and classes, I have been experimenting with creating interactive sketches in code, mostly in JavaScript.

This was one of my first projects in code. I was experimenting with abstract faces and the way they can change; never sitting still. I drew a series of sketches of fragmented faces as I was ideating on what to do. Initially, I knew I wanted to play with colour, but my originial idea was to zoom in and out on it based on the mouse position. When I started to build that thought, it didn't utilise the full potential of the wonky nature of the sketch, and so I shifted gears to focus on a more energetic interpretation of the sketch.

The final product is this moving, dynamic face, that changes colour based on how the user hovers over it.*

This sketch is a computational recreation of an untitled piece by Anni Albers. It is an exploration of randomisation in code and the kinds of outcomes it can lead to.

The geometries of the sketch do not match Albers’ exactly. I focused more on conceptually pulling the geometric form than forming an exact facsimile. Albers’ geometry is obviously more articulate and deliberate, while the recreation generated in code seems less articulate. The erratic nature of computerised randomisation seems to rob the artwork of some of the intentionality behind it.*

An exploration of parametric art. This sketch aimed to experiment with how a generative design piece using primitives could work, and what kinds of parameters I can use to control the piece.

I went through a few rounds of iteration on this sketch. I aimed to create a loop animation and identify as many parameters as possible that could be user-controlled. I observed the effects of these parameters, and how certain sliders invited more interaction and certain invited less. I like the layered aspect of it, and the constant movement.*

A couch co-op microgame built with a classmate in p5.js and p5.play. The player (arrow keys) has to get to the ice cream truck while avoiding fire and the broccoli (WASD) has to stop them. This short game was an interesting exercise in dealing with multiple users and letting them work with multiple moving parts.

Animation and 3D in code. Since most of my 3D experience had been in software up to this point, this short three.js sketch let me explore how to work with 3D primitives and building in code, and how to incorporate animation in the building process.

Inspired by Alexander Chen’s fascinating music visualisations, I used tone.js and p5.js to recreate a string instrument playing notes when struck. This sketch was also an exploration of computational music, and how it is inspired by, differs from, and can add to traditional music. This particular sketch led to further explorations on how computational and analog music intersect, and how the body itself can be treated as an instrument in the middle.

* best viewed on a desktop or laptop computer.

MORE PROJECTS