Make Canvas use more callbacks

js/HuesCanvas.js

@@ -25,6 +25,9 @@
 function HuesCanvas(element, aContext, core) {
     'use strict';
     this.aContext = aContext;
+    core.addEventListener("newimage", this.setImage.bind(this));
+    core.addEventListener("newcolour", this.setColour.bind(this));
+    core.addEventListener("beat", this.beat.bind(this));
     this.core = core;
 
     this.needsRedraw = false;
@@ -64,7 +67,7 @@ function HuesCanvas(element, aContext, core) {
     this.setBlurQuality("high");
     this.setBlurDecay("fast");
     this.canvas = document.getElementById(element).getContext("2d");
-    window.addEventListener('resize', this.resizeHandler(this));
+    window.addEventListener('resize', this.resize.bind(this));
     this.resize();
 
     this.snowing = false;
@@ -74,12 +77,15 @@ function HuesCanvas(element, aContext, core) {
     this.snowflakes = [];
 
     this.animating = true;
-    requestAnimationFrame(this.getAnimLoop());
+    requestAnimationFrame(this.animationLoop.bind(this));
 }
 
-HuesCanvas.prototype.resizeHandler = function(that) {
-    return function() {that.resize();};
-};
+HuesCanvas.prototype.settingsUpdated = function() {
+    this.setSmartAlign(localStorage["smartAlign"]);
+    this.setBlurAmount(localStorage["blurAmount"]);
+    this.setBlurDecay(localStorage["blurDecay"]);
+    this.setBlurQuality(localStorage["blurQuality"]);
+}
 
 HuesCanvas.prototype.resize = function() {
     // height is constant 720px, we expand width to suit
@@ -180,11 +186,6 @@ HuesCanvas.prototype.intToHex = function(num) {
     return '#' + ("00000"+num.toString(16)).slice(-6);
 };
 
-HuesCanvas.prototype.getAnimLoop = function() {
-    var that = this;
-    return function() {that.animationLoop();};
-};
-
 HuesCanvas.prototype.animationLoop = function() {
     if (this.colourFade) {
         var delta = this.aContext.currentTime - this.colourFadeStart;
@@ -244,11 +245,14 @@ HuesCanvas.prototype.animationLoop = function() {
         this.drawSnow();
     }
     if(this.animating) {
-        requestAnimationFrame(this.getAnimLoop());
+        requestAnimationFrame(this.animationLoop.bind(this));
     }
 };
 
 HuesCanvas.prototype.setImage = function(image) {
+    if(this.image == image) {
+        return;
+    }
     this.needsRedraw = true;
     this.image = image;
     // Null images don't need anything interesting done to them
@@ -293,11 +297,14 @@ HuesCanvas.prototype.syncAnim = function() {
 };
 
 HuesCanvas.prototype.setColour = function(colour, isFade) {
+    if(colour.c == this.colour) {
+        return;
+    }
     if(isFade) {
-        this.newColour = colour;
+        this.newColour = colour.c;
     } else {
         this.stopFade();
-        this.colour = colour;
+        this.colour = colour.c;
     }
     this.needsRedraw = true;
 };

js/HuesCore.js

@@ -63,10 +63,11 @@ function HuesCore(defaults) {
          * Image object is passed.
          */
         newimage : [],
-        /* callback newimage(image)
+        /* callback newcolour(colour, isFade)
          *
          * Called on colour change.
-         * Colour object is passed.
+         * colour: colour object.
+         * isFade: if the colour is fading from the previous value
          */
         newcolour : [],
         /* callback newmode(mode)
@@ -99,7 +100,12 @@ function HuesCore(defaults) {
          * Called when the song actually begins to play, not just when the
          * new song processing begins
          */
-        songstarted : []
+        songstarted : [],
+        /* callback settingsupdated()
+         *
+         * Called when settings are updated and should be re-read from localStorage
+         */
+        settingsupdated : []
     };
 
     var that = this;
@@ -473,7 +479,6 @@ HuesCore.prototype.setImage = function(index) {
         this.imageIndex = -1;
         this.lastImageArray = [];
     }
-    this.renderer.setImage(this.currentImage);
     this.callEventListeners("newimage", this.currentImage);
 };
 
@@ -518,8 +523,7 @@ HuesCore.prototype.randomColour = function(isFade) {
 HuesCore.prototype.setColour = function(index, isFade) {
     this.colourIndex = index;
     var colour = this.colours[this.colourIndex];
-    this.renderer.setColour(colour.c, isFade);
-    this.callEventListeners("newcolour", colour);
+    this.callEventListeners("newcolour", colour, isFade);
 };
 
 HuesCore.prototype.getBeat = function(index) {
@@ -532,7 +536,6 @@ HuesCore.prototype.getBeat = function(index) {
 
 HuesCore.prototype.beater = function(beat) {
     this.callEventListeners("beat", this.getBeatString(), this.getSafeBeatIndex());
-    this.renderer.beat();
     switch(beat) {
         case 'X':
         case 'x':
@@ -579,7 +582,6 @@ HuesCore.prototype.beater = function(beat) {
                     break;
                 }
             }
-            this.renderer.stopFade();
             this.renderer.doColourFade(fadeLen * this.beatLength);
             this.randomColour(true);
             break;
@@ -665,16 +667,13 @@ HuesCore.prototype.changeUI = function(index) {
         this.callEventListeners("newmode", this.isFullAuto);
         this.callEventListeners("newsong", this.currentSong);
         this.callEventListeners("newimage", this.currentImage);
-        this.callEventListeners("newcolour", this.colours[this.colourIndex]);
+        this.callEventListeners("newcolour", this.colours[this.colourIndex], false);
         this.callEventListeners("beat", this.getBeatString(), this.getSafeBeatIndex());
     }
 };
 
 HuesCore.prototype.settingsUpdated = function() {
-    this.renderer.setSmartAlign(localStorage["smartAlign"]);
-    this.renderer.setBlurAmount(localStorage["blurAmount"]);
-    this.renderer.setBlurDecay(localStorage["blurDecay"]);
-    this.renderer.setBlurQuality(localStorage["blurQuality"]);
+    this.callEventListeners("settingsupdated");
     switch (localStorage["currentUI"]) {
     case "retro":
         this.changeUI(0);