Exhibit 01 was created using the p5.js library in conjunction with matter.js, a popular 2D physics engine. The size of each circle object is controlled by the volume of the music and all of the circle objects have collision
detection, friction, and gravity thanks to the physics engine. All the calculations are done in the matter.js physics engine while p5.js processes the audio and does all the drawing on the HTML canvas.
Exhibit 02 was created using p5 along with ml5.js, a library which provides a friendly way to explore machine learning in the browser. ml5.js allows you to use various neural nets and pretrained models with ease and was made to work especially
well with p5. I used face-api.js through ml5.js to do real-time face tracking in the browser. ml5.js provided all the (x,y) coordinates of the face landmarks and again p5 did the drawing and mapped the music volume to the size of the eye’s
pupils.
Exhibit 03 was made using p5’s WebGL mode which enables 3D rendering in the browser. WebGL is a program which allows interactive 2D and 3D graphics to run on the web. The syntax is very complex and so there are many other libraries that work
on top of it to simplify the creative process such as three.js, Unity (game engine), and in my case p5.js. The shifting terrain is a mesh made using Perlin noise which is a randomization algorithm that mimics nature keeping it smooth and
connected.The camera utilises orbit control which allows the user to look around the 3D space with mouse interactions. Once again p5 is taking the audio and making it control the size of the cubes.
First off I want to give a big shout out to Dan Shiffman aka The Coding Train! His tutorials on YouTube have taught me everything I know about creative coding with Processing and p5.js. If you are at all inspired by my project and
want to try making your own awesome digital art, click here to start→
THE CODING TRAIN!
Sameer Desai is an engineer based in Boston, Massachusetts. In his free time he dabbles in creative coding and digital music production. If you have any questions or comments contact him here: (click to copy email)
