Systems and interaction developer
{
replay;
const scene = new THREE.Scene();
const [[w, animate, particleSize], [sigma, beta, rho]] = values;
if (!animate) {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
controls.addEventListener("change", () => renderer.render(scene, camera));
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
'position',
new THREE.Float32BufferAttribute(startPositions, 3)
);
const material = new THREE.PointsMaterial({
size: particleSize,
color: 0xffffff,
transparent: true,
opacity: 0.4
});
const points = new THREE.Points(geometry, material);
points.position.z = -Math.sqrt(w);
scene.add(points);
let t = 0;
const dt = 0.01;
const positions = points.geometry.attributes.position.array;
while (true) {
t += dt;
await Promises.delay(10);
if (animate) {
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.position.x = Math.sin(t / 2) * camOffset;
camera.position.z = Math.cos(t / 2) * camOffset;
}
for (let i = 0; i < positions.length; ++i) {
if (i % 3 === 0) {
// dx = sigma(y - x) dt
const dx = sigma * (positions[i + 1] - positions[i]) * dt;
positions[i] += dx;
}
if (i % 3 === 1) {
// dy = x(rho - z) - y dt
const dy =
(positions[i - 1] * (rho - positions[i + 1]) - positions[i]) * dt;
positions[i] += dy;
}
if (i % 3 === 2) {
// dz = xy - beta z dt
const dz =
(positions[i - 2] * positions[i - 1] - beta * positions[i]) * dt;
positions[i] += dz;
}
}
points.geometry.attributes.position.needsUpdate = true;
renderer.render(scene, camera);
yield renderer.domElement;
}
}
startPositions = {
const [[w]] = values;
const n = w * w;
const positions = [];
for (let i = 0; i < n / 2; ++i) {
const x = i % w - ((w - 1) / 2) + Math.random() - 0.5;
const y = i % w - ((w - 1) / 2) + Math.random() - 0.5;
const z = Math.floor(i / w);
positions.push(x, y, z);
}
yield positions;
}
renderer = {
const renderer = new THREE.WebGLRenderer({
antialias: true,
transparent: true
});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
return renderer;
}
camera = {
const fov = 25;
const aspect = width / height;
const near = 0.001;
const far = 10000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 1, -camOffset);
return camera;
}
camOffset = 90
height = width * 0.7
import { inputsGroup } from '@bumbeishvili/input-groups'
import { slider, checkbox } from '@jashkenas/inputs'
THREE = {
const THREE = (window.THREE = await require("three@0.110.0/build/three.min.js"));
await require("three@0.110.0/examples/js/controls/OrbitControls.js").catch(
() => {}
);
return THREE;
}
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.
