nsynq-js

*nsynq

Schedule JavaScript operations along a timeline progression defined by n

About

CSS animations are nice, but what if you want to do some heavier things? Something more interactive and in sync with other tandem operations like audio and video? *nsynq could be your friend indeed.

I wanted to have some operations play at certain points on a timeline, e.g. co-ordinated to specific streaming music files, and I wanted a really easy way to notate the points on the timeline, so I built this! It seems to work OK so far...

Installation

Node.JS

npm install nsynq-js

Bower

bower install nsynq-js

Dependencies

Works out of the box. Doesn't require any external libraries.

Usage

*nsynq assumes that you've got a timeline that progresses from zero to timelineLength. Any point along that timeline is defined as n. We also define an object that holds the operations you wish to perform and any expression statements that those operations will get fired at point n:

var output = document.getElementById('output');

// The length of the timeline to render. Must always have a fixed length
var timelineLength = 200;

// The operations object containing the expressions and operations to fire
var operations = {
  'when n eq 0': function () {
    output.innerHTML = '<h1>Let us begin...</h1>';
  },
  'do per 1 n': function () {
    output.innerHTML += '<br>&nbsp;&nbsp;&nbsp;' + n + ' : ';
  },
  'when n around 40:2': function ( n ) {
    output.innerHTML += ' (around 40:2, matches >= 38 && <= 42)';
  },
  'when n gte 150, do approx 10:2 n': function ( n ) {
    output.innerHTML += ' <strong>Holla at you from ' + n + '</strong>';
  },
  'when n within 50-150, do per 10 n': function ( n ) {
    output.innerHTML += ' (within 50-150, per 10 n)';
  },
  'do per 8 n': function ( n ) {
    output.innerHTML += ' <em>(' + n + ' is an 8 baller)</em>';
  },
  'when n eq 200': function () {
    output.innerHTML += '<h3>... Baby, bye-bye-bye (the end)</h3>';
  }
};

var nsynqWatcher = new Nsynq( timelineLength, operations );
var n = 0;

function animate() {
  requestAnimationFrame( animate );

  if ( n <= timelineLength ) {
    nsynqWatcher.seek(n);
    n++;
  }
}

animate();

See the basic example to view how the above code behaves.

Todo

• Pre-computing makes it faster when playing back timeline operations, but perhaps I could put in a switch to choose between dynamic or static timeline behaviours
• Figure out better compensation from frame skipping (approx and around expressions can kind of do that, but it's not entirely perfect)

Releases

0.1.0-alpha

• Initial version of API behaviours

Licence

MIT