Added background color mapping demos.
This commit is contained in:
parent
93ef6251e7
commit
14c1c12e23
@ -22,14 +22,14 @@ import { numerical } from "./numeric.js";
|
||||
*/
|
||||
export function backgroundColorRgba({ element, select, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false, lowerVal = 0, upperVal = 255 }) {
|
||||
const rgbaStr = "rgba";
|
||||
const defaultColor = [0, 0, 0, 255];
|
||||
select = rgbaStr.indexOf(select);
|
||||
if (select < 0) throw new Error("Invalid color parameter provided.");
|
||||
const getter = () => {
|
||||
if (!element.style.backgroundColor) element.style.backgroundColor = "rgba(0, 0, 0, 255)";
|
||||
return parseColorToRgba(element.style.backgroundColor)[select];
|
||||
return (parseColorToRgba(element.style.backgroundColor) || defaultColor)[select];
|
||||
};
|
||||
const setter = (value) => {
|
||||
const changed = parseColorToRgba(element.style.backgroundColor);
|
||||
const changed = parseColorToRgba(element.style.backgroundColor) || defaultColor;
|
||||
changed[select] = value;
|
||||
if (element.style.backgroundColor.startsWith("rgb")) {
|
||||
element.style.backgroundColor = rgbaToCssRgba(changed);
|
||||
@ -74,15 +74,15 @@ export function backgroundColorRgba({ element, select, lowerBin, visUpdateRouter
|
||||
*/
|
||||
export function backgroundColorHsla({ element, select, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false, lowerVal = 0, upperVal = undefined }) {
|
||||
const rgbaStr = "hsla";
|
||||
const defaultColor = [0, 0.5, 0.5, 255];
|
||||
select = rgbaStr.indexOf(select);
|
||||
if (select < 0) throw new Error("Invalid color parameter provided.");
|
||||
|
||||
const getter = () => {
|
||||
if (!element.style.backgroundColor) element.style.backgroundColor = "hsl(0, 50%, 50%, 255)";
|
||||
return parseColorToHsla(element.style.backgroundColor)[select];
|
||||
return (parseColorToHsla(element.style.backgroundColor) || defaultColor)[select];
|
||||
};
|
||||
const setter = (value) => {
|
||||
const changed = parseColorToHsla(element.style.backgroundColor);
|
||||
const changed = parseColorToHsla(element.style.backgroundColor) || defaultColor;
|
||||
changed[select] = value;
|
||||
if (element.style.backgroundColor.startsWith("hsl")) {
|
||||
element.style.backgroundColor = hslaToCssHsla(changed);
|
||||
@ -100,6 +100,7 @@ export function backgroundColorHsla({ element, select, lowerBin, visUpdateRouter
|
||||
} else if (select === "a") {
|
||||
upperBound = 255;
|
||||
}
|
||||
if (isNaN(upperVal)) upperVal = upperBound;
|
||||
upperVal = Math.min(Math.max(0, upperVal), upperBound);
|
||||
lowerVal = Math.min(Math.max(0, lowerVal), upperVal);
|
||||
const conf = {
|
||||
@ -133,14 +134,14 @@ export function backgroundColorHsla({ element, select, lowerBin, visUpdateRouter
|
||||
*/
|
||||
export function fontColorRgba({ element, select, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false, lowerVal = 0, upperVal = 255 }) {
|
||||
const rgbaStr = "rgba";
|
||||
const defaultColor = [0, 0, 0, 255];
|
||||
select = rgbaStr.indexOf(select);
|
||||
if (select < 0) throw new Error("Invalid color parameter provided.");
|
||||
const getter = () => {
|
||||
if (!element.style.color) element.style.color = "rgba(0, 0, 0, 255)";
|
||||
return parseColorToRgba(element.style.color)[select];
|
||||
return (parseColorToRgba(element.style.color) || defaultColor)[select];
|
||||
};
|
||||
const setter = (value) => {
|
||||
const changed = parseColorToRgba(element.style.color);
|
||||
const changed = parseColorToRgba(element.style.color) || defaultColor;
|
||||
changed[select] = value;
|
||||
if (element.style.color.startsWith("rgb")) {
|
||||
element.style.color = rgbaToCssRgba(changed);
|
||||
@ -185,15 +186,15 @@ export function fontColorRgba({ element, select, lowerBin, visUpdateRouter, inte
|
||||
*/
|
||||
export function fontColorHsla({ element, select, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false, lowerVal = 0, upperVal = undefined }) {
|
||||
const rgbaStr = "hsla";
|
||||
const defaultColor = [0, 0.5, 0.5, 255];
|
||||
select = rgbaStr.indexOf(select);
|
||||
if (select < 0) throw new Error("Invalid color parameter provided.");
|
||||
|
||||
const getter = () => {
|
||||
if (!element.style.color) element.style.color = "hsl(0, 50%, 50%, 255)";
|
||||
return parseColorToHsla(element.style.color)[select];
|
||||
return (parseColorToHsla(element.style.color) || defaultColor)[select];
|
||||
};
|
||||
const setter = (value) => {
|
||||
const changed = parseColorToHsla(element.style.color);
|
||||
const changed = parseColorToHsla(element.style.color) || defaultColor;
|
||||
changed[select] = value;
|
||||
if (element.style.color.startsWith("hsl")) {
|
||||
element.style.color = hslaToCssHsla(changed);
|
||||
|
||||
@ -88,7 +88,7 @@ export function rgbaToHexRgba(rgba) {
|
||||
* For hex, we assume there is no alpha channel unless the hex value is not minimized.
|
||||
*
|
||||
* @param {string} color The string that contains the color information.
|
||||
* @returns {number[]} an array that contains the r, g, b and a components.
|
||||
* @returns {number[]|null} an array that contains the r, g, b and a components. Returns null if there was an issue parsing the input.
|
||||
*/
|
||||
export function parseColorToRgba(color) {
|
||||
if (color.startsWith("rgba(")) {
|
||||
@ -104,14 +104,14 @@ export function parseColorToRgba(color) {
|
||||
} else if (color.startsWith("hsl(")) {
|
||||
return hslaToRgba(cssHslaToHsla(color));
|
||||
}
|
||||
throw new Error("Could not parse to an rgba value.");
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a css rgb, rgba, hex, hsl(a), or rgba hex to an hsla array.
|
||||
*
|
||||
* @param {string} color The string that contains the color information.
|
||||
* @returns {number[]} An array that contains the h, s, l and alpha channel components.
|
||||
* @returns {number[]|null} An array that contains the h, s, l and alpha channel components. Returns null if there was an issue parsing the input.
|
||||
*/
|
||||
export function parseColorToHsla(color) {
|
||||
if (color.startsWith("rgba(")) {
|
||||
@ -127,6 +127,7 @@ export function parseColorToHsla(color) {
|
||||
} else if (color.startsWith("hsl(")) {
|
||||
return cssHslaToHsla(color);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -23,8 +23,10 @@
|
||||
</div>
|
||||
<div class="part">
|
||||
<h2>Playback</h2>
|
||||
<p>Since the usage of playback is the same as a normal {@link module:player/MusicPlayer}, see [the MusicPlayer tutorial]{@tutorial MusicPlayer} for more information.</p>
|
||||
<p>Since the usage of playback is the same as a normal {@link module:player/MusicPlayer}, see [the MusicPlayer tutorial]{@tutorial MusicPlayer} for more information. We also added the playlist display to show you which song you're listening to.</p>
|
||||
<div class="result">
|
||||
<div id="playlist-display">
|
||||
</div>
|
||||
<div id="playback-ctrls">
|
||||
</div>
|
||||
</div>
|
||||
@ -40,16 +42,15 @@
|
||||
</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>
|
||||
<pre><code class="language-js">
|
||||
const widthElem = document.getElementById("width-map-demo"); // selecting an element.
|
||||
ask.mappings.dimensions.width({ // 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.
|
||||
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>
|
||||
@ -60,9 +61,8 @@
|
||||
<div id="height-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
const heightElem = document.getElementById("height-map-demo"); // Only big difference is the function being called.
|
||||
ask.mappings.dimensions.height({
|
||||
element: heightElem,
|
||||
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",
|
||||
@ -80,9 +80,8 @@
|
||||
<div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
||||
</div>
|
||||
<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,
|
||||
element: document.getElementById("square-map-demo"), // Same stuff as before..
|
||||
growLower: 0.5,
|
||||
growUpper: 8,
|
||||
unit: "rem",
|
||||
@ -104,9 +103,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
const fontColorRgbaElem = document.getElementById("font-color-rgba-map-demo");
|
||||
ask.mappings.coloring.fontColorRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
|
||||
element: fontColorRgbaElem, // The element to map (same as above examples).
|
||||
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,
|
||||
@ -122,9 +120,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-js">
|
||||
const fontColorHslElem = document.getElementById("font-color-hsla-map-demo");
|
||||
ask.mappings.coloring.fontColorHsla({ // Similar to the rgba example, except now with hsla.
|
||||
element: fontColorHslElem,
|
||||
element: document.getElementById("font-color-hsla-map-demo"),
|
||||
select: "h", // Selecting the "hue" component.
|
||||
lowerBin: 200,
|
||||
upperBin: 220,
|
||||
@ -135,11 +132,36 @@
|
||||
|
||||
<div class="part">
|
||||
<h3>Mapping Background Color</h3>
|
||||
<p>This is kind of like the one for fonts, except, instead, for background colors!</p>
|
||||
<p>This is kind of like the one for fonts, except, instead, rgba for background colors!</p>
|
||||
<div class="result">
|
||||
<div id="bg-color-map-demo">
|
||||
<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>
|
||||
@ -151,6 +173,8 @@
|
||||
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");
|
||||
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
|
||||
|
||||
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();
|
||||
@ -160,9 +184,8 @@
|
||||
playbackCtrlsElem.appendChild(playElem);
|
||||
playbackCtrlsElem.appendChild(nextElem);
|
||||
|
||||
const widthElem = document.getElementById("width-map-demo");
|
||||
ask.mappings.dimensions.width({
|
||||
element: widthElem,
|
||||
element: document.getElementById("width-map-demo"),
|
||||
growLower: 2,
|
||||
growUpper: 8,
|
||||
unit: "rem",
|
||||
@ -172,9 +195,8 @@
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
const heightElem = document.getElementById("height-map-demo");
|
||||
ask.mappings.dimensions.height({
|
||||
element: heightElem,
|
||||
element: document.getElementById("height-map-demo"),
|
||||
growLower: 2,
|
||||
growUpper: 8,
|
||||
unit: "rem",
|
||||
@ -184,9 +206,8 @@
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
const squareElem = document.getElementById("square-map-demo");
|
||||
const squareElemConf = {
|
||||
element: squareElem,
|
||||
element: document.getElementById("square-map-demo"),
|
||||
growLower: 0.5,
|
||||
growUpper: 8,
|
||||
unit: "rem",
|
||||
@ -198,9 +219,8 @@
|
||||
ask.mappings.dimensions.width(squareElemConf);
|
||||
ask.mappings.dimensions.height(squareElemConf);
|
||||
|
||||
const fontColorRgbaElem = document.getElementById("font-color-rgba-map-demo");
|
||||
ask.mappings.coloring.fontColorRgba({
|
||||
element: fontColorRgbaElem,
|
||||
element: document.getElementById("font-color-rgba-map-demo"),
|
||||
select: "r",
|
||||
lowerBin: 128,
|
||||
upperBin: 160,
|
||||
@ -208,13 +228,30 @@
|
||||
interpolator: ask.support.easings.createEaseLinear(2.5)
|
||||
});
|
||||
|
||||
const fontColorHslElem = document.getElementById("font-color-hsla-map-demo");
|
||||
ask.mappings.coloring.fontColorHsla({
|
||||
element: fontColorHslElem,
|
||||
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