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

Started combining

Browse source
This commit is contained in:
Benjamin Bädorf 2019-06-13 22:31:04 +02:00
parent b841512411
commit b9483fbcf0
5 changed files with 126 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/circles.js Normal file
View file

@ -0,0 +1,30 @@
const VOLUME_THRESHOLD = 20;
const CIRCLE_RADIUS = 100;
const CIRCLE_POINTS = 256;
const FFT_SIZE = CIRCLE_POINTS;
const MAX_CIRCLES = 20;
export function setup(sketch, analyser) {
sketch.createCanvas(window.innerWidth, window.innerHeight);
sketch.colorMode(sketch.HSL, 255);
}
export function draw(sketch) {
sketch.background(30);
sketch.noFill();
sketch.strokeWeight(2);
sketch.stroke(230);
for (let c = 0; c < circles.length; c++) {
const circle = circles[c];
sketch.beginShape();
for (let i = 0; i < circle.spectrum.length; i++) {
const p = circle.spectrum[i];
sketch.curveVertex(
Math.cos((i / CIRCLE_POINTS) * 2 * Math.PI) * (CIRCLE_RADIUS + c * 15) + baseWidth + (maxVolume / 2 - circle.volume) + p,
Math.sin((i / CIRCLE_POINTS) * 2 * Math.PI) * (CIRCLE_RADIUS + c * 15) + baseHeight + (maxPitch / 2 - circle.pitch) - p,
);
}
sketch.endShape(sketch.CLOSE);
}
}

35
src/horizontal-lines.js Normal file
View file

@ -0,0 +1,35 @@
const VOLUME_THRESHOLD = 20;
const LINE_MARGIN = 20;
const MAX_LINES = window.innerWidth / LINE_MARGIN;
const FFT_SIZE = 256;
export function setup(sketch, analyser) {
sketch.colorMode(sketch.HSL, 255);
sketch.background(0);
analyser.fftSize = FFT_SIZE;
}
export function draw(sketch) {
const image = sketch.drawingContext.getImageData(0, 0, (window.innerWidth - LINE_MARGIN) * 2, window.innerHeight * 2);
sketch.drawingContext.putImageData(image, LINE_MARGIN * 2, 0);
sketch.noStroke();
sketch.fill(0);
sketch.rect(0, 0, LINE_MARGIN, window.innerHeight);
const lineBaseWidth = baseWidth;
sketch.fill(`rgba(255, 255, 255, 0.2)`);
sketch.stroke(((line.pitch - minPitch) / (maxPitch - minPitch)) * 255);
sketch.strokeWeight(1);
sketch.beginShape();
sketch.curveVertex(lineBaseWidth, -10);
sketch.curveVertex(lineBaseWidth, -10);
sketch.curveVertex(lineBaseWidth, 0);
for (let i = 1; i < line.spectrum.length - 1; i++) {
const point = line.spectrum[i];
sketch.curveVertex(lineBaseWidth + point, i * spectrumPointHeight);
}
sketch.curveVertex(lineBaseWidth, window.innerHeight);
sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
sketch.endShape();
}

63
src/index.js
View file

