Published
Edited
Oct 6, 2020
1 star
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;
}
futurice_profile
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.
