Added width and height property mapping.
Changed some documentation notation and refactored previous code.
This commit is contained in:
parent
16089881d6
commit
905d44760b
78
src/mapping/dimensions.js
Normal file
78
src/mapping/dimensions.js
Normal 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);
|
||||||
|
}
|
@ -4,28 +4,6 @@
|
|||||||
|
|
||||||
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
|
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
|
* @callback numericalGetter
|
||||||
@ -105,5 +83,4 @@ export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpola
|
|||||||
return listener;
|
return listener;
|
||||||
}
|
}
|
||||||
return null; // Technically doesn't occur since the functions are anonymous?
|
return null; // Technically doesn't occur since the functions are anonymous?
|
||||||
}
|
}
|
||||||
|
|
@ -2,27 +2,6 @@ import { parseColor, rgbaToHexRgba } from "./colors.js";
|
|||||||
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
|
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
|
||||||
import { mapBinNumerical, mapRangedAvgNumerical } from "./generic.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.
|
* 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;
|
changed[color] = value;
|
||||||
element.style.color = rgbaToHexRgba(changed);
|
element.style.color = rgbaToHexRgba(changed);
|
||||||
};
|
};
|
||||||
if (!upperBin) {
|
const conf = {
|
||||||
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({
|
|
||||||
minVal: 0,
|
minVal: 0,
|
||||||
maxVal: 255,
|
maxVal: 255,
|
||||||
lowerBin: lowerBin,
|
bin: lowerBin,
|
||||||
upperBin: upperBin,
|
|
||||||
getter: getter,
|
getter: getter,
|
||||||
setter: setter,
|
setter: setter,
|
||||||
interpolator: interpolator,
|
interpolator: interpolator,
|
||||||
visUpdateManager: visUpdateManager,
|
visUpdateManager: visUpdateManager,
|
||||||
reversed: reversed
|
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 {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 {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.
|
* @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 }) {
|
export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
|
||||||
const getter = () => {
|
const getter = () => parseInt(element.style.fontSize);
|
||||||
return parseInt(element.style.fontSize);
|
const setter = (value) => element.style.fontSize = value + unit;
|
||||||
};
|
const conf = {
|
||||||
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({
|
|
||||||
minVal: growLower,
|
minVal: growLower,
|
||||||
maxVal: growUpper,
|
maxVal: growUpper,
|
||||||
lowerBin: lowerBin,
|
bin: lowerBin,
|
||||||
upperBin: upperBin,
|
|
||||||
getter: getter,
|
getter: getter,
|
||||||
setter: setter,
|
setter: setter,
|
||||||
interpolator: interpolator,
|
interpolator: interpolator,
|
||||||
visUpdateManager: visUpdateManager,
|
visUpdateManager: visUpdateManager,
|
||||||
reversed: reversed
|
reversed: reversed
|
||||||
});
|
};
|
||||||
|
if (upperBin) {
|
||||||
|
conf.bin = undefined;
|
||||||
|
conf.lowerBin = lowerBin;
|
||||||
|
conf.upperBin = upperBin;
|
||||||
|
return mapRangedAvgNumerical(conf);
|
||||||
|
}
|
||||||
|
return mapBinNumerical(conf);
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Future: map hue
|
// TODO: Future: map hue
|
Loading…
Reference in New Issue
Block a user