VisMusicPlayer guide done.

src/mapping/dimensions.js

@@ -56,7 +56,7 @@ function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRout
  * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
  */
 function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
-    const getter = () => element.style.height;
+    const getter = () => parseInt(element.style.height) || 0;
     const setter = (value) => element.style.height = value + unit;
     const conf = {
         minVal: growLower,

src/mapping/mappings.js

@@ -1,5 +1,6 @@
 import * as dimensions from "./dimensions.js";
 import * as numeric from "./numeric.js";
+import * as text from "./text.js";
 
 /**@module */
-export { dimensions, numeric };
+export { dimensions, numeric, text };

src/mapping/text.js

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

src/support/colors.js

@@ -43,6 +43,7 @@ function rgbHexToRgba(hex) {
  * @returns {number[]} the rgba components.
  */
 function cssRgbaToRgba(rgba) {
+    rgba = rgba.replaceAll(" ", "");
     const cssRgbaRegex = /rgba\((\d+),(\d+),(\d+),(\d+)\)/;
     try {
         const matches = rgba.match(cssRgbaRegex);
@@ -59,6 +60,7 @@ function cssRgbaToRgba(rgba) {
  * @returns {number[]} the rgba components.
  */
 function cssRgbToRgba(rgb) {
+    rgb = rgb.replaceAll(" ", "");
     const cssRgbRegex = /rgb\((\d+),(\d+),(\d+)\)/;
     try {
         const matches = rgb.match(cssRgbRegex);

tutorials/VisMusicPlayer.html

@@ -36,9 +36,66 @@
     <div>
         <h2>Visualization</h2>
         <p>The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements!</p>
-        <div class="result">
+
+        <h3>The first one here shows mapping the width.</h3>
+        <div class="result" style="width: 10rem;">
             <div id="width-map-demo" style="height: 2rem; background-color: black;"></div>
         </div>
+        <p>Produced by the following code...</p>
+        <pre><code class="language-js">
+            const widthElem = document.getElementById("width-map-demo"); // selecting an element.
+            ask.mappings.dimensions.mapWidth({ // the mapping function for width.
+                element: widthElem, // the element to map.
+                growLower: 2, // the minimum width
+                growUpper: 8, // the maximum width
+                unit: "rem", // the units the minimum and maximum are described in.
+                lowerBin: 24, // the lower frequency bin.
+                upperBin: 80, // the upper frequency bin.
+                visUpdateRouter: player.visUpdateRouter, // the visualizer to use (we got ours from the VisMusicPlayer).
+                interpolator: ask.support.easings.createEaseLinear(2.5) // an interpolation function to make transitions between frames cleaner.
+            });
+        </code></pre>
+
+        <h3>This next one does the same, except with height.</h3>
+        <div class="result" style="height: 10rem;">
+            <div id="height-map-demo" style="height: 2rem; background-color: black;"></div>
+        </div>
+        <p>Produced by the following code</p>
+        <pre><code class="language-js">
+            const heightElem = document.getElementById("height-map-demo"); // Only big difference is the function being called.
+            ask.mappings.dimensions.mapHeight({
+                element: heightElem,
+                growLower: 2, // height smallest can be 2 rem, tallest can be 8 rem.
+                growUpper: 8,
+                unit: "rem",
+                lowerBin: 80, // Changed the bin range just for fun.
+                upperBin: 120,
+                visUpdateRouter: player.visUpdateRouter,
+                interpolator: ask.support.easings.createEaseLinear(2.5)
+            });
+        </code></pre>
+
+        <h3>What's that? you want multiple mappings on one?</h3>
+        <p>Of course it's possible</p>
+        <div class="result" style="height: 10rem; min-width: 10rem;">
+            <div id="square-map-demo" style="height: 2rem; width: 2rem; background-color: black;"></div>
+        </div>
+        <p>Produced by the following code</p>
+        <pre><code class="language-js">
+            const squareElem = document.getElementById("square-map-demo"); // Same stuff as before..
+            const squareElemConf = { // Use an object for commonly used mappings.
+                element: squareElem,
+                growLower: 0.5,
+                growUpper: 8,
+                unit: "rem",
+                lowerBin: 128,
+                upperBin: 160,
+                visUpdateRouter: player.visUpdateRouter,
+                interpolator: ask.support.easings.createEaseLinear(2.5)
+            }
+            ask.mappings.dimensions.mapWidth(squareElemConf); // Apply them easily!
+            ask.mappings.dimensions.mapHeight(squareElemConf);
+        </code></pre>
     </div>
 
     <script>
@@ -58,17 +115,43 @@
         playbackCtrlsElem.appendChild(nextElem);
 
         const widthElem = document.getElementById("width-map-demo");
-        console.log("attempting to map");
         ask.mappings.dimensions.mapWidth({
             element: widthElem,
             growLower: 2,
-            growUpper: 5,
+            growUpper: 8,
             unit: "rem",
-            lowerBin: 0,
+            lowerBin: 24,
-            upperBin: 128,
+            upperBin: 60,
             visUpdateRouter: player.visUpdateRouter,
-            interpolator: ask.support.easings.createEaseLinear(1)
+            interpolator: ask.support.easings.createEaseLinear(2.5)
         });
+
+        const heightElem = document.getElementById("height-map-demo");
+        ask.mappings.dimensions.mapHeight({
+            element: heightElem,
+            growLower: 2,
+            growUpper: 8,
+            unit: "rem",
+            lowerBin: 80,
+            upperBin: 120,
+            visUpdateRouter: player.visUpdateRouter,
+            interpolator: ask.support.easings.createEaseLinear(2.5)
+        });
+
+        const squareElem = document.getElementById("square-map-demo");
+        const squareElemConf = {
+            element: squareElem,
+            growLower: 0.5,
+            growUpper: 8,
+            unit: "rem",
+            lowerBin: 128,
+            upperBin: 160,
+            visUpdateRouter: player.visUpdateRouter,
+            interpolator: ask.support.easings.createEaseLinear(2.5)
+        }
+        ask.mappings.dimensions.mapWidth(squareElemConf);
+        ask.mappings.dimensions.mapHeight(squareElemConf);
+
     </script>
 </body>