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

Redefined modules for some files.

Browse Source
This commit is contained in:
Harrison Deng
2022-04-18 18:23:12 -05:00
parent d466aa8bdd
commit 725a08ea8f
9 changed files with 33 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/mappings/dimensions.js
View File

@@ -1,6 +1,7 @@
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
/**@module */
/**
* Maps the width of an element to frequency bin(s).
@@ -17,7 +18,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
* @param {boolean} [conf.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 mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => parseInt(element.style.width) || 0;
const setter = (value) => element.style.width = value + unit;
const conf = {
@@ -55,7 +56,7 @@ function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRout
* @param {boolean} [conf.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 mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => parseInt(element.style.height) || 0;
const setter = (value) => element.style.height = value + unit;
const conf = {
@@ -76,7 +77,4 @@ function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRou
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}
export { mapWidth, mapHeight };
}

11
src/mappings/numeric.js
View File

@@ -1,5 +1,7 @@
import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
/**@module */
/**
*
* @callback numericalGetter
@@ -28,7 +30,7 @@ import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
* @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.
*/
function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, getter, setter, interpolator, visUpdateRouter, reversed = false }) {
export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, getter, setter, interpolator, visUpdateRouter, reversed = false }) {
console.log("mapping average numerical.");
const rangedListener = {
lower: lowerBin,
@@ -69,7 +71,7 @@ function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin,
* @param {boolean} [conf.reversed] If true, then high amplitudes will be mapped to lower values and vice versa.
* @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}} The bin listener that was added.
*/
function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateRouter, reversed = false }) {
export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateRouter, reversed = false }) {
console.log("mapping numerical...");
const listener = {
bin: bin,
@@ -84,7 +86,4 @@ function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, vi
return listener;
}
return null; // Technically doesn't occur since the functions are anonymous?
}
export { mapRangedAvgNumerical, mapBinNumerical };
}

10
src/mappings/text.js
View File

@@ -2,6 +2,7 @@ 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.
@@ -16,7 +17,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
* @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 }) {
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.");
@@ -62,7 +63,7 @@ function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, uppe
* @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 }) {
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 = {
@@ -84,7 +85,4 @@ function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateR
return mapBinNumerical(conf);
}
// TODO: Future: map hue
export { mapRgba, mapFontSize };
// TODO: Future: map hue

9
src/patterns/canvas.js
View File

@@ -1,12 +1,14 @@
import Visualizer from "../visualization/Visualizer.js";
/**@module */
/**
* Accepts a canvas and uses the entire canvas to draw a horizontal visualizer.
*
* @param {HTMLCanvasElement} canvasElement the canvas element to use to draw this horizontal visualizer.
* @param {Visualizer} visualizer the visualizer in which the data to display is obtained.
*/
function horizontalVisualizer(canvasElement, visualizer) {
export function horizontalVisualizer(canvasElement, visualizer) {
let _width = canvasElement.width;
let _height = canvasElement.height;
let _canvasCtx = canvasElement.getContext("2d");
@@ -24,7 +26,4 @@ function horizontalVisualizer(canvasElement, visualizer) {
});
};
_visualizer.addUpdateListener(update);
}
export { horizontalVisualizer };
}

16
src/support/colors.js
View File

@@ -1,3 +1,4 @@
/**@module */
/**
* Converts from rgba hex value to an array of four numbers representing r, g, b, and a respectively.
@@ -5,7 +6,7 @@
* @param {string} hex the hex value.
* @returns {number[]} the resulting components of the hex value.
*/
function rgbaHexToRgba(hex) {
export function rgbaHexToRgba(hex) {
if (hex.startsWith("#")) {
hex = hex.substring(1);
if (hex.length > 8) {
@@ -31,7 +32,7 @@ function rgbaHexToRgba(hex) {
* @param {string} hex the hex value.
* @returns {number[]} the resulting r, g, and b components.
*/
function rgbHexToRgba(hex) {
export function rgbHexToRgba(hex) {
const result = rgbaHexToRgba(hex + "FF");
return result;
}
@@ -42,7 +43,7 @@ function rgbHexToRgba(hex) {
* @param {string} rgba The CSS rgba(r,g,b,a) call.
* @returns {number[]} the rgba components.
*/
function cssRgbaToRgba(rgba) {
export function cssRgbaToRgba(rgba) {
rgba = rgba.replaceAll(" ", "");
const cssRgbaRegex = /rgba\((\d+),(\d+),(\d+),(\d+)\)/;
try {
@@ -59,7 +60,7 @@ function cssRgbaToRgba(rgba) {
* @param {string} rgb The CSS rgb(r,g,b) call.
* @returns {number[]} the rgba components.
*/
function cssRgbToRgba(rgb) {
export function cssRgbToRgba(rgb) {
rgb = rgb.replaceAll(" ", "");
const cssRgbRegex = /rgb\((\d+),(\d+),(\d+)\)/;
try {
@@ -76,7 +77,7 @@ function cssRgbToRgba(rgb) {
* @param {number[]} rgba an array with red, green, blue, and alpha components in that order.
* @returns {string} The resulting hex value.
*/
function rgbaToHexRgba(rgba) {
export function rgbaToHexRgba(rgba) {
const filler = (hex) => hex.length < 2 ? "0" + hex : hex;
return "#" + filler(rgba[0].toString(16)) + filler(rgba[1].toString(16)) + filler(rgba[2].toString(16)) + filler(rgba[3].toString(16));
}
@@ -90,7 +91,7 @@ function rgbaToHexRgba(rgba) {
* @param {string} color The string that contains the color information.
* @returns {number[]} an array that contains the r, g, b and a components.
*/
function parseColor(color) {
export function parseColor(color) {
if (color.startsWith("rgba(")) {
return cssRgbaToRgba(color);
} else if (color.startsWith("rgb(")) {
@@ -104,6 +105,3 @@ function parseColor(color) {
}
throw new Error("Could not parse to an rgba value.");
}
export { rgbaHexToRgba, rgbHexToRgba, cssRgbaToRgba, cssRgbToRgba, rgbaToHexRgba, parseColor };

5
src/support/easings.js
View File

@@ -1,3 +1,4 @@
/**@module */
/**
* @callback interpolator
@@ -14,7 +15,7 @@
* @param {number} rate the number of frequency values to shift by per second.
* @returns {interpolator} the interpolation function with the given rate.
*/
function createEaseLinear(rate) {
export function createEaseLinear(rate) {
return (current, dest, frameDelta) => {
if (dest < current) {
const res = current - (rate * frameDelta);
@@ -26,5 +27,3 @@ function createEaseLinear(rate) {
};
}
export { createEaseLinear };