Added font size mapping demo.

.vscode/settings.json

@@ -4,6 +4,7 @@
         "audioshowkitlib",
         "ckeditor",
         "Ctrls",
+        "Disp",
         "easings",
         "linebreak",
         "musicplayer",

src/mappings/dimensions.js

@@ -82,7 +82,7 @@ export function height({ element, growLower, growUpper, unit, lowerBin, visUpdat
  * @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).
  */
 export function fontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
-    const getter = () => parseInt(element.style.fontSize);
+    const getter = () => parseInt(element.style.fontSize) || 0;
     const setter = (value) => element.style.fontSize = value + unit;
     const conf = {
         minVal: growLower,

tutorials/VisMusicPlayer.html

@@ -94,6 +94,15 @@
             ask.mappings.dimensions.height(squareElemConf);
         </code></pre>
     </div>
+    <div class="part">
+        <h3>Mapping Font Size</h3>
+        <p>You can map font size to frequency bins as well.</p>
+        <div class="result" style="height: 6rem;">
+            <div id="font-size-map-demo">
+                Wonky text!
+            </div>
+        </div>
+    </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>
@@ -113,6 +122,7 @@
             });
         </code></pre>
     </div>
+    <div class="part">
         <p>In the same vein of mapping, we can also map HSL values. If you haven't heard of HSL values, you can read up about it <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">anywhere online really</a>, but essentially, it's another way of describing a color where a hue is used to describe a color, and then the color is adjusted by its saturation and lightness. Importantly for your case, it may make it easier to achieve the type of dynamic color mapping you're looking for (potentially when used in conjunction with any of RGBA components).</p>
         <div class="result">
             <div id="font-color-hsla-map-demo">
@@ -129,7 +139,7 @@
                 interpolator: ask.support.easings.createEaseLinear(2.5)
             })
         </code></pre>
-
+    </div>
     <div class="part">
         <h3>Mapping Background Color</h3>
         <p>This is kind of like the one for fonts, except, instead, rgba for background colors!</p>
@@ -219,6 +229,17 @@
     ask.mappings.dimensions.width(squareElemConf);
     ask.mappings.dimensions.height(squareElemConf);
 
+    ask.mappings.dimensions.fontSize({
+        element: document.getElementById("font-size-map-demo"),
+        growLower: 1,
+        growUpper: 3,
+        unit: "rem",
+        lowerBin: 200,
+        upperBin: 256,
+        visUpdateRouter: player.visUpdateRouter,
+        interpolator: ask.support.easings.createEaseLinear(2)
+    });
+
     ask.mappings.coloring.fontColorRgba({
         element: document.getElementById("font-color-rgba-map-demo"),
         select: "r",