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.
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:
- Make sure Python is installed.
- Download / Clone this project.
- Open a command line interface.
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!
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
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.
- Make sure Ruby is installed.
- Open a command line interface.
gem install scss
gem install bourbon
scss --watch .
third-party folder. Together these files get compiled into a concatenated
build/tether.js file and a minified
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.
- animations.js Singleton object that holds each prototypical animation.
- 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.
- experience.js The "music video" view.
- 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.
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..
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
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:
- Make sure Node.js is installed.
- Open up a command line interface.
npm install node-minify
This will update both the concatenated and minified files in