position = (u, v, r) => {
const spherePoint = [
r * Math.cos(v) * Math.cos(u),
r * Math.cos(v) * Math.sin(u),
r * Math.sin(v)
];
const offset = perlin3(...spherePoint.map(d => d*scale));
const coeff = 0.2;
return new THREE.Vector3(
...spherePoint.map((d, i) => d * (1 + coeff * offset))
);
}
wireFrameMaterial = color => (
new THREE.MeshBasicMaterial({
color: color,
wireframe: true,
transparent: true,
depthWrite: false,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending
})
)
spheres = {
const meshes = [];
const du = Math.PI / 20;
const dv = Math.PI / 20;
d3.range(0, 2*Math.PI, du).forEach(u => {
d3.range(-Math.PI/2, Math.PI/2, 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}
];
const dr = 0.1;
d3.range(0.5, 1.6, dr).forEach(r => {
meshes.push(rect(
...param.map(p => position(p.u, p.v, r)),
wireFrameMaterial(d3.interpolateTurbo(1.5-r))
));
});
});
});
return meshes;
}
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.
