Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
THREE = {
const THREE = (window.THREE = await require('three'));
await require('three@0.119.1/examples/js/controls/OrbitControls.js').catch(
() => {}
);
return THREE;
}
scene = {
const scene = new THREE.Scene(); // Create scene
scene.background = new THREE.Color('#444444'); // Modify scene background color
return scene;
}
lathe = {
const material = new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
flatShading: true
});
return new THREE.Mesh(geometry, material);
}
geometry = {
const points = [];
for (let i = 0; i < coords.length; i++) {
points.push(new THREE.Vector2(coords[i][0], coords[i][1]));
}
return new LatheGeometry(points, 80);
}
camera = {
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // Create camera
camera.position.x = -20; // Place the camera at (0,0,3)
camera.lookAt(lathe.position);
return camera;
}
lights = {
const lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
return lights;
}
scene.add(lights[0])
scene.add( lights[ 1 ] );
scene.add(lights[2])
function waveToPoints(frequencies) {
let latheProfile = [];
for (let i = 0; i < frequencies.length * 2; i++) {
latheProfile.push([frequencies[i], i * distanceBetweenDiscs]);
// latheProfile.push([
// frequencies[i] + 0.01,
// i * distanceBetweenDiscs + distanceBetweenDiscs / 2
// ]);
latheProfile.push([
frequencies[i],
i * distanceBetweenDiscs + distanceBetweenDiscs / 2
]);
}
return latheProfile;
}
lerp = (a, b, t) => a * (1 - t) + b * t
map = (n, a, b, c, d) => lerp(c, d, (n - a) / (b - a))
frequencies = {
let amplitudes = [];
amplitudes.push(0.1);
amplitudes.push(0.1);
const wavedataSliced = wavedata.data.slice(
waveformStartEndIndex[0],
waveformStartEndIndex[1]
);
for (let j = 1; j < wavedataSliced.length; j += 2) {
const mappedValue = map(
Math.abs(wavedataSliced[j]),
0,
32767,
0.1,
maxRange
);
amplitudes.push(mappedValue);
}
amplitudes.push(0.1);
amplitudes.push(0.1);
return amplitudes;
}
coords = {
return waveToPoints(frequencies);
// return [[0, 0], [3, 0], [3, 2], [0, 2]];
}
renderer = new THREE.WebGLRenderer({ antialias: true }) // Create renderer
controls = new THREE.OrbitControls(camera, renderer.domElement)
(lathe.name = 'lathe')
rendering = {
renderer.setSize(width, 500); // Set the size of the renderer
renderer.setPixelRatio(devicePixelRatio);
scene.add(lathe);
invalidation.then(() => {
scene.remove(scene.getObjectByName('lathe'));
controls.dispose();
renderer.dispose();
scene.add(lathe);
zoomCameraToSelection(camera, controls, lathe, 1.2);
});
controls.addEventListener("change", () => renderer.render(scene, camera));
while (true) {
controls.update();
renderer.render(scene, camera); // Add the scene and camera to the renderer
yield renderer.domElement;
}
}
import { rangeSlider } from '@mootari/range-slider'
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.
