90 lines
4.6 KiB
JavaScript
90 lines
4.6 KiB
JavaScript
import { parseColor, rgbaToHexRgba } from "../support/colors.js";
|
|
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
|
|
import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
|
|
|
|
|
|
/**
|
|
* 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 {interpolator} 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: visualizerBinUpdateListener}|{lower: number, upper: number, listener: visualizerRangedUpdateListener}} The ranged listener that was added.
|
|
*/
|
|
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 = "rgb(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 {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).
|
|
*/
|
|
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
|
|
|
|
|
|
export { mapRgba, mapFontSize }; |