Ripple (Processing JS experiment)


Over the summer I have been working on designing a 12 week module in Creative Coding. The intended skill level is complete beginner and as the weeks go by the students will learn from the ground up the basics of programming. The aim of the brief is for each student to create very simple ambient game whereby the users actions stimulate environments through visual and auditory means. The Processing Development Environment (PDE) has been chosen due to the simplicity of the setup, javascript mode extension and its one click export for the web. Another benefit of this environment is its complete separation from HTML and CSS, which for beginners I have found, can be quite difficult to understand the relationship between each component.

The experiment below is the my first attempt at running through the module myself using the Design Thinking Process outlined by IDEO. Obviously, I didn’t have 12 weeks but I tried to keep true to the structure of the module even with a shorted time scale. Running through the module before the terms starts has hopefully allowed me to identify some key obstructions and complex tasks that the student might face. One such complexity was finding a very simple way of incorporating sound that could be triggered fast and layered over and over. I tried many different libraries and even wrote my own using the new HTML5 Web Audio APIs but in the end settled with a very good javascript library Howler.js. 

ONLY TESTED IN CHROME (the audio samples used are not final and have been sourced in a rush from

Click The Rectangle >>