Here we will show off some of the mappings currently in the library. This list may not be exhaustive, and you should check the actual documentation for all the mapping modules. Additionally, feel free to create your own mappings using the provided support tools!
The first one here shows mapping the width.
ask.mappings.dimensions.width({ // The mapping function.
element: document.getElementById("width-map-demo"), // The element this mapping applies to.
growLower: 2, // The smallest value the width can be.
growUpper: 8, // The largest value the width can be.
unit: "rem", // The unit used for the above two values.
lowerBin: 24, // The lower bin to map to.
upperBin: 60, // The upper bin to map to.
visUpdateRouter: player.visUpdateRouter, // The update router to use for the mapping.
interpolator: ask.support.easings.createEaseLinear(2.5) // The interpolation function to use.
});
This next one does the same, except with height.
ask.mappings.dimensions.height({ // Only big difference is the function being called.
element: document.getElementById("height-map-demo"),
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)
});
What's that? you want multiple mappings on one? Here it is!
const squareElemConf = { // Use an object for commonly used mappings.
element: document.getElementById("square-map-demo"), // Same stuff as before..
growLower: 0.5,
growUpper: 8,
unit: "rem",
lowerBin: 128,
upperBin: 160,
visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5)
}
ask.mappings.dimensions.width(squareElemConf); // Apply them easily!
ask.mappings.dimensions.height(squareElemConf);
You can map font size to frequency bins as well.
ask.mappings.dimensions.fontSize({
element: document.getElementById("font-size-map-demo"), // Nothing new here, just calling a different mapping function.
growLower: 1,
growUpper: 3,
unit: "rem",
lowerBin: 200,
upperBin: 256,
visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2)
});
Now for a bit more of an eccentric mapping, you can map the color of a font to the music!
ask.mappings.coloring.fontColorRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
element: document.getElementById("font-color-rgba-map-demo"), // The element to map (same as above examples).
select: "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)
});
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 anywhere online really, 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).
ask.mappings.coloring.fontColorHsla({ // Similar to the rgba example, except now with hsla.
element: document.getElementById("font-color-hsla-map-demo"),
select: "h", // Selecting the "hue" component.
lowerBin: 200,
upperBin: 220,
visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5)
})
This is kind of like the one for fonts, except, instead, rgba for background colors!
ask.mappings.coloring.backgroundColorRgba({
element: document.getElementById("bg-color-rgba-map-demo"),
select: "g", // Selecting the green component this time...
lowerBin: 200,
upperBin: 220,
visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5)
});
And of course we can use hsla values too.
ask.mappings.coloring.backgroundColorHsla({
element: document.getElementById("bg-color-hsla-map-demo"),
select: "h",
lowerBin: 200,
upperBin: 220,
visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5)
});