Opening Credits, Behind the Scenes
Cameron takes us on a whirlwind tour of the web technologies underneath the hood of his opening credits, and how he put it all together.
Creative coding – having an idea and the ability to implement it.
First off, why have an opening titles roll at a web conference? It sets up the event… inspirations for Cam include Saul Bass title designs; Catch Me If You Can titles; Se7en titles (which sparked a renaissance in title design).
Brainstorming – the title designs for WDS are quite visual, there’s no speaking. Cam sketches ideas, works out what will work together, get the ideas down and work out how to fit them together.
Also for WDS being a web conference… it “behooves you to USE web technology”. Video might be better for Cam’s heart rate; but using web tech will push some new ideas onto your process.
Live video = the web + the real world. Developed the theme for the credits.
Flow – key aspect of the title. How do I get from one idea to another. Can be a technically complex problem – but the answer is “use a lot of duct tape”.
Specific inspirations:
- Chemical Brothers film clip for Star Guitar. Everything visually syncs to the music.
- Waveform from Joy Division Unknown album cover
- “really bad 3d glasses” to get the red/blue blur effect
- video called “Replica” art installation
Technical breakdown:
- Joy Division opening – the landscape is from the music waveform (frequency and volume) grabbed with the Web Audio API (really good API with a clear metaphor driving it, that of a producer’s physical studio – hooking things up). Take colour values from the webcam (with WEBRTC); and apply those colours to the lines. Put that into 3.js (webgl).
- 3D lettering: CSS3. Didn’t do text in WEBGL as that’s a pain in the arse. CSS3 is great with text; even if the performance isn’t so great.
- Bridged CSS3 to WEBGL for the 3D shapes.
- MASH IT UP! Moving from CSS to WEBGL is not neat, don’t dig into that code too much.
- 3D shapes formed into letters with canvas and random generation of shapes mapped to on/off pixels mapped from the original text.
- Forest scene – layered PNGs for the screen; CSS3 text and text shadow for blurring.
- Sliced video was a canvas manipulation. (Note for anyone who skipped the first video, the colours were from Cam waving glow sticks at his laptop!)
