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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.