Published
Edited
Oct 17, 2019
7 stars
position = (a, b, u, v) => {
// Auxiliary functions C(), S()
const C = (theta, eps) => (
Math.sign(Math.cos(theta)) * Math.abs(Math.cos(theta))**eps
);
const S = (theta, eps) => (
Math.sign(Math.sin(theta)) * Math.abs(Math.sin(theta))**eps
);
return new THREE.Vector3(
(a + C(u, s)) * C(v, t),
(b + C(u, s)) * S(v, t),
S(u, s)
);
}
supertoroid = function(s, t) {
const meshes = [];
// Use constant value 2 for a, b
const a = 2;
const b = 2;
const du = Math.PI / 20;
const dv = Math.PI / 20;
d3.range(0, 2*Math.PI, du).forEach(u => {
d3.range(0, 2*Math.PI, dv).forEach(v => {
const param = [
{u: u, v: v },
{u: u+du, v: v },
{u: u+du, v: v+dv},
{u: u, v: v+dv}
];
meshes.push(rect(
...param.map(p => position(a, b, p.u, p.v)),
materials[material]
));
});
});
return meshes;
}
// Make a Plane mesh with specified Material
rect = (v1, v2, v3, v4, material) => {
const planeGeometry = new THREE.Geometry();
// add vertices
[v1, v2, v3, v4].forEach(v => planeGeometry.vertices.push(v));
// add faces
planeGeometry.faces.push(new THREE.Face3(0, 1, 2));
planeGeometry.faces.push(new THREE.Face3(2, 3, 0));
planeGeometry.computeFaceNormals();
// mesh
const plane = new THREE.Mesh( planeGeometry, material );
return plane;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);
supertoroid(s, t).forEach(m => scene.add(m));
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(6, 4, 8)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
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.
