ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added options for bounds on text color mapping values.

Browse Source 
Refactored how mapping functions were organized.
This commit is contained in:
Harrison Deng 2022-04-21 01:46:44 -05:00
parent 13f73132eb
commit 5dcbef2b63
5 changed files with 96 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/mappings/coloring.js Normal file
View File

@ -0,0 +1,55 @@
import { parseColor, rgbaToHexRgba } from "../support/colors.js";
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
/**@module */
/**
* Maps the red component of the text color to a certain range of bins.
*
* @param {object} conf The configuration of the mapping.
* @param {HTMLElement} conf.element The element whose text's red value should be mapped.
* @param {number} conf.color Where r for red, g, for green, b for blue, and a for alpha.
* @param {number} conf.lowerBin The lower bound of the bins to be mapped.
* @param {VisUpdateRouter} conf.visUpdateRouter The visualizer update manager associated with the audio playback you would like the mapping with.
* @param {Function} conf.interpolator The interpolation function to use.
* @param {number} [conf.upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used.
* @param {boolean} [conf.reversed=true] If true, then the quieter, the greater the red value.
* @param {number} [conf.lowerVal=0] The lower boundary of possible values for the color component (0 to upperVal inclusive).
* @param {number} [conf.upperVal=0] The upper boundary of possible values for the color component (0 to 255 inclusive).
* @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The ranged listener that was added.
*/
export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false, lowerVal = 0, upperVal = 255 }) {
const rgbaStr = "rgba";
color = rgbaStr.indexOf(color);
if (color < 0) throw new Error("Invalid color parameter provided.");
const getter = () => {
if (!element.style.color) element.style.color = "rgba(0, 0, 0, 255)";
return parseColor(element.style.color)[color];
};
const setter = (value) => {
const changed = parseColor(element.style.color);
changed[color] = value;
element.style.color = rgbaToHexRgba(changed);
};
upperVal = Math.min(Math.max(0, upperVal), 255);
lowerVal = Math.min(Math.max(0, lowerVal), upperVal);
const conf = {
minVal: lowerBin,
maxVal: upperVal,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateRouter: visUpdateRouter,
reversed: reversed
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}

36
src/mappings/dimensions.js
View File

@ -78,3 +78,39 @@ export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUp
}
return mapBinNumerical(conf);
}
/**
*
* @param {object} fontSizeMapConfiguration The configuration of the font size mapping.
* @param {HTMLElement} fontSizeMapConfiguration.element The element whose font sizes will be mapped to the amplitude.
* @param {number} fontSizeMapConfiguration.growLower The lower limit of the font size.
* @param {number} fontSizeMapConfiguration.growUpper The upper limit of the font size.
* @param {string} fontSizeMapConfiguration.unit The unit the upper and lower bounds are measured in.
* @param {number} fontSizeMapConfiguration.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
* @param {VisUpdateRouter} fontSizeMapConfiguration.visUpdateRouter the visualizer update manager to be mapped to.
* @param {module:support/easings~interpolator} fontSizeMapConfiguration.interpolator The interpolation function to be used to transition from one value to the next.
* @param {number} [fontSizeMapConfiguration.upperBin=undefined] The upper bin, or undefined, which results in mapping to a single bin.
* @param {boolean} [fontSizeMapConfiguration.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
* @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 mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => parseInt(element.style.fontSize);
const setter = (value) => element.style.fontSize = value + unit;
const conf = {
minVal: growLower,
maxVal: growUpper,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateRouter: visUpdateRouter,
reversed: reversed
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}

4
src/mappings/mappings.js
View File

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

88
src/mappings/text.js
View File

@ -1,88 +0,0 @@
import { parseColor, rgbaToHexRgba } from "../support/colors.js";
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
/**@module */
/**
* Maps the red component of the text color to a certain range of bins.
*
* @param {object} rgbaMapConfiguration The configuration of the mapping.
* @param {HTMLElement} rgbaMapConfiguration.element The element whose text's red value should be mapped.
* @param {number} rgbaMapConfiguration.color Where r for red, g, for green, b for blue, and a for alpha.
* @param {number} rgbaMapConfiguration.lowerBin The lower bound of the bins to be mapped.
* @param {VisUpdateRouter} rgbaMapConfiguration.visUpdateRouter The visualizer update manager associated with the audio playback you would like the mapping with.
* @param {Function} rgbaMapConfiguration.interpolator The interpolation function to use.
* @param {number} [rgbaMapConfiguration.upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used.
* @param {boolean} [rgbaMapConfiguration.reversed=true] If true, then the quieter, the greater the red value.
* @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The ranged listener that was added.
*/
export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
const rgbaStr = "rgba";
color = rgbaStr.indexOf(color);
if (color < 0) throw new Error("Invalid color parameter provided.");
const getter = () => {
if (!element.style.color) element.style.color = "rgba(0, 0, 0, 255)";
return parseColor(element.style.color)[color];
};
const setter = (value) => {
const changed = parseColor(element.style.color);
changed[color] = value;
element.style.color = rgbaToHexRgba(changed);
};
const conf = {
minVal: 0,
maxVal: 255,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateRouter: visUpdateRouter,
reversed: reversed
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}
/**
*
* @param {object} fontSizeMapConfiguration The configuration of the font size mapping.
* @param {HTMLElement} fontSizeMapConfiguration.element The element whose font sizes will be mapped to the amplitude.
* @param {number} fontSizeMapConfiguration.growLower The lower limit of the font size.
* @param {number} fontSizeMapConfiguration.growUpper The upper limit of the font size.
* @param {string} fontSizeMapConfiguration.unit The unit the upper and lower bounds are measured in.
* @param {number} fontSizeMapConfiguration.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
* @param {VisUpdateRouter} fontSizeMapConfiguration.visUpdateRouter the visualizer update manager to be mapped to.
* @param {module:support/easings~interpolator} fontSizeMapConfiguration.interpolator The interpolation function to be used to transition from one value to the next.
* @param {number} [fontSizeMapConfiguration.upperBin=undefined] The upper bin, or undefined, which results in mapping to a single bin.
* @param {boolean} [fontSizeMapConfiguration.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
* @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 mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => parseInt(element.style.fontSize);
const setter = (value) => element.style.fontSize = value + unit;
const conf = {
minVal: growLower,
maxVal: growUpper,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateRouter: visUpdateRouter,
reversed: reversed
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}
// TODO: Future: map hue

4
tutorials/VisMusicPlayer.html
View File

@ -105,7 +105,7 @@
</div>
<pre><code class="language-js">
const fontColorElem = document.getElementById("font-color-map-demo");
ask.mappings.text.mapRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
ask.mappings.coloring.mapRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
element: fontColorElem, // The element to map (same as above examples).
color: "r", // Choose the red component.
lowerBin: 128, // All other values are what we've seen above.
@ -173,7 +173,7 @@
ask.mappings.dimensions.mapHeight(squareElemConf);
const fontColorElem = document.getElementById("font-color-map-demo");
ask.mappings.text.mapRgba({
ask.mappings.coloring.mapRgba({
element: fontColorElem,
color: "r",
lowerBin: 128,