Over the course of a week, I experimented with alternative digital drawing methods that employ a range of uncommcon artistic expressions, involving voice, physics, keyboard presses, sound, and mirroring.
Role: Software design, artistic direction, coding
Tools: Javascript, P5.js, matter.js, HTML, CSS
Duration: 1 week
Drawing with Music
I’m interested in visualizing music and wondered if this visualization process can be generative and programmatic. Responding to different musical input, this sketch creates a variety of composition of circles. The size of the circle corresponds to the amplitude of the music, while the quantity depends on the changes in tones and loudness of the song.
These two recordings are made with Spear of Justice, a punchy, fasted-paced, battlecry, and Snowdin Town, a heartwarming piano song.
Virtual Draw
I was interested in exploring the relationship among physical body movements and digital drawings, so I created an app that tracks the movement of a green pen. For every frame of the video, the app locates the greenest pixel across the screen. A line is drawn to connect the pixels that are found across multiple frames as the video plays.
In another variation of the sketch, dots are drawn in place of lines.
Pattern draw
This drawing app allows users to create mirrored imageries.  Drawn lines are reflected on the vertical and the horizontal axis, and the color of the pen also changes whenever lines of different colors intersect. The resulting drawing is quite mesmerizing to look at.
Drawing balls using physics
I thought it would be pretty fun if drawings lived in a world where laws of physics is constantly being applied to them. Instead of utilizing the canvas as a flat surface, this app transforms drawing space into a simulated environment. A user holds down the mouse button to generate a circle that gradually increases in size, and by letting go of the mouse, the circle enters into a world of physics. I used the physics engine matter.js to manipulate gravity and bounciness.
Drawing with voice commands
I was interested in drawing with only voice commands. In this quicky sketch, I used a speech recognition library called p5.speech and  identified color keywords in a user's speech to generate rectangles of different colors.
Drawing with speech
Generating Buildings
This generative app creates sketches of blocks with different sizes in a limited color palette. I made this app as a quick demo, but the idea is that buildings with different windows, roofs, doors, and facades can be generated on a grid of streets.
Manipulating shapes and colors with keypresses
Experimental Line Draw
Drawing swirls
Drawings in a small section of the canvas is rotated multiple times to create seamless swirls.
Conclusion
I had a lot of fun coming up with ideas for different drawing apps. During the coding process, I learned to not be afraid to seek out external resources for help. Throughout the week, I read through a chunk of the p5.js reference, as well as utilized various javascript libraries. Creative coding is something that I’ll definitely experiment more with on my own.

Other Porjects

Back to Top