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

Added font color mapping function.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-17 01:29:37 -05:00
parent 6cac185c9b
commit 49bfab6dd8
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/mapping/text.js Normal file
View File

@ -0,0 +1,23 @@
import { parseColor, rgbaToHexRgba } from "./colors.js";
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
/**
* Maps the red component of the text color to a certain range of bins.
*
* @param {HTMLElement} element The element whose text's red value should be mapped.
* @param {number} color Where 0 for red, 1, for blue, 2 for green, and 3 for alpha.
* @param {number} min The lower bound of the bins to be mapped.
* @param {VisualizerUpdateManager} visUpdateManager The visualizer update manager associated with the audio playback you would like the mapping with.
* @param {import("./easings.js").interpolator} interpolator The interpolation function to use.
* @param {number} [max=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} [reversed=true] If true, then the quieter, the greater the red value.
*/
export function mapColor(element, color, min, visUpdateManager, interpolator, max = undefined, reversed = false) {
if (!max) max = min;
visUpdateManager.addVisualizerRangeUpdateListener(min, max, (timeDelta, amp) => {
const rgba = parseColor(element.style.color);
rgba[color] = interpolator(rgba[color], amp, timeDelta);
if (reversed) rgba[color] = 255 - rgba[color];
element.style.color = rgbaToHexRgba(rgba);
});
}