@ -1,46 +1,11 @@
import p5 from 'p5'; import p5 from 'p5';
import './index.scss'; import './index.scss';
const FFT_SIZE = 256;
const VOLUME_THRESHOLD = 20;
const LINE_MARGIN = 20;
const MAX_LINES = window.innerWidth / LINE_MARGIN;
function getRMS(spectrum) {
let rms = 0;
for (let i = 0; i < spectrum.length; i++) {
rms += spectrum[i] * spectrum[i];
}
rms /= spectrum.length;
rms = Math.sqrt(rms);
return rms;
}
function getPitch(spectrum) {
let cg = 0;
let weight = 0;
for (let i = 0; i < spectrum.length; i++) {
cg += spectrum[i] * i;
weight += spectrum[i];
}
return Math.floor(cg / weight);
}
function getRandomX() {
return Math.floor(Math.random() * window.innerWidth);
}
function getRandomY() {
return Math.floor(Math.random() * window.innerHeight);
}
async function main() { async function main() {
const audioCtx = new AudioContext(); const audioCtx = new AudioContext();
const microphone = await navigator.mediaDevices.getUserMedia({ audio: true }); const microphone = await navigator.mediaDevices.getUserMedia({ audio: true });
const analyser = new AnalyserNode(audioCtx); const analyser = new AnalyserNode(audioCtx);
analyser.smoothingTimeConstant = 0.2; analyser.smoothingTimeConstant = 0.2;
analyser.fftSize = FFT_SIZE;
let line; let line;
let fresh = false; let fresh = false;
@ -88,8 +53,6 @@ async function main() {
const instance = new p5(( sketch ) => { const instance = new p5(( sketch ) => {
sketch.setup = () => { sketch.setup = () => {
sketch.createCanvas(window.innerWidth, window.innerHeight); sketch.createCanvas(window.innerWidth, window.innerHeight);
sketch.colorMode(sketch.HSL, 255);
sketch.background(0);
}; };
sketch.draw = () => { sketch.draw = () => {
@ -99,34 +62,8 @@ async function main() {
fresh = false; fresh = false;
const image = sketch.drawingContext.getImageData(0, 0, (window.innerWidth - LINE_MARGIN) * 2, window.innerHeight * 2);
sketch.drawingContext.putImageData(image, LINE_MARGIN * 2, 0);
sketch.noStroke();
sketch.fill(0);
sketch.rect(0, 0, LINE_MARGIN, window.innerHeight);
const lineBaseWidth = baseWidth;
sketch.fill(`rgba(255, 255, 255, 0.2)`);
sketch.stroke(((line.pitch - minPitch) / (maxPitch - minPitch)) * 255);
sketch.strokeWeight(1);
sketch.beginShape();
sketch.curveVertex(lineBaseWidth, -10);
sketch.curveVertex(lineBaseWidth, -10);
sketch.curveVertex(lineBaseWidth, 0);
for (let i = 1; i < line.spectrum.length - 1; i++) {
const point = line.spectrum[i];
sketch.curveVertex(lineBaseWidth + point, i * spectrumPointHeight);
}
sketch.curveVertex(lineBaseWidth, window.innerHeight);
sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
sketch.endShape();
}; };
}); });
setTimeout(() => {
// analyser.disconnect();
}, 5000);
} }
main(); main();

37
src/squares.js Normal file
View file

@ -0,0 +1,37 @@
const VOLUME_THRESHOLD = 20;
const GRID_SIZE = 20;
const MAX_WIDTH = 5;
const MAX_HEIGHT = 8;
const FFT_SIZE = 1024;
export function setup(sketch, analyser) {
sketch.background('rgb(20, 30, 30)');
sketch.colorMode(sketch.HSB);
analyser.fftSize = FFT_SIZE;
}
export function draw(sketch) {
sketch.background('rgba(20, 30, 30, 0.01)');
if (!circle) {
return;
}
const color = ((circle.pitch - minPitch) / (maxPitch - minPitch)) * 360;
const brightness = ((circle.volume - minVolume) / (maxVolume - minVolume));
sketch.stroke(color, 100, 100, brightness);
for (let i = 0; i < circle.spectrum.length + 2; i++) {
const p = circle.spectrum[i - 2] * i * i * i * i / 2;
const x = getRandomBetween(0, Math.floor(window.innerWidth / GRID_SIZE)) * GRID_SIZE;
const y = getRandomBetween(0, Math.floor(window.innerHeight / GRID_SIZE)) * GRID_SIZE;
// const width = getRandomBetween(1, MAX_WIDTH) * GRID_SIZE;
// const height = getRandomBetween(1, MAX_HEIGHT) * GRID_SIZE;
sketch.fill(color, 100, 100, brightness * 0.5);
sketch.beginShape();
sketch.vertex(x, y);
sketch.vertex(x, y + GRID_SIZE);
sketch.vertex(x + GRID_SIZE, y + GRID_SIZE);
sketch.vertex(x + GRID_SIZE, y);
sketch.vertex(x, y);
sketch.endShape();
}
}

24
src/util.js Normal file
View file

@ -0,0 +1,24 @@
export function getRMS(spectrum) {
let rms = 0;
for (let i = 0; i < spectrum.length; i++) {
rms += spectrum[i] * spectrum[i];
}
rms /= spectrum.length;
rms = Math.sqrt(rms);
return rms;
}
export function getPitch(spectrum) {
let cg = 0;
let weight = 0;
for (let i = 0; i < spectrum.length; i++) {
cg += spectrum[i] * i;
weight += spectrum[i];
}
return Math.floor(cg / weight);
}
function getRandomBetween(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}