Tether is an interactive web application created by @jonobr1 in collaboration with Plaid (http://plaid.co.uk). The track is accompanied by a series of graphic shapes that gradually evolve as the music progresses.
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://warprecords.github.io/tether.
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:
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
stylesfolder 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.scssfile and automatically compile the
main.cssis the file actually used on the site, but
main.scssaffords some nice features like variables when writing css and mixins for css3 polyfill.
gem install scss
gem install bourbon
scss --watch .
The final command initializes a script that watches for when
.scssfiles change and updates their
.csscounterpart. Read up on both SCSS and Bourbon to familiarize yourself with the possibilities.
third-partyfolder. Together these files get compiled into a concatenated
build/tether.jsfile 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.
To recap in prose:
main.jsis 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.jsare where the bulk of the logic come from.
lobby.jsis responsible for the page with the Tether logo on it and
experience.jsis the "music video" portion of the project.
experience.jsleverages 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.jsonto 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
120BPMand another at
40BPM. Lastly, there are
data/audio/clipswhich are multi-second fragments from the stems to be used in
At the bottom of
index.htmlthere is a large commented out block of
scripttags. Uncomment this and comment out the 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:
npm install node-minify
This will update both the concatenated and minified files in