Sketching in Code

For a variety of classes at the Design & Technology program at Parsons, I have been creating interactive sketches in code, mostly in JavaScript.

This was one of my first projects in code. I wanted to experiment 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 seem to utilise the full potential of the wonky nature of the sketch.

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

This project was an assignment for my computation class, where I had to combine static sketches of different figures created by my classmates into one code sketch. I was able to figure out how to manipulate the figure and the slider reveal, combining two different sketches, without much difficulty. The trickiest part of this sketch was when I started drawing the leaves, and decided I wanted them to fall and loop back at different speeds. Figuring those out took a fair bit of time and troubleshooting.

This project was challenging in unexpected ways - I assumed I'd have more difficulty building the corpse on p5 and making it interactive, but that part was quick to come together. I had more trouble figuring out a way to combine all three - very different - sketches, and figuing out the business with the leaves.*

This rotating circles illusion is one of my favourite optical illusions, so I wanted to see if I could recreate it myself. The circles look like they're rotating around, but they're actually just moving back and forth along a line at different intervals. The combined effect is that it looks like a larger circle rotating around. Click to see how the circles are moving!

I ran into some trouble figuring out how to make the circles move at different positions, so they could resemble a circle as they moved along their lines. I tried a few different time-dependent strategies, but those did not give me the result I was looking for. Finally, I was able to use a phase shift to each of the sine curves to alter the position of each circle.*

This animation is a representational sketch of people near Madison Square Park in New York City. During a week of rapid prototyping, I recorded every colour of clothing worn by a passerby in the span of 15 minutes, reduced proportionately so as to not overcrowd the screen. I chose to use cross sections of the location to represent the space because I feel like they represent well other characteristics of the place - and portray the overall personality of the area.*

* best viewed on a desktop or laptop computer.