this repo is no longer in development, the EUCLIP project now lives at https://github.com/jamesstaub/euclip-octane
Euclip Drum console is a real-time collaborative web audio rhythm sequencer, and a live coding environment for algorithmic electronic music.
You can create complex euclidean rhythm patterns with a large library of drum samples and write your own custom logic and audio signal chains with javascript.
Euclip is powered by the Cracked web audio library which provides an easy syntax for creating and chaining together web audio nodes, as well as a bunch of useful helpers for creating algorithmic music.
This project is in development, the demo link may have some usability issues.
Euclip projects are made up of tracks, each of which have 2 code editors, one that is executed once on setup, and another which is executed on each step of the rhythm sequence (on-step).
Pre-release TODOs:
- init function is where track nodes are initialized (with this.trackSelector class on all)
- prefill controls attrs based on track's nodes
- cloud function to delete orphan data (moved to new repo)
- test+review permissions
- show/hide public feed
- about / help page
the __()
function is used to select Cracked audio nodes, which have css/jQuery style selecors for id
and class
.
Each Euclip track is made of Cracked node chain, so you can access the various selectors for each track like so:
__(this.sampler) // this.sampler is a string like "#123-track-sampler"
__(this.lowpass) // select the lowpass filter that this sampler is connected to
Once you've selected a node, you can change it's properties with attr()
function
This app uses the web audio library cracked for audio along with NexusUI for interface objects.
__(this.sampler).attr({speed: .5})
imagine a track with the following sequence: 3 hits, spaced between 8 steps.
which, as a javascript array would look like:
[1, 0, 0, 1, 0, 0, 1, 0]
The track's on-step function gets called on each step with the following arguments available
index // the number of the current step (0-7)
data // the value of the current step (0 or 1)
array // the entire sequence [1, 0, 0, 1, 0, 0, 1, 0]
we could then write an on-step function that randomly changes the pitch on every step that has a hit
var randSpeed = __.random(.5, 2); // pick a random decimal between half speed and double speed
__(this.sampler).attr({speed: randSpeed});
- ember components prefixed with
audio-
deal with the cracked audio library. - the audio-service handles global state of audio nodes, to allow initialization, destruction of audio nodes and bindings throughout the app.
- ember components prefixed with
ui-
are nexus ui objects. - all ui components inherit the nexus-ui-mixin, which generalizes some functionality for initialization and onChange events.
- the
.hbs
template must contain an element such as<span id="{{nexusId}}"></span>
for the nexus object to select.
The component must also have properties ElementName
and ElementOptions
for configuration, which is handled in the nexus-ui-mixin. This mixin is also where initialization and destruction of the Nexus object is handled.
audio files are hosted in a google storage bucket
run gsutil cors set bucket-cors.json gs://euclidean-cracked.appspot.com
to allow cors
You will need the following things properly installed on your computer.
git clone <repository-url>
this repositorycd euclidean-cracked
npm install
ember serve
http://localhost:4200.
ember test
ember test --server
npm run lint:hbs
npm run lint:js
npm run lint:js -- --fix
ember build
(development)ember build --environment production
(production)