Fixed RGBA mapping and added to VisMusicPlayer tutorial.

src/mappings/numeric.js

@@ -31,7 +31,6 @@ import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
  * @returns {{lower: number, upper: number, listener: VisUpdateRouter.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, visUpdateRouter, reversed = false }) {
-    console.log("mapping average numerical.");
     const rangedListener = {
         lower: lowerBin,
         upper: upperBin,
@@ -72,7 +71,6 @@ export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, up
  * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}} The bin listener that was added.
  */
 export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateRouter, reversed = false }) {
-    console.log("mapping numerical...");
     const listener = {
         bin: bin,
         listener: (timeDelta, amp) => {

src/mappings/text.js

@@ -22,7 +22,7 @@ export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolato
     color = rgbaStr.indexOf(color);
     if (color < 0) throw new Error("Invalid color parameter provided.");
     const getter = () => {
-        if (!element.style.color) element.style.color = "rgb(0,0,255)";
+        if (!element.style.color) element.style.color = "rgba(0, 0, 0, 255)";
         return parseColor(element.style.color)[color];
     };
     const setter = (value) => {

src/support/colors.js

@@ -79,7 +79,7 @@ export function cssRgbToRgba(rgb) {
  */
 export function rgbaToHexRgba(rgba) {
     const filler = (hex) => hex.length < 2 ? "0" + hex : hex;
-    return "#" + filler(rgba[0].toString(16)) + filler(rgba[1].toString(16)) + filler(rgba[2].toString(16)) + filler(rgba[3].toString(16));
+    return "#" + filler(Math.round(rgba[0]).toString(16)) + filler(Math.round(rgba[1]).toString(16)) + filler(Math.round(rgba[2]).toString(16)) + filler(Math.round(rgba[3]).toString(16));
 }
 
 

src/visualization/VisUpdateRouter.js

@@ -92,7 +92,6 @@ export default class VisUpdateRouter {
      * @returns {boolean} True if and only if the ranged listener was added successfully.
      */
     addVisualizerRangedUpdateListener({ lower, upper, listener }) {
-        console.log("range update listener added.");
         const rangedListener = {
             lower: lower,
             upper: upper,

src/visualization/Visualizer.js

@@ -86,7 +86,6 @@ export default class Visualizer {
      * @returns {boolean} true if and only if the listener was successfully added.
      */
     addUpdateListener(listener) {
-        console.log("visualizer received listener");
         if (this.#updateListeners.includes(listener));
         this.#updateListeners.push(listener);
         return true;

tutorials/VisMusicPlayer.html

@@ -95,6 +95,27 @@
             ask.mappings.dimensions.mapHeight(squareElemConf);
         </code></pre>
     </div>
+    <div class="part">
+        <h3>Mapping Font Color</h3>
+        <p>Now for a bit more of an eccentric mapping, you can map the color of a font to the music!</p>
+        <div class="result">
+            <div id="font-color-map-demo">
+                <strong>Hello world!</strong>
+            </div>
+        </div>
+        <pre><code class="language-js">
+            const fontColorElem = document.getElementById("font-color-map-demo");
+            ask.mappings.text.mapRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
+                element: fontColorElem, // The element to map (same as above examples).
+                color: "r", // Choose the red component.
+                lowerBin: 128, // All other values are what we've seen above.
+                upperBin: 160,
+                visUpdateRouter: player.visUpdateRouter,
+                interpolator: ask.support.easings.createEaseLinear(2.5)
+            });
+        </code></pre>
+    </div>
+
 </div>
 
 <script>
@@ -151,4 +172,14 @@
     ask.mappings.dimensions.mapWidth(squareElemConf);
     ask.mappings.dimensions.mapHeight(squareElemConf);
 
+    const fontColorElem = document.getElementById("font-color-map-demo");
+    ask.mappings.text.mapRgba({
+        element: fontColorElem,
+        color: "r",
+        lowerBin: 128,
+        upperBin: 160,
+        visUpdateRouter: player.visUpdateRouter,
+        interpolator: ask.support.easings.createEaseLinear(2.5)
+    });
+
 </script>