b12f/vyx-hex
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

FIxed lines

Browse source
This commit is contained in:
Benjamin Bädorf 2019-06-15 00:30:54 +02:00
parent 5673cad5f7
commit 013ec58d8a
4 changed files with 38 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/horizontal-lines.js
View file

@ -3,14 +3,14 @@ import { getSpectrumData } from './util.js';
export default class HorizontalLinesAnimation {
VOLUME_THRESHOLD = 20;
LINE_MARGIN = 20;
LINE_MARGIN = 30;
FFT_SIZE = 256;
BASE_WIDTH = 4;
spectrumPointHeight = 20;
maxLines = 10;
data;
lines = [];
fresh = false;
averageSpectrum;
@ -22,6 +22,7 @@ export default class HorizontalLinesAnimation {
constructor(audioCtx) {
this.analyser = new AnalyserNode(audioCtx);
this.analyser.fftSize = this.FFT_SIZE;
this.analyser.timeSmoothingConstant = 0.2;
this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
this.audioProcessor.onaudioprocess = () => this.audioProcess();
}
@ -60,11 +61,15 @@ export default class HorizontalLinesAnimation {
const data = getSpectrumData(spectrum);
this.worker.postMessage(data);
this.data = data;
this.lines.unshift(data);
if (this.lines.length > this.maxLines + 1) {
this.lines.pop();
}
this.fresh = true;
}
draw(sketch) {
if (!this.fresh) {
return;
@ -72,32 +77,32 @@ export default class HorizontalLinesAnimation {
this.fresh = false;
const image = sketch.drawingContext.getImageData(0, 0, (window.innerWidth - this.LINE_MARGIN) * 2, window.innerHeight * 2);
sketch.drawingContext.putImageData(image, this.LINE_MARGIN * 2, 0);
sketch.noStroke();
sketch.fill(0);
sketch.rect(0, 0, this.LINE_MARGIN, window.innerHeight);
sketch.background(0);
sketch.fill(`rgba(255, 255, 255, 0.2)`);
sketch.fill(`rgba(255, 255, 255, 0.1)`);
sketch.stroke(255, 255, 255);
sketch.strokeWeight(1);
sketch.beginShape();
sketch.curveVertex(this.BASE_WIDTH, -10);
sketch.curveVertex(this.BASE_WIDTH, -10);
sketch.curveVertex(this.BASE_WIDTH, 0);
for (let i = 1; i < this.data.spectrum.length - 1; i++) {
let point;
if (this.averageSpectrum) {
point = Math.max(this.data.spectrum[i] - (this.averageSpectrum[i] * 0.8), 0);
// point = 5 * (this.data.spectrum[i] / this.averageSpectrum[i]);
} else {
point = this.data.spectrum[i];
for (let l = 0; l < this.lines.length; l++) {
const line = this.lines[l];
const baseWidth = this.BASE_WIDTH + this.LINE_MARGIN * l;
sketch.beginShape();
sketch.curveVertex(baseWidth, -10);
sketch.curveVertex(baseWidth, -10);
sketch.curveVertex(baseWidth, 0);
for (let i = 1; i < line.spectrum.length - 1; i++) {
let point;
if (this.averageSpectrum) {
point = Math.max(line.spectrum[i] - (this.averageSpectrum[i] * 0.8), 0) * 2;
// point = 5 * (line.spectrum[i] / this.averageSpectrum[i]);
} else {
point = line.spectrum[i];
}
sketch.curveVertex(baseWidth + point, i * this.spectrumPointHeight);
}
sketch.curveVertex(this.BASE_WIDTH + point, i * this.spectrumPointHeight);
sketch.curveVertex(baseWidth, window.innerHeight);
sketch.curveVertex(baseWidth, window.innerHeight + 10);
sketch.curveVertex(baseWidth, window.innerHeight + 10);
sketch.endShape();
}
sketch.curveVertex(this.BASE_WIDTH, window.innerHeight);
sketch.curveVertex(this.BASE_WIDTH, window.innerHeight + 10);
sketch.curveVertex(this.BASE_WIDTH, window.innerHeight + 10);
sketch.endShape();
}
}

3
src/index.js
View file

@ -6,6 +6,7 @@ import SquaresAnimation from './squares.js';
import CirclesAnimation from './circles.js';
const ANIMATION_TIME = 10 * 60 * 1000;
// const ANIMATION_TIME = 10 * 1000;
async function main() {
const audioCtx = new AudioContext();
@ -17,8 +18,8 @@ async function main() {
const circles = new CirclesAnimation(audioCtx);
const animations = [
horizontalLines,
squares,
horizontalLines,
circles,
];

6
src/sound.worker.js
View file

@ -1,5 +1,5 @@
const PERIOD = 1000;
const CAPTURE_PERIOD = 60 * 1000;
const REPORT_PERIOD = 1 * 1000;
const CAPTURE_PERIOD = 3 * 60 * 1000;
const data = [];
let capture = true;
@ -67,4 +67,4 @@ function calculateAndSend() {
});
}
setInterval(calculateAndSend, PERIOD);
setInterval(calculateAndSend, REPORT_PERIOD);

5
src/squares.js
View file

@ -23,6 +23,7 @@ export default class SquaresAnimation {
constructor(audioCtx) {
this.analyser = new AnalyserNode(audioCtx);
this.analyser.fftSize = this.FFT_SIZE;
this.analyser.timeSmoothingConstant = 0.2;
this.audioProcessor = audioCtx.createScriptProcessor(this.FFT_SIZE * 2, 1, 1);
this.audioProcessor.onaudioprocess = () => this.audioProcess();
}
@ -85,7 +86,7 @@ export default class SquaresAnimation {
}
draw(sketch) {
sketch.background('rgba(20, 30, 30, 0.01)');
sketch.background('rgba(20, 30, 30, 0.02)');
if (!this.fresh) {
return;
}
@ -93,7 +94,7 @@ export default class SquaresAnimation {
const color = ((this.data.pitch - this.minPitch) / (this.maxPitch - this.minPitch)) * 360;
const brightness = ((this.data.volume - this.minVolume) / (this.maxVolume - this.minVolume));
sketch.stroke(color, 100, 100, brightness);
for (let i = 0; i < this.data.spectrum.length + 2; i++) {
for (let i = 0; i < this.data.spectrum.length; i += 4) {
const x = getRandomBetween(0, Math.floor(window.innerWidth / this.GRID_SIZE)) * this.GRID_SIZE;
const y = getRandomBetween(0, Math.floor(window.innerHeight / this.GRID_SIZE)) * this.GRID_SIZE;
sketch.fill(color, 100, 100, brightness * 0.5);