Added a Mapping Demonstration tutorial page.
Moved numerical mapping code to the "bins" support module.
This commit is contained in:
parent
5534b489c4
commit
d6e5f84af7
@ -1,6 +1,6 @@
|
||||
import { hslaToCssHsla, hslaToRgba, parseColorToHsla, parseColorToRgba, rgbaToCssRgba, rgbaToHexRgba, rgbaToHsla } from "../support/colors.js";
|
||||
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
|
||||
import { numericalBins } from "./numeric.js";
|
||||
import { numericalBins } from "../support/bins.js";
|
||||
|
||||
|
||||
/**@module */
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
|
||||
import { numericalBins } from "./numeric.js";
|
||||
import { numericalBins } from "../support/bins.js";
|
||||
|
||||
/**@module */
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as dimensions from "./dimensions.js";
|
||||
import * as numeric from "./numeric.js";
|
||||
import * as coloring from "./coloring.js";
|
||||
|
||||
|
||||
export { dimensions, numeric, coloring };
|
||||
export { dimensions, coloring };
|
||||
@ -1,57 +0,0 @@
|
||||
import { createUniAvgSel } from "../support/bins.js";
|
||||
import { createEaseLinear } from "../support/easings.js";
|
||||
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
|
||||
|
||||
/**@module */
|
||||
|
||||
/**
|
||||
*
|
||||
* @callback numericalGetter
|
||||
* @returns {number} The number this value currently represents.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @callback numericalSetter
|
||||
* @param {number} value The new numerical value to update to.
|
||||
*/
|
||||
|
||||
// PEND: Warnings about interpolator not being defined are broken. Docs generate fine.
|
||||
|
||||
/**
|
||||
* 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 {module:mappings/numeric~numericalGetter} conf.getter The getter callback to be used to get the current number.
|
||||
* @param {module:mappings/numeric~numericalSetter} conf.setter The setter callback to be used to set the new number.
|
||||
* @param {VisUpdateRouter} conf.visUpdateRouter the visualizer update manager this mapping corresponds with.
|
||||
* @param {module:support/bins~binSelector} [conf.binSelector=undefined] The bin selector function to use to get a number for the mapping.
|
||||
* @param {number} [conf.upperBin=undefined] The upper bin of the range of bins this value is to be mapped to.
|
||||
* @param {module:support/easings~interpolator} [conf.interpolator=undefined] The interpolation function to use.
|
||||
* @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: VisUpdateRouter.visualizerRangedUpdateListener}} An object containing the lower and upper bounds for the range of a listener, which is also in the object.
|
||||
*/
|
||||
export function numericalBins({ minVal, maxVal, lowerBin, getter, setter, visUpdateRouter, binSelector = undefined, upperBin = undefined, interpolator = undefined, reversed = false }) {
|
||||
if (!binSelector) binSelector = createUniAvgSel();
|
||||
if (!interpolator) interpolator = createEaseLinear(2);
|
||||
const rangedListener = {
|
||||
lower: lowerBin,
|
||||
upper: upperBin ? upperBin : lowerBin,
|
||||
listener: (timeDelta, bins) => {
|
||||
// TODO: Future: add weighting / distribution system?
|
||||
let normAvg = binSelector(bins);
|
||||
normAvg /= 255;
|
||||
|
||||
const range = maxVal - minVal;
|
||||
let interpolated = interpolator((getter() - minVal) / range, normAvg, Math.min(timeDelta, 1));
|
||||
if (reversed) interpolated = 1 - interpolated;
|
||||
setter(minVal + range * interpolated);
|
||||
}
|
||||
};
|
||||
if (visUpdateRouter.addUpdateListener(rangedListener)) {
|
||||
return rangedListener;
|
||||
}
|
||||
return null; // Technically doesn't occur since the functions are anonymous?
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
/**@module */
|
||||
|
||||
import { createEaseLinear } from "./easings.js";
|
||||
|
||||
/**
|
||||
* @callback binSelector
|
||||
* @param {number[]} bins Array of frequency bins.
|
||||
@ -20,4 +22,55 @@ export function createUniAvgSel() {
|
||||
normAvg /= bins.length;
|
||||
return normAvg;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @callback numericalGetter
|
||||
* @returns {number} The number this value currently represents.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @callback numericalSetter
|
||||
* @param {number} value The new numerical value to update to.
|
||||
*/
|
||||
|
||||
// PEND: Warnings about interpolator not being defined are broken. Docs generate fine.
|
||||
|
||||
/**
|
||||
* 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 {module:support/bins~numericalGetter} conf.getter The getter callback to be used to get the current number.
|
||||
* @param {module:support/bins~numericalSetter} conf.setter The setter callback to be used to set the new number.
|
||||
* @param {VisUpdateRouter} conf.visUpdateRouter the visualizer update manager this mapping corresponds with.
|
||||
* @param {module:support/bins~binSelector} [conf.binSelector=undefined] The bin selector function to use to get a number for the mapping.
|
||||
* @param {number} [conf.upperBin=undefined] The upper bin of the range of bins this value is to be mapped to.
|
||||
* @param {module:support/easings~interpolator} [conf.interpolator=undefined] The interpolation function to use.
|
||||
* @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: VisUpdateRouter.visualizerRangedUpdateListener}} An object containing the lower and upper bounds for the range of a listener, which is also in the object.
|
||||
*/
|
||||
export function numericalBins({ minVal, maxVal, lowerBin, getter, setter, visUpdateRouter, binSelector = undefined, upperBin = undefined, interpolator = undefined, reversed = false }) {
|
||||
if (!binSelector) binSelector = createUniAvgSel();
|
||||
if (!interpolator) interpolator = createEaseLinear(2);
|
||||
const rangedListener = {
|
||||
lower: lowerBin,
|
||||
upper: upperBin ? upperBin : lowerBin,
|
||||
listener: (timeDelta, bins) => {
|
||||
let normAvg = binSelector(bins);
|
||||
normAvg /= 255;
|
||||
|
||||
const range = maxVal - minVal;
|
||||
let interpolated = interpolator((getter() - minVal) / range, normAvg, Math.min(timeDelta, 1));
|
||||
if (reversed) interpolated = 1 - interpolated;
|
||||
setter(minVal + range * interpolated);
|
||||
}
|
||||
};
|
||||
if (visUpdateRouter.addUpdateListener(rangedListener)) {
|
||||
return rangedListener;
|
||||
}
|
||||
return null; // Technically doesn't occur since the functions are anonymous?
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import * as colors from "./colors.js";
|
||||
import * as easings from "./easings.js";
|
||||
import * as bins from "./bins.js";
|
||||
|
||||
|
||||
export { colors, easings };
|
||||
export { colors, easings, bins };
|
||||
265
tutorials/MappingDemonstration.html
Normal file
265
tutorials/MappingDemonstration.html
Normal file
@ -0,0 +1,265 @@
|
||||
<link rel="stylesheet" href="./assets/css/main.css" />
|
||||
<script src="./assets/js/prism.js" defer></script>
|
||||
<script src="./assets/js/audioshowkit.js"></script>
|
||||
|
||||
<div class="part">
|
||||
<h1>Mapping Demonstration</h1>
|
||||
<p>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!</p>
|
||||
<div class="result">
|
||||
<div id="playlist-display">
|
||||
</div>
|
||||
<div id="playback-ctrls">
|
||||
</div>
|
||||
</div>
|
||||
<div class="part">
|
||||
<h3>Mapping Width</h3>
|
||||
<p>The first one here shows mapping the width.</p>
|
||||
<div class="result">
|
||||
<div id="width-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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.
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="part">
|
||||
<h3>Mapping Height</h3>
|
||||
<p>This next one does the same, except with height.</p>
|
||||
<div class="result" style="height: 10rem;">
|
||||
<div id="height-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="part">
|
||||
<h3>Mapping Multiple Style Properties</h3>
|
||||
<p>What's that? you want multiple mappings on one? Here it is!</p>
|
||||
<div class="result" style="height: 10rem;">
|
||||
<div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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);
|
||||
</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>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</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-rgba-map-demo">
|
||||
<strong>Hello colors!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</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">
|
||||
<strong>Hello more colors!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
})
|
||||
</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>
|
||||
<div class="result">
|
||||
<div id="bg-color-rgba-map-demo" style="width: 8rem; height: 8rem; background-color: black;">
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</code></pre>
|
||||
<p>And of course we can use hsla values too.</p>
|
||||
<div class="result">
|
||||
<div id="bg-color-hsla-map-demo" style="width: 8rem; height: 8rem; background-color: black;">
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const ask = window.audioshowkit;
|
||||
const playlist = new ask.player.MusicPlaylist("Awesome Music");
|
||||
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");
|
||||
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
|
||||
playlist.add("./assets/audio/pathetique.mp3", "Pathetique", "Cryvera (Beethoven Remix)");
|
||||
|
||||
const playlistDisp = playlist.generatePlaylistElement();
|
||||
document.getElementById("playlist-display").appendChild(playlistDisp);
|
||||
|
||||
const player = new ask.player.VisMusicPlayer(playlist);
|
||||
const playbackCtrlsElem = document.getElementById("playback-ctrls");
|
||||
const prevElem = player.generatePreviousElement();
|
||||
const playElem = player.generatePlayElement();
|
||||
const nextElem = player.generateNextElement();
|
||||
playbackCtrlsElem.appendChild(prevElem);
|
||||
playbackCtrlsElem.appendChild(playElem);
|
||||
playbackCtrlsElem.appendChild(nextElem);
|
||||
|
||||
ask.mappings.dimensions.width({
|
||||
element: document.getElementById("width-map-demo"),
|
||||
growLower: 2,
|
||||
growUpper: 8,
|
||||
unit: "rem",
|
||||
lowerBin: 24,
|
||||
upperBin: 60,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
ask.mappings.dimensions.height({
|
||||
element: document.getElementById("height-map-demo"),
|
||||
growLower: 2,
|
||||
growUpper: 8,
|
||||
unit: "rem",
|
||||
lowerBin: 80,
|
||||
upperBin: 120,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
const squareElemConf = {
|
||||
element: document.getElementById("square-map-demo"),
|
||||
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);
|
||||
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",
|
||||
lowerBin: 128,
|
||||
upperBin: 160,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
ask.mappings.coloring.fontColorHsla({
|
||||
element: document.getElementById("font-color-hsla-map-demo"),
|
||||
select: "h",
|
||||
lowerBin: 200,
|
||||
upperBin: 220,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
ask.mappings.coloring.backgroundColorRgba({
|
||||
element: document.getElementById("bg-color-rgba-map-demo"),
|
||||
select: "g",
|
||||
lowerBin: 200,
|
||||
upperBin: 220,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
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)
|
||||
});
|
||||
</script>
|
||||
@ -5,6 +5,7 @@
|
||||
<div class="part">
|
||||
<h1>Visualizing Music</h1>
|
||||
<p>This is the fun part. We can use a {@link VisualizedMusicPlayer} and a {@link MusicPlaylist} to create a music player that is like {@link MusicPlayer} but with the ability to automatically fetch the current {@link Visualizer}. On top of that, it then routes that visualizer data to {@link VisualizerUpdateManager} which can be to make much more refined mappings.</p>
|
||||
|
||||
This library comes with a variety of mapping tools:
|
||||
<ul>
|
||||
<li>Want to map ranges of frequency bins to width, height, and other dimensions related properties? Take a look at {@link module:mappings/numeric} and {@link module:mappings/dimensions}!</li>
|
||||
@ -33,14 +34,12 @@
|
||||
</div>
|
||||
<div class="part">
|
||||
<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! Remember to hit the play button above to see the mappings in effect!</p>
|
||||
<p>The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements! We'll demonstrate an example of the latter below, but check out [the Mapping Demonstration tutorial]{@tutorial MappingDemonstration} for many other mappings! Hit the play button to see the what the mapping did.</p>
|
||||
<div class="part">
|
||||
<h3>Mapping Width</h3>
|
||||
<p>The first one here shows mapping the width.</p>
|
||||
<div class="result">
|
||||
<div id="width-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<p>To do this, we need to perform what's called a <strong>mapping</strong> between a range of frequency bins, or a single frequency bin, and the width property of the <code>div</code> element. We can then define a multitude of parameters to specify how the mapping will work. Following is the code that produced the example above with comment annotations.</p>
|
||||
<p>Here, we perform what's called a <strong>mapping</strong> between a range of frequency bins, or a single frequency bin, and the width property of the <code>div</code> element. We can then define a multitude of parameters to specify how the mapping will work. Following is the code that produced the example above with comment annotations.</p>
|
||||
<pre><code class="language-js">
|
||||
ask.mappings.dimensions.width({ // The mapping function.
|
||||
element: document.getElementById("width-map-demo"), // The element this mapping applies to.
|
||||
@ -54,138 +53,6 @@
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="part">
|
||||
<h3>Mapping Height</h3>
|
||||
<p>This next one does the same, except with height.</p>
|
||||
<div class="result" style="height: 10rem;">
|
||||
<div id="height-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="part">
|
||||
<h3>Mapping Multiple Style Properties</h3>
|
||||
<p>What's that? you want multiple mappings on one? Here it is!</p>
|
||||
<div class="result" style="height: 10rem;">
|
||||
<div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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);
|
||||
</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>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</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-rgba-map-demo">
|
||||
<strong>Hello colors!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</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">
|
||||
<strong>Hello more colors!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
})
|
||||
</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>
|
||||
<div class="result">
|
||||
<div id="bg-color-rgba-map-demo" style="width: 8rem; height: 8rem; background-color: black;">
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</code></pre>
|
||||
<p>And of course we can use hsla values too.</p>
|
||||
<div class="result">
|
||||
<div id="bg-color-hsla-map-demo" style="width: 8rem; height: 8rem; background-color: black;">
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
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)
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -217,75 +84,4 @@
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
ask.mappings.dimensions.height({
|
||||
element: document.getElementById("height-map-demo"),
|
||||
growLower: 2,
|
||||
growUpper: 8,
|
||||
unit: "rem",
|
||||
lowerBin: 80,
|
||||
upperBin: 120,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
const squareElemConf = {
|
||||
element: document.getElementById("square-map-demo"),
|
||||
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);
|
||||
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",
|
||||
lowerBin: 128,
|
||||
upperBin: 160,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
ask.mappings.coloring.fontColorHsla({
|
||||
element: document.getElementById("font-color-hsla-map-demo"),
|
||||
select: "h",
|
||||
lowerBin: 200,
|
||||
upperBin: 220,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
ask.mappings.coloring.backgroundColorRgba({
|
||||
element: document.getElementById("bg-color-rgba-map-demo"),
|
||||
select: "g",
|
||||
lowerBin: 200,
|
||||
upperBin: 220,
|
||||
visUpdateRouter: player.visUpdateRouter,
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
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)
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user