Tech Lead at Taktile.
Formerly Firebase, Google
Public
Edited
Mar 23, 2024
6 forks
26 stars
resolution = JSON.parse(resolution_str)
draw = {
t; // force this cell to update when time increments
if (source.mediaElement.paused) return;
const width = resolution.width;
const height = resolution.height;
const points = [];
const colors = [];
const point = new THREE.Vector3();
const color = new THREE.Color();
// Rotating colors
color.setRGB(
Math.cos(t * 0.00011) * 0.5 + 1,
Math.cos(t * 0.002) * 0.5 + 1,
Math.cos(t * 0.003) * 0.5 + 1
);
// Positions driven by audio analyser
analyser.getByteTimeDomainData(buffers.dataArray);
for (let i = 0; i < buffers.dataArray.length; i++) {
var mod = 1; // Math.sin(i * Math.PI / buffers.dataArray.length)
var y = ((buffers.dataArray[i] * height) / 256.0 - height / 2.0) * mod;
var x = -width / 2 + (i * width) / buffers.dataArray.length;
points.push(x, y, 0);
colors.push(color.r, color.g, color.b);
}
// loop wave form round to enter the view from the left again
points.push(width * 2, 0, 0);
points.push(width * 2, height * 2, 0);
points.push(-width * 2, height * 2, 0);
points.push(-width * 2, 0, 0);
// The main stratergy is to shift all the buffers down, and append new data points to the end
buffers.positions.set(buffers.positions.array.slice(points.length));
buffers.positions.set(points, buffers.positions.count * 3 - points.length);
buffers.positions.needsUpdate = true;
// Decay the colors by a factor so the old lines fade out
buffers.colors.set(
buffers.colors.array.slice(colors.length).map((x) => x * 0.5),
0
);
buffers.colors.set(colors, buffers.colors.count * 3 - colors.length);
buffers.colors.needsUpdate = true;
}
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.
