Need help with tether?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

warprecords
205 Stars 23 Forks Other 45 Commits 0 Opened issues

Description

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.

Services available

!
?

Need anything else?

Contributors list

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://warprecords.github.io/tether.

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
 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/
.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.