Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-23 10:07:35 +00:00
Code Issues Projects Releases Wiki Activity

Move printBarFrame into visualizerUtils

Browse source
This commit is contained in:
Jordan Eldredge 2019-12-23 21:33:50 -08:00
parent 946c270f90
commit e71d7c7f54
2 changed files with 76 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

56
js/components/Visualizer.js
View file

@ -9,11 +9,9 @@ import {
preRenderBar,
paintOscilloscopeFrame,
octaveBucketsForBufferLength,
printBar,
paintBarFrame,
NUM_BARS,
BAR_WIDTH,
PIXEL_DENSITY,
BAR_PEAK_DROP_RATE,
} from "./visualizerUtils";
class Visualizer extends React.Component {
@ -128,51 +126,25 @@ class Visualizer extends React.Component {
break;
case VISUALIZERS.BAR:
this.canvasCtx.drawImage(this.bgCanvas, 0, 0);
this._paintBarFrame();
paintBarFrame({
analyser: this.props.analyser,
dataArray: this.dataArray,
renderHeight: this._renderHeight(),
octaveBuckets: this.octaveBuckets,
barPeaks: this.barPeaks,
barPeakFrames: this.barPeakFrames,
height: this._height(),
canvasCtx: this.canvasCtx,
barCanvas: this.barCanvas,
windowShade: this.props.windowShade,
colors: this.props.colors,
});
break;
default:
this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
_paintBarFrame() {
this.props.analyser.getByteFrequencyData(this.dataArray);
const heightMultiplier = this._renderHeight() / 256;
const xOffset = BAR_WIDTH + PIXEL_DENSITY; // Bar width, plus a pixel of spacing to the right.
for (let j = 0; j < NUM_BARS - 1; j++) {
const start = this.octaveBuckets[j];
const end = this.octaveBuckets[j + 1];
let amplitude = 0;
for (let k = start; k < end; k++) {
amplitude += this.dataArray[k];
}
amplitude /= end - start;
// The drop rate should probably be normalized to the rendering FPS, for now assume 60 FPS
let barPeak =
this.barPeaks[j] -
BAR_PEAK_DROP_RATE * Math.pow(this.barPeakFrames[j], 2);
if (barPeak < amplitude) {
barPeak = amplitude;
this.barPeakFrames[j] = 0;
} else {
this.barPeakFrames[j] += 1;
}
this.barPeaks[j] = barPeak;
printBar({
x: j * xOffset,
_height: amplitude * heightMultiplier,
peakHeight: barPeak * heightMultiplier,
height: this._height(),
canvasCtx: this.canvasCtx,
barCanvas: this.barCanvas,
windowShade: this.props.windowShade,
colors: this.props.colors,
});
}
}
render() {
const { width, height } = this.props;
return (

63
js/components/visualizerUtils.ts
View file

@ -142,7 +142,7 @@ export function paintOscilloscopeFrame({
//
// We use the 2x scale here since we only want to plot values for
// "real" pixels.
const sliceWidth = Math.floor(bufferLength / width()) * PIXEL_DENSITY;
const sliceWidth = Math.floor(bufferLength / width) * PIXEL_DENSITY;
const h = height;
@ -167,6 +167,67 @@ export function paintOscilloscopeFrame({
canvasCtx.stroke();
}
export function paintBarFrame({
analyser,
dataArray,
renderHeight,
octaveBuckets,
barPeaks,
barPeakFrames,
height,
canvasCtx,
barCanvas,
windowShade,
colors,
}: {
analyser: AnalyserNode;
dataArray: Uint8Array /* MUTABLE */;
renderHeight: number;
octaveBuckets: number[];
barPeaks: number[] /* MUTABLE */;
barPeakFrames: number[] /* MUTABLE */;
height: number;
canvasCtx: CanvasRenderingContext2D;
barCanvas: HTMLCanvasElement;
windowShade: boolean;
colors: string[];
}) {
analyser.getByteFrequencyData(dataArray);
const heightMultiplier = renderHeight / 256;
const xOffset = BAR_WIDTH + PIXEL_DENSITY; // Bar width, plus a pixel of spacing to the right.
for (let j = 0; j < NUM_BARS - 1; j++) {
const start = octaveBuckets[j];
const end = octaveBuckets[j + 1];
let amplitude = 0;
for (let k = start; k < end; k++) {
amplitude += dataArray[k];
}
amplitude /= end - start;
// The drop rate should probably be normalized to the rendering FPS, for now assume 60 FPS
let barPeak =
barPeaks[j] - BAR_PEAK_DROP_RATE * Math.pow(barPeakFrames[j], 2);
if (barPeak < amplitude) {
barPeak = amplitude;
barPeakFrames[j] = 0;
} else {
barPeakFrames[j] += 1;
}
barPeaks[j] = barPeak;
printBar({
x: j * xOffset,
_height: amplitude * heightMultiplier,
peakHeight: barPeak * heightMultiplier,
height,
canvasCtx,
barCanvas,
windowShade,
colors,
});
}
}
export function printBar({
x,
_height,