smallmultiples / south.im

Web Directions South 2013 Opening Titles

WDS 2013 Opening Titles

The opening titles for Web Direction South 2013: a entirely browser-based animation powered by WebGL, browserify and npm.

Check out the finished product at run.south.im.

Setup

To get the code on your system and install the required dependencies:

git clone [e-mail]:smallmultiples/south.im.git
cd south.im
npm install

If you're just looking to get it running locally:

npm start

Otherwise, you can run make to set off the following tasks:

# Starts a local development server using beefy
make start
# Builds the production-ready assets
make build
# Removes any generated assets
make clean
# Visualise file size consumption using disc
make disc
open dist/disc.html
# Visualise the project's dependency tree using colony
make colony
open dist/colony/index.html

Related Code

If you're wondering about specific bits of functionality, most of the final code is actually contained in modules which are freely available on npm. These ones might be of particular interest:

• browserify: handles building the final script, letting us use CommonJS modules from npm and elsewhere.
• glslify: a browserify-like bundler for GLSL shaders.
• ndarray: a very versatile/performant module for handling multidimensional arrays with a wealth of compatible modules.
• level.js: a level* API wrapper for IndexedDB. Used in combination with continuous-storage to cache generated terrain.
• webworkify: Used in combination with worker-wrap for generating terrain meshes in a separate thread.
• perlin: a Javascript perlin noise implementation, used to generate the terrain.
• ndarray-continuous: an API for handling dynamic grids of ndarrays, so we can easily load/unload chunks of terrain dynamically.
• heightmap-mesher: takes a heightmap and converts it into 3D triangles.
• orbit-camera: a simple arcball camera built on top of gl-matrix.
• talkie: handles queueing events in a timeline such that they can be triggered at certain parts of the song.
• lut: generates generic color tables as a starting point for color grading.
• gl-matrix: a very performant JS matrix library.
• gl-now: a variant of game-shell for WebGL demos to handle bootstrapping the 3D context.
• glsl-point-light: A reusable point light function for GLSL.
• glsl-fog: A reusable set of fog functions for GLSL.
• webgl-noise: perlin/simplex/classic noise in GLSL.
• web-audio-analyser: A drop-in module for getting audio analysis data from the Web Audio API.
• beats: naive beat detection.
• dot-obj: A parser for the .obj geometry format. Used to include models exported from Blender.

Authors

• Hugh Kennedy: design and development.
• François Robichet: sound and modeling.
• Jack Zhao: concept and creative direction.

The song included in the credits is Clones by Thomas Barrandon, you should check out his other work!

It's also worth taking a look at hackers.txt for a full list of the authors whose modules were used in the project.

License

Unless otherwise specified, all source code is licensed under the MIT license included in this repository.

Certain project-specific files have been licensed under the Mozilla Public License. These files are stated as such explicitly at the beginning of the file in question.

With the exception of the Web Directions South logo, images and 3D geometry files are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License: