Added generic numeric mapping functions.

Changed library code to favour use of objects over arrays.

Implemented changes in text.js.

src/mapping/generic.js

@@ -0,0 +1,104 @@
+// TODO: add for width
+// TODO: add for height
+// TODO: add for background
+
+import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
+
+// TODO: Figure out how to not need this defined multiple times.
+/**
+ * @callback interpolator
+ * @param {number} current the current value.
+ * @param {number} dest the destination value.
+ * @param {number} frameDelta the time elapsed since the last update.
+ * @returns {number} the new current value.
+ */
+
+/**
+ * @callback VisualizerUpdateManager.visualizerRangedUpdateListener
+ * @param {number} timeDelta elapsed time since last update.
+ * @param {number} bins the bins of the range.
+ */
+
+/**
+ * @callback VisualizerUpdateManager.visualizerBinUpdateListener
+ * @param {number} timeDelta elapsed time since last update.
+ * @param {number} amplitude The amplitude of the associated bin.
+ * @param {number} ampDelta change in amplitude of the frequency bin.
+ */
+
+/**
+ * 
+ * @callback numericalGetter
+ * @returns {number} The number this value currently represents.
+ */
+
+/**
+ * @callback numericalSetter
+ * @param {number} value The new numerical value to update to.
+ */
+
+/**
+ * Maps the average of a range of bins to numerical value defined by a getter and a setter.
+ * 
+ * @param {object} conf A configuration for how to map a numerical value.
+ * @param {number} conf.minVal The minimum value of the numerical value.
+ * @param {number} conf.maxVal The maximum value of the numerical value.
+ * @param {number} conf.lowerBin The lower bin of the range of bins this value is to be mapped to.
+ * @param {number} conf.upperBin The upper bin of the range of bins this value si to be mapped to.
+ * @param {numericalGetter} conf.getter The getter callback to be used to get the current number.
+ * @param {numericalSetter} conf.setter The setter callback to be used to set the new number.
+ * @param {interpolator} conf.interpolator The interpolation function to use.
+ * @param {VisualizerUpdateManager} conf.visUpdateManager the visualizer update manager this mapping corresponds with.
+ * @param {boolean} [conf.reversed = false] If true, then high amplitudes will be mapped to low values and vice versa.
+ * @returns {{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} An object containing the lower and upper bounds for the range of a listener, which is also in the object.
+ */
+export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, getter, setter, interpolator, visUpdateManager, reversed = false }) {
+    const rangedListener = {
+        lower: lowerBin,
+        upper: upperBin,
+        listener: (timeDelta, bins) => {
+            const normalBins = [...bins];
+            // TODO: Future: add weighting / distribution system?
+            let average = 0;
+            for (let i = 0; i < normalBins.length; i++) {
+                normalBins[i] = normalBins[i] / 255.0;
+                average += normalBins[i];
+            }
+            average /= normalBins.length;
+            const range = maxVal - minVal;
+            let interpolated = interpolator(getter(), average, timeDelta); // TODO: May be optimized by allowing for transferring of previous style state.
+            if (reversed) interpolated = 1 - interpolated;
+            setter(minVal + range * interpolated);
+        }
+    };
+    visUpdateManager.addVisualizerRangedUpdateListener(rangedListener);
+    return rangedListener;
+}
+
+/**
+ * Maps a single bin of frequency amplitudes to a numerical value defined by a getter and a setter.
+ * 
+ * @param {object} conf The configuration for mapping a single bin to a numerical value.
+ * @param {number} conf.minVal The minimum value the mapping can produce.
+ * @param {number} conf.maxVal The maximum value the mapping can produce.
+ * @param {number} conf.bin The bin to map this number to.
+ * @param {numericalGetter} conf.getter The callback to be used to get the current number.
+ * @param {numericalSetter} conf.setter The callback to be used to set the new number.
+ * @param {interpolator} conf.interpolator The interpolation function to use.
+ * @param {VisualizerUpdateManager} conf.visUpdateManager The update manager to map to.
+ * @param {boolean} [conf.reversed] If true, then high amplitudes will be mapped to lower values and vice versa.
+ * @returns {bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener} 
+ */
+export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateManager, reversed = false }) {
+    const listener = {
+        bin: bin,
+        listener: (timeDelta, amp) => {
+            const range = maxVal - minVal;
+            let interpolated = interpolator(getter(), amp, timeDelta);
+            if (reversed) interpolated = 1 - interpolated;
+            setter(minVal + range * interpolated);
+        }
+    };
+    visUpdateManager.AddVisualizerBinUpdateListener(listener);
+    return listener;
+}

src/mapping/text.js

@@ -1,7 +1,8 @@
 import { parseColor, rgbaToHexRgba } from "./colors.js";
 import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
+import { mapBinNumerical, mapRangedAvgNumerical } from "./generic.js";
 
-// TODO: Should be able to remove this since already declared in easings.js, but don't know how to link.
+// TODO: Future: Should be able to remove this since already declared in easings.js, but don't know how to link.
 /**
  * @callback interpolator
  * @param {number} current the current value.
@@ -10,26 +11,112 @@ import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js
  * @returns {number} the new current value.
  */
 
+/**
+ * @callback VisualizerUpdateManager.visualizerRangedUpdateListener
+ * @param {number} timeDelta elapsed time since last update.
+ * @param {number} bins the bins of the range.
+ */
+
+/**
+ * @callback VisualizerUpdateManager.visualizerBinUpdateListener
+ * @param {number} timeDelta elapsed time since last update.
+ * @param {number} amplitude The amplitude of the associated bin.
+ * @param {number} ampDelta change in amplitude of the frequency bin.
+ */
+
 /**
  * Maps the red component of the text color to a certain range of bins.
  * 
- * @param {HTMLElement} element The element whose text's red value should be mapped.
+ * @param {object} rgbaMapConfiguration The configuration of the mapping.
- * @param {number} color Where r for red, g, for green, b for blue, and a for alpha.
+ * @param {HTMLElement} rgbaMapConfiguration.element The element whose text's red value should be mapped.
- * @param {number} lowerBin The lower bound of the bins to be mapped.
+ * @param {number} rgbaMapConfiguration.color Where r for red, g, for green, b for blue, and a for alpha.
- * @param {VisualizerUpdateManager} visUpdateManager The visualizer update manager associated with the audio playback you would like the mapping with.
+ * @param {number} rgbaMapConfiguration.lowerBin The lower bound of the bins to be mapped.
- * @param {interpolator} interpolator The interpolation function to use.
+ * @param {VisualizerUpdateManager} rgbaMapConfiguration.visUpdateManager The visualizer update manager associated with the audio playback you would like the mapping with.
- * @param {number} [upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used.
+ * @param {interpolator} rgbaMapConfiguration.interpolator The interpolation function to use.
- * @param {boolean} [reversed=true] If true, then the quieter, the greater the red value.
+ * @param {number} [rgbaMapConfiguration.upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used.
+ * @param {boolean} [rgbaMapConfiguration.reversed=true] If true, then the quieter, the greater the red value.
+ * @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The ranged listener that was added.
  */
