Tech Lead at Taktile.
Formerly Firebase, Google
mutable t = 0.0
buffers = {
const buffers = {
last_t: 0,
positions: new THREE.Float32BufferAttribute( (MAX_SEGMENTS) * 3, 3 ),
colors: new THREE.Float32BufferAttribute( (MAX_SEGMENTS) * 3, 3 ),
lineGeometry: new THREE.BufferGeometry(),
lineMaterial: new THREE.LineBasicMaterial( { color: 0xffffff, vertexColors: true} ),
}
buffers.lineGeometry.setAttribute('position', buffers.positions)
buffers.lineGeometry.setAttribute('color', buffers.colors)
buffers.line = new THREE.Line( buffers.lineGeometry, buffers.lineMaterial )
buffers.lineGeometry.setDrawRange(0, MAX_SEGMENTS);
return buffers;
};
draw = {
const points = [];
const colors = [];
const point = new THREE.Vector3();
const color = new THREE.Color();
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)
// We iterate in time new points.
for ( var i = buffers.last_t; i < t && points.length < MAX_SEGMENTS * 3; i += 10 ) {
point.x = Math.cos((i * 0.0091)) * 0.9 * width / 2 ;
point.y = Math.sin((i * 0.015)) * 0.9 * height / 2;
points.push( point.x, point.y, point.z );
colors.push(color.r, color.g, color.b);
}
// 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, MAX_SEGMENTS * 3 - points.length);
// We also 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.95), 0);
buffers.colors.set(colors, MAX_SEGMENTS * 3 - colors.length);
buffers.positions.needsUpdate = true;
buffers.colors.needsUpdate = true;
buffers.last_t = t;
}
height = 600
MAX_SEGMENTS = 1000;
import {checkbox} from "@jashkenas/inputs"
import { footer } from "@tomlarkworthy/footer"
footer
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.
