Interactive Audiovisual Illustration

An interactive audiovisual illustration composed within the p5.js editor.

Process

Once I planned out the basic composition, I used a brush pen to physically draw the stems, leaves, and splashes of water on paper. I later vectorized them with Adobe Illustrator and added paper texture. These assets were then brought into the p5.js editor where I composed user interactions through the keys typed.

Here is a screenshot of the p5.js editor. The code above shows a function that triggers specific images and sounds to play based on the corresponding key that is typed.
This is a screenshot from the Adobe Illustrator file. The texture is added to the vectorized illustrations by overlaying a paper texture and using blending modes.

Results

Press the keys on your computer or on the screen to play the various layers of the audiovisual illustration. Press the same key to deactivate the layer.