-export function mapColor(element, color, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false) {
+export function mapRgba({ element, color, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
     const rgbaStr = "rgba";
     color = rgbaStr.indexOf(color);
     if (color < 0) throw new Error("Invalid color parameter provided.");
-    if (!upperBin) upperBin = lowerBin;
+    const getter = () => parseColor(element.style.color)[color];
-    visUpdateManager.addVisualizerRangeUpdateListener(lowerBin, upperBin, (timeDelta, amp) => {
+    const setter = (value) => {
-        const rgba = parseColor(element.style.color);
+        const changed = parseColor(element.style.color);
-        rgba[color] = interpolator(rgba[color], amp, timeDelta);
+        changed[color] = value;
-        if (reversed) rgba[color] = 255 - rgba[color];
+        element.style.color = rgbaToHexRgba(changed);
-        element.style.color = rgbaToHexRgba(rgba);
+    };
+    if (!upperBin) {
+        return mapBinNumerical({
+            minVal: 0,
+            maxVal: 255,
+            bin: lowerBin,
+            getter: getter,
+            setter: setter,
+            interpolator: interpolator,
+            visUpdateManager: visUpdateManager,
+            reversed: reversed
+        });
+    }
+    // TODO: Future: Could use the same object and modify
+    return mapRangedAvgNumerical({
+        minVal: 0,
+        maxVal: 255,
+        lowerBin: lowerBin,
+        upperBin: upperBin,
+        getter: getter,
+        setter: setter,
+        interpolator: interpolator,
+        visUpdateManager: visUpdateManager,
+        reversed: reversed
     });
 }
+
+/**
+ * 
+ * @param {object} fontSizeMapConfiguration The configuration of the font size mapping.
+ * @param {HTMLElement} fontSizeMapConfiguration.element The element whose font sizes will be mapped to the amplitude.
+ * @param {number} fontSizeMapConfiguration.growLower The lower limit of the font size.
+ * @param {number} fontSizeMapConfiguration.growUpper The upper limit of the font size.
+ * @param {string} fontSizeMapConfiguration.unit The unit the upper and lower bounds are measured in.
+ * @param {number} fontSizeMapConfiguration.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
+ * @param {VisualizerUpdateManager} fontSizeMapConfiguration.visUpdateManager the visualizer update manager to be mapped to.
+ * @param {interpolator} fontSizeMapConfiguration.interpolator The interpolation function to be used to transition from one value to the next.
+ * @param {number} [fontSizeMapConfiguration.upperBin=undefined] The upper bin, or undefined, which results in mapping to a single bin.
+ * @param {boolean} [fontSizeMapConfiguration.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
+ * @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The ranged listener that was added.
+ */
+export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
+    const getter = () => {
+        return parseInt(element.style.fontSize);
+    };
+    const setter = (value) => {
+        element.style.fontSize = value + unit;
+    };
+    if (!upperBin) {
+        return mapBinNumerical({
+            minVal: growLower,
+            maxVal: growUpper,
+            bin: lowerBin,
+            getter: getter,
+            setter: setter,
+            interpolator: interpolator,
+            visUpdateManager: visUpdateManager,
+            reversed: reversed
+        });
+    }
+    return mapRangedAvgNumerical({
+        minVal: growLower,
+        maxVal: growUpper,
+        lowerBin: lowerBin,
+        upperBin: upperBin,
+        getter: getter,
+        setter: setter,
+        interpolator: interpolator,
+        visUpdateManager: visUpdateManager,
+        reversed: reversed
+    });
+}
+
+// TODO: Future: map hue

src/visualization/VisualizerUpdateManager.js

@@ -21,7 +21,7 @@ export default class VisualizerUpdateManager {
         this._lastBins = new Uint8Array(this._binnedListeners.length);
         this._visualizer = visualizer;
         this._visualizerListener = (delta, bins) => {
-            const sortedCopyOfRangedListeners = [... this._rangedListeners].sort((a, b) => a[0] - b[0]); // Priority queue could be better.
+            const sortedCopyOfRangedListeners = [... this._rangedListeners]; // We assume this is sorted properly. A priority queue could be better.
             for (let binInd = 0; binInd < this._lastBins.length; binInd++) {
                 const lastBin = this._lastBins[binInd];
                 if (lastBin !== bins[binInd]) {
@@ -29,10 +29,10 @@ export default class VisualizerUpdateManager {
                         listener(delta, bins[binInd], bins[binInd] - lastBin);
                     });
                     for (let rangedInd = 0; rangedInd < sortedCopyOfRangedListeners.length; rangedInd++) { // Could switch to a while loop.
-                        const [min, max, listener] = sortedCopyOfRangedListeners[rangedInd];
+                        const { lower, upper, listener } = sortedCopyOfRangedListeners[rangedInd];
-                        if (min > binInd) break; // Don't need to check the rest if the current lowest minimum is greater than the current bin index.
+                        if (lower > binInd) break; // Don't need to check the rest if the current lowest minimum is greater than the current bin index.
-                        if (binInd <= max) {
+                        if (binInd <= upper) {
-                            listener(delta, bins.slice(min, max));
+                            listener(delta, bins.slice(lower, upper));
                             sortedCopyOfRangedListeners.shift();
                             rangedInd--;
                         }
@@ -45,26 +45,28 @@ export default class VisualizerUpdateManager {
     }
 
     /**
-     * @callback visualizerBinUpdateListener
+     * @callback VisualizerUpdateManager.visualizerBinUpdateListener
      * @param {number} timeDelta elapsed time since last update.
      * @param {number} amplitude The amplitude of the associated bin.
      * @param {number} ampDelta change in amplitude of the frequency bin.
      */
 
     /**
-     * @callback visualizerRangeUpdateListener
+     * @callback VisualizerUpdateManager.visualizerRangedUpdateListener
      * @param {number} timeDelta elapsed time since last update.
      * @param {number} bins the bins of the range.
      */
 
 
     /**
+     * Adds a listener to a specific frequency bin.
      * 
-     * @param {number} freqBin the frequency bin this update listener should listen to.
+     * @param {object} freqBinListener the listener for a specific frequency bin.
-     * @param {visualizerBinUpdateListener} listener the listener itself that will be called upon the bin updating.
+     * @param {number} freqBinListener.freqBin the frequency bin this update listener should listen to.
+     * @param {VisualizerUpdateManager.visualizerBinUpdateListener} freqBinListener.listener the listener itself that will be called upon the bin updating.
      * @returns {boolean} true if and only if the updater was added successfully.
      */
-    AddVisualizerBinUpdateListener(freqBin, listener) {
+    AddVisualizerBinUpdateListener({ freqBin, listener }) {
         if (this._binnedListeners[freqBin].includes(listener)) return false;
         this._binnedListeners[freqBin].push(listener);
         return true;
@@ -73,25 +75,32 @@ export default class VisualizerUpdateManager {
     /**
      * Similar to {@link VisualizerUpdateManager#AddVisualizerBinUpdateListener}, this method adds a listener for to a range of bins.
      * 
-     * @param {number} min The lower bound of the bins to listen to (inclusive).
+     * @param {object} rangedUpdateListener The ranged update listener to add.
-     * @param {number} max The upper bound of the bins to listen to (inclusive).
+     * @param {number} rangedUpdateListener.lower The lower bound of the bins to listen to (inclusive).
-     * @param {visualizerRangeUpdateListener} listener The listener to register to the range. 
+     * @param {number} rangedUpdateListener.upper The upper bound of the bins to listen to (inclusive).
+     * @param {VisualizerUpdateManager.visualizerRangedUpdateListener} rangedUpdateListener.listener The listener to register to the range. 
      * @returns {boolean} True if and only if the ranged listener was added successfully.
      */
-    addVisualizerRangeUpdateListener(min, max, listener) {
+    addVisualizerRangedUpdateListener({ lower, upper, listener }) {
-        const rangedListener = [min, max, listener];
+        const rangedListener = {
+            lower: lower,
+            upper: upper,
+            listener: listener
+        };
         if (this._rangedListeners.includes(rangedListener)) return false;
         this._rangedListeners.push(rangedListener);
+        this._rangedListeners.sort((a, b) => a.lower - b.lower);
         return true;
     }
 
     /**
      * 
-     * @param {number} freqBin the frequency bin the update listener to be removed from is in.
+     * @param {object} binFreqListener The bin frequency listener to remove.
-     * @param {visualizerBinUpdateListener} listener the listener that is to be removed.
+     * @param {number} binFreqListener.freqBin the frequency bin the update listener to be removed from is in.
+     * @param {VisualizerUpdateManager.visualizerBinUpdateListener} binFreqListener.listener the listener that is to be removed.
      * @returns {boolean} true if and only if the listener was successfully removed.
      */
-    removeVisualizerBinUpdateListener(freqBin, listener) {
+    removeVisualizerBinUpdateListener({ freqBin, listener }) {
         const removeIndex = this._binnedListeners[freqBin].indexOf(listener);
         if (removeIndex < 0) return false;
         this._binnedListeners[freqBin].splice(removeIndex, 1);
@@ -101,13 +110,18 @@ export default class VisualizerUpdateManager {
     /**
      * Similar to {@link removeVisualizerBinUpdateListener}, this method removes the given listener from a range of bins.
      * 
-     * @param {number} min The lower bound of bins to remove the listener from (inclusive).
+     * @param {object} rangedListener The ranged listener to remove.
-     * @param {number} max The upper bound of bin to remove the listener from (inclusive.)
+     * @param {number} rangedListener.lower The lower bound of bins to remove the listener from (inclusive).
-     * @param {visualizerBinUpdateListener} listener The update listener to remove from the bins.
+     * @param {number} rangedListener.upper The upper bound of bin to remove the listener from (inclusive.)
+     * @param {VisualizerUpdateManager.visualizerRangedUpdateListener} rangedListener.listener The update listener to remove from the bins.
      * @returns {boolean} True if and only if the given listener was removed.
      */
-    removeVisualizerRangeUpdateListener(min, max, listener) {
+    removeVisualizerRangedUpdateListener({ lower, upper, listener }) {
-        const rangedListener = [min, max, listener];
+        const rangedListener = {
+            lower: lower,
+            upper: upper,
+            listener: listener
+        };
         const removeIndex = this._rangedListeners.indexOf(rangedListener);
         if (removeIndex < 0) return false;
         this._binnedListeners.splice(removeIndex, 1);
@@ -116,21 +130,25 @@ export default class VisualizerUpdateManager {
 
     /**
      * 
-     * @param {visualizerBinUpdateListener[][]} binnedListeners an array of the same length as the number of bins where each element is another array containing the listeners for that bin.
+     * @param {{binned: VisualizerUpdateManager.visualizerBinUpdateListener[][], ranged: {lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}[]}} listeners an object containing both the binned, and ranged listeners that this update manager should use.
      * @returns {boolean} true if and only if successfully loaded the new listeners.
      */
-    setBinnedListeners(binnedListeners) {
+    setBinnedListeners(listeners) {
-        if (binnedListeners.length !== this._binnedListeners.length) return false;
+        if (listeners.binned.length !== this._binnedListeners.length) return false;
-        this._binnedListeners = binnedListeners;
+        this._binnedListeners = listeners.binned;
+        this._rangedListeners = listeners.ranged.sort((a, b) => a.lower - b.lower);
         return true;
     }
 
     /**
      * 
-     * @returns {visualizerBinUpdateListener[][]} an array of the same length as the number of bins where each element is another array containing the listeners for that bin.
+     * @returns {{binned: VisualizerUpdateManager.visualizerBinUpdateListener[][], ranged: {lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}[]}} All the listeners, both for binned, and ranged listeners.
      */
-    getBinnedListeners() {
+    getAllListeners() {
-        return this._binnedListeners;
+        return {
+            binned: this._binnedListeners,
+            ranged: this._rangedListeners
+        };
     }
 
     /**