I am an Information Designer based in Berlin, mainly interested in exploring the intersection of technology, data, and design.
p5((s) => {
let mic;
let fft;
let vid;
let bassThreshold = 100;
let lastPeakTime, randHue;
let threshold = 150;
s.setup = function () {
s.colorMode(s.HSL, 360, 100, 100);
s.createCanvas(width, height);
mic = new pSound.AudioIn();
mic.start();
fft = new pSound.FFT();
fft.setInput(mic);
vid = s.createVideo(videoUrl);
vid.size(width, height);
vid.volume(0);
vid.loop();
vid.hide();
};
s.draw = function () {
// Analyze audio spectrum
let spectrum = fft.analyze();
let peak = Math.max(...spectrum);
let peakIndex = spectrum.indexOf(peak);
let bassEnergy = fft.getEnergy("bass");
let bpm = s.map(bassEnergy, 0, 255, 60, 180);
let speed = s.map(bpm, 60, 200, 1, 5);
if (bassEnergy >= 90) {
vid.speed(speed);
} else {
vid.speed(0.5);
}
if (peak > threshold && peakIndex < 10 && s.millis() - lastPeakTime > 500) {
let direction = 1;
let range = s.random(1, 5);
direction = Math.random() > 0.5 ? range : -range;
vid.time(vid.time() + direction);
lastPeakTime = s.millis() + direction;
}
if (s.frameCount % 60 === 0) {
randHue = s.random(360);
}
s.image(vid.get(), 0, 0);
if (peakIndex >= 10) {
let duplicatedImage = vid.get();
duplicatedImage.filter(s.GRAY);
duplicatedImage.filter(s.THRESHOLD);
s.blendMode(s.DIFFERENCE);
s.tint(randHue, 100, 50, 80);
s.image(duplicatedImage, 0, 0);
s.noTint();
s.blendMode(s.BLEND);
}
};
})
height = 500
import {p5} from "@thometnanni/p5"
pSound = require("p5").then(async (p5) => {
await require("p5@0.9.0/lib/addons/p5.sound.min.js");
return p5;
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
