Add interpolation for synced animation frames - much smoother

js/HuesCanvas.js

@@ -34,7 +34,7 @@ function HuesCanvas(element, aContext, core) {
 
     this.animTimeout = null;
     this.animFrame = null;
-    this.animSync = false; // for synced anims
+    this.lastBeat = 0;
 
     // set later
     this.blurDecay = null;
@@ -243,19 +243,28 @@ HuesCanvas.prototype.setImage = function(image) {
     }
 }
 
+HuesCanvas.prototype.beat = function() {
+    this.lastBeat = this.aContext.currentTime;
+}
+
 HuesCanvas.prototype.syncAnim = function() {
     var song = this.core.currentSong;
     if(!song) { // fallback to default
        return;
     }
-    // This loops A-OK because the core's beatIndex never rolls over for a new loop
+    var index = this.core.beatIndex;
-    var beatLoc = (this.core.beatIndex / song.charsPerBeat) % this.image.beatsPerAnim;
+    // When animation has more frames than song has beats, or part thereof
-    this.animFrame = Math.floor(this.image.bitmaps.length * (beatLoc / this.image.beatsPerAnim));
+    if(this.lastBeat && this.core.beatLength) {
-    // for build
+        var interp = (this.aContext.currentTime - this.lastBeat) / this.core.beatLength;
-    if(this.animFrame < 0) {
+        index += Math.min(interp, 1);
-        this.animFrame += this.image.bitmaps.length;
     }
-    this.animSync = true;
+    // This loops A-OK because the core's beatIndex never rolls over for a new loop
+    var beatLoc = (index / song.charsPerBeat) % this.image.beatsPerAnim;
+    
+    var aLen = this.image.bitmaps.length;
+    this.animFrame = Math.floor(aLen * (beatLoc / this.image.beatsPerAnim));
+    // Because negative mods are different in JS
+    this.animFrame = ((this.animFrame % aLen) + aLen) % aLen;
 }
 
 HuesCanvas.prototype.setColour = function(colour, isFade) {

js/HuesCore.js

@@ -264,7 +264,6 @@ HuesCore.prototype.songDataUpdated = function() {
 }
 
 HuesCore.prototype.resetAudio = function() {
-    this.samplePosition = 0;
     this.beatIndex = 0;
     this.position = 0;
     this.songDataUpdated();
@@ -346,6 +345,7 @@ HuesCore.prototype.getBeat = function(index) {
 
 HuesCore.prototype.beater = function(beat) {
     this.userInterface.beat();
+    this.renderer.beat();
     switch(beat) {
         case 'X':
         case 'x':