Creative coding for the web: A Cauldron of Canvas, SVG, webGL and webAudio

April 18, 2018: Kingston Developers Meetup, Kingston, Ontario

View the slidedeck

Leading slide image

Random points are distributed along pathways in the shape of a heart. An audio input modifies the size of each point, which are themselves hearts.

This is a talk I gave for ygkdevs, a developer meetup in Kingston, Ontario. In this talk I cover the art of "functionless" programming — creative coding! The joke here is that creative coding has no purpose, rather than being analogous to "object oriented". In this talk, I go over the main tools I use to make audio and visual experiments for the web, namely HTML5 canvas for pixel based work, data-driven documents d3.js for 2D vector graphics and scalable visualizations, three.js for 3D immersive worlds in webGL and webAudio for controlling sound.

Some embedded applications were included in the talk to demonstrate some of the concepts, specifically:

canvas: this application demonstrates how to set up a moving square.

threejs: a spinner explains orbit controls and lighting.

webAudio: this application makes a sound each time the ball bounces off the edge of the screen.