Tether

Tether is an interactive web application created by @jonobr1 in collaboration with Plaid. The track is accompanied by a series of graphic shapes that gradually evolve as the music progresses; you can manipulate what you hear by clicking and dragging your mouse — or, if watching on your smartphone or tablet, touching and dragging on the screen. This repository holds all the assets and source code for the site http://tether.plaid.co.uk.

Setup

Because Tether is a simple website, it's relatively easy to boot up and tinker with on your own machine. Since the application relies on a number of asynchronous requests, you'll need to run a local server. We recommend Python's SimpleHTTPServer. If you have a Mac this is already installed. The steps are as follows:

Local Server

1. Make sure Python is installed.
2. Download / Clone this project.
3. Open a command line interface.
4. Type cd path/to/tether/project
5. Type python -m SimpleHTTPServer

The server will default to port 8000. Open up a web browser and go to http://localhost:8000. You should see the Tether logo load and you have successfully setup your local server!

Styling

The styling and layout of Tether like all websites is built on css which you can find in the styles folder of the project. However, the project leverages two libraries in order to speed up styling: SCSS and Bourbon. Following these steps will allow you to edit the styles/main.scss file and automatically compile the styles/main.css. The main.css is the file actually used on the site, but main.scss affords some nice features like variables when writing css and mixins for css3 polyfill.

1. Make sure Ruby is installed.
2. Open a command line interface.
3. Type gem install scss
4. Type gem install bourbon
5. Type cd path/to/tether/project/styles
6. Type bourbon install
7. Type scss --watch .

The final command initializes a script that watches for when .scss files change and updates their .css counterpart. Read up on both SCSS and Bourbon to familiarize yourself with the possibilities.

JavaScript

The bulk of the "content" you see on the site is made with JavaScript. Tether relies on three emerging technologies for the browser: Canvas2d, WebGL, and the Web Audio API. There is a src folder in the project that represent all the different modules and logic. They rely on extrinsic JavaScript files in the third-party folder. Together these files get compiled into a concatenated build/tether.js file and a minified build/tether.min.js file.

N.B: This project was concepted and developed on an accelerated timeline so the coherence and modularity is tenuous at best. Please don't refer to this project for best practices.

• src
  • animations.js Singleton object that holds each prototypical animation.
  • animations/
    • bass.js
    • drone.js
    • hats.js
    • high-bass.js
    • whip.js
  • camera.js Camera object for Two.js to conveniently move the scene.
  • effect.js GLSL Fragment Shader for WebGL enabled browsers.
  • effects-view.js Three.js Scene to take Two.js scene as a texture for WebGL enabled browsers.
  • grid.js Class to dictate position of animations.
  • main.js Handles all controllers and view logic.
  • playback.js Class to manage when animations should play.
  • pool.js Class to recycle and keep a hard limit on instantiated animations.
  • sound.js Class to abstract Web Audio API into a friendly api.
  • starfield.js Class to draw stars in the background.
  • trail.js Class to draw user input.
  • views/
    • about.js
    • buy.js
    • embed.js
    • experience.js The "music video" view.
    • lobby.js
    • share.js
  • zui.js Dependency of Camera to do Google Maps style zooming and panning matrix transformations.

To recap in prose: main.js is executed on page load and dictates which view is visible and active. The views share a lot in common, but don't really have an underlying object or class that they inherit from. lobby.js and experience.js are where the bulk of the logic come from. lobby.js is responsible for the page with the Tether logo on it and experience.js is the "music video" portion of the project. experience.js leverages these other files, loading sounds adding additional interaction to the canvases, etc..

Assets

In addition to imagery, Tether relies on a compiled JSON data object data/triggers.json to dictate when animations should fire. These values are a blend of midi data, sound processing, and analog recording. Tether also relies on audio files. There are two tracks, one at 120BPM and another at 40BPM. Lastly, there are data/audio/clips which are multi-second fragments from the stems to be used in lobby.js.

Build Process

At the bottom of index.html there is a large commented out block of script tags. Uncomment this and comment out the <script src="./build/tether.min.js"></script> line in order to dev. This way you can edit individual files and refresh the page to see changes. However, if you've made changes that you'd like to minify then follow these steps:

1. Make sure Node.js is installed.
2. Open up a command line interface.
3. Type cd path/to/tether/project
4. Type npm install node-minify
5. Type node ./utils/build

This will update both the concatenated and minified files in build/.