Published
Edited
Sep 12, 2020
1 fork
4 stars
rgbToHsv = (r, g, b) => {
// 0 <= r, g, b <= 255
const minRgb = Math.min(r, g, b);
const maxRgb = Math.max(r, g, b);
let h, s, v;
// 0 <= h <= 360
if (minRgb === maxRgb) h = undefined;
if (minRgb === b) h = 60 * (g - r) / (maxRgb - minRgb) + 60;
if (minRgb === r) h = 60 * (b - g) / (maxRgb - minRgb) + 180;
if (minRgb === g) h = 60 * (r - b) / (maxRgb - minRgb) + 300;
// 0 <= s, v <= 1
v = maxRgb / 255;
s = (maxRgb - minRgb) / 255;
return {h: h, s: s, v: v};
}
cubes = {
const n_split = 16;
const boxRate = density;
const boxSize = boxRate * (1 / n_split);
const meshes = [];
const color = colorFunctions[selected];
for (let i = 0; i < n_split; i++) {
for (let j = 0; j < n_split; j++) {
for (let k = 0; k < n_split; k++) {
const r = Math.round(255 * i / n_split);
const g = Math.round(255 * j / n_split);
const b = Math.round(255 * k / n_split);
const geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
const material = new THREE.MeshBasicMaterial({color: color(r, g, b)});
const cube = new THREE.Mesh(geometry, material);
cube.position.set(
(i / n_split),
(j / n_split),
(k / n_split)
);
meshes.push(cube);
}
}
}
return meshes;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);
cubes.forEach(cube => scene.add(cube));
scene.add(new THREE.AxisHelper(2));
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(2, 2, 2);
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.
