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

Added width and height property mapping.

Browse Source 
Changed some documentation notation and refactored previous code.
This commit is contained in:
Harrison Deng 2022-04-17 14:58:00 -05:00
parent 16089881d6
commit 905d44760b
3 changed files with 102 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/mapping/dimensions.js Normal file
View File

@ -0,0 +1,78 @@
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
import { mapBinNumerical, mapRangedAvgNumerical } from "./generic.js";
/**
* Maps the width of an element to frequency bin(s).
*
* @param {object} conf The configuration for mapping amplitudes to a width CSS property.
* @param {HTMLElement} conf.element The html element to map the width to.
* @param {number} conf.growLower The lower limit of the width.
* @param {number} conf.growUpper The upper limit of the width.
* @param {string} conf.unit The unit the upper and lower bounds are measured in.
* @param {number} conf.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
* @param {VisualizerUpdateManager} conf.visUpdateManager The visualizer update manager to be mapped to.
* @param {interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next.
* @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin.
* @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
* @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
*/
export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => element.style.width;
const setter = (value) => element.style.width = value + unit;
const conf = {
minVal: growLower,
maxVal: growUpper,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateManager: visUpdateManager,
reversed: reversed
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}
/**
* Maps the height of an element to frequency bin(s).
*
* @param {object} conf The configuration for mapping amplitudes to a height CSS property.
* @param {HTMLElement} conf.element The html element to map the height to.
* @param {number} conf.growLower The lower limit of the height.
* @param {number} conf.growUpper The upper limit of the height.
* @param {string} conf.unit The unit the upper and lower bounds are measured in.
* @param {number} conf.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
* @param {VisualizerUpdateManager} conf.visUpdateManager The visualizer update manager to be mapped to.
* @param {interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next.
* @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin.
* @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
* @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
*/
export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => element.style.height;
const setter = (value) => element.style.height = value + unit;
const conf = {
minVal: growLower,
maxVal: growUpper,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateManager: visUpdateManager,
reversed: reversed
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}

25
src/mapping/generic.js
View File

@ -4,28 +4,6 @@
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
// TODO: Figure out how to not need this defined multiple times.
/**
* @callback interpolator
* @param {number} current the current value.
* @param {number} dest the destination value.
* @param {number} frameDelta the time elapsed since the last update.
* @returns {number} the new current value.
*/
/**
* @callback VisualizerUpdateManager.visualizerRangedUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} bins the bins of the range.
*/
/**
* @callback VisualizerUpdateManager.visualizerBinUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} amplitude The amplitude of the associated bin.
* @param {number} ampDelta change in amplitude of the frequency bin.
*/
/**
*
* @callback numericalGetter
@ -105,5 +83,4 @@ export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpola
return listener;
}
return null; // Technically doesn't occur since the functions are anonymous?
}
}

84
src/mapping/text.js
View File

@ -2,27 +2,6 @@ import { parseColor, rgbaToHexRgba } from "./colors.js";
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
import { mapBinNumerical, mapRangedAvgNumerical } from "./generic.js";
// TODO: Future: Should be able to remove this since already declared in easings.js, but don't know how to link.
/**
* @callback interpolator
* @param {number} current the current value.
* @param {number} dest the destination value.
* @param {number} frameDelta the time elapsed since the last update.
* @returns {number} the new current value.
*/
/**
* @callback VisualizerUpdateManager.visualizerRangedUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} bins the bins of the range.
*/
/**
* @callback VisualizerUpdateManager.visualizerBinUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} amplitude The amplitude of the associated bin.
* @param {number} ampDelta change in amplitude of the frequency bin.
*/
/**
* Maps the red component of the text color to a certain range of bins.
@ -47,30 +26,23 @@ export function mapRgba({ element, color, lowerBin, visUpdateManager, interpolat
changed[color] = value;
element.style.color = rgbaToHexRgba(changed);
};
if (!upperBin) {
return mapBinNumerical({
minVal: 0,
maxVal: 255,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateManager: visUpdateManager,
reversed: reversed
});
}
// TODO: Future: Could use the same object and modify
return mapRangedAvgNumerical({
const conf = {
minVal: 0,
maxVal: 255,
lowerBin: lowerBin,
upperBin: upperBin,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateManager: visUpdateManager,
reversed: reversed
});
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}
/**
@ -85,38 +57,28 @@ export function mapRgba({ element, color, lowerBin, visUpdateManager, interpolat
* @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: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The ranged listener that was added.
* @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
*/
export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => {
return parseInt(element.style.fontSize);
};
const setter = (value) => {
element.style.fontSize = value + unit;
};
if (!upperBin) {
return mapBinNumerical({
minVal: growLower,
maxVal: growUpper,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateManager: visUpdateManager,
reversed: reversed
});
}
return mapRangedAvgNumerical({
const getter = () => parseInt(element.style.fontSize);
const setter = (value) => element.style.fontSize = value + unit;
const conf = {
minVal: growLower,
maxVal: growUpper,
lowerBin: lowerBin,
upperBin: upperBin,
bin: lowerBin,
getter: getter,
setter: setter,
interpolator: interpolator,
visUpdateManager: visUpdateManager,
reversed: reversed
});
};
if (upperBin) {
conf.bin = undefined;
conf.lowerBin = lowerBin;
conf.upperBin = upperBin;
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}
// TODO: Future: map hue