Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

Opening Credits, Behind the Scenes

Cameron Adams at South 2012
Sign up for a free membership to watch this and hundreds of other videos
  • Details
  • Keypoints

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!)

You may also be interested in

    Thumbnail for From Zero to Four Million

    From Zero to Four Million

    Thumbnail for In conversation with a browser

    In conversation with a browser

    Thumbnail for Practical Uses For Container Queries

    Practical Uses For Container Queries

    Thumbnail for Disruptive Design: The designer as an agent of change

    Disruptive Design: The designer as an agent of change

    Thumbnail for Life in type

    Life in type

    Thumbnail for Measurable Design

    Measurable Design

    Thumbnail for Putting Research in its Place

    Putting Research in its Place

    Thumbnail for QA with Yoav Weiss

    QA with Yoav Weiss

More presentations from South 2012

    Thumbnail for Beyond Mobile: Where No Geek Has Gone Before

    Beyond Mobile: Where No Geek Has Gone Before

    Thumbnail for The Flower, the Field and the Stack

    The Flower, the Field and the Stack

    Thumbnail for The Incubator Experience

    The Incubator Experience

    Thumbnail for Responding to Responsive Design

    Responding to Responsive Design

    Thumbnail for Web Forms with Quaid-JS

    Web Forms with Quaid-JS

    Thumbnail for Content Strategy for the Future

    Content Strategy for the Future

    Thumbnail for What We Talk About When We Talk About the Web

    What We Talk About When We Talk About the Web

    Thumbnail for Buttons are a Hack

    Buttons are a Hack

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2023