Published
Edited
Oct 24, 2020
3 stars
chart = {
// const width=1587/2, height=1123/2
const width=900, height=500
const viewBoxWidth=500, viewBoxHeight=500
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr('viewBox', `${-viewBoxWidth/2} ${-viewBoxHeight/2} ${viewBoxWidth} ${viewBoxHeight}`)
.attr('style', 'background: #1E1225')
let rand = makeRandomGenerator(inputSeed);
// Every point is a trace.
let points = (new Array(lineCount)).fill(0).map(p => {
let x = (rand.random()-.5)*512
let y = (rand.random()-.5)*512
let z = (rand.random()-.5)*512
let source = new THREE.Vector3(x, y, z);
// trace of a point moving over time
let path = d3.path();
let d, norm, diff, target = source.clone();
let visible = false//, visiblePrev;
for(let i = 0; i < stepsNumber;) {
d = distance(target);
// we start tracing path only on the surface
if(Math.abs(d)<1){
i++
if (!getVisibility(target) && flags.includes('visibleSide')) break
else {
if(path['_'].length == 0)
path.moveTo(target.x, target.y);
else
path.lineTo(target.x, target.y);
}
let slide = getParticleForce(target)
target.add(slide.multiplyScalar(minSlide));
}
norm = normal(target).multiplyScalar(-1);
diff = norm.clone().multiplyScalar(d);
source = target.clone();
target.add(diff);
}
return path;
})
// drawing traces
if (flags.includes('l')) {
svg.selectAll('path')
.data( points )
.enter()
.append('path')
.attr('d', p => p.toString())
.attr('stroke', '#FCE000')
.attr('fill', 'none')
.attr('stroke-width', 1.4);
}
// drawing points
if (flags.includes('d')) {
svg.selectAll('circle')
.data( points )
.enter()
.append('circle')
.attr('cx', p => p['_x0'])
.attr('cy', p => p['_y0'])
.attr('r', p => 2)
.attr('fill', p => '#FCE000');
}
return svg.node()
}
distance = p => {
p = p.clone();
// rotation of the shape
p
.applyAxisAngle(new THREE.Vector3(0,1,0).normalize(), sceneRotationX)
.applyAxisAngle(new THREE.Vector3(0,0,1).normalize(), sceneRotationY)
let distortion = new THREE.Vector3(0,0,0)
// distortion.x = Math.sin(p.y/30)
distortion.x = new noise('001').noise3D(p.x/200, p.y/200, p.z/200)
distortion.y = new noise('002').noise3D(p.x/200, p.y/200, p.z/200)
distortion.z = new noise('003').noise3D(p.x/200, p.y/200, p.z/200)
distortion.multiplyScalar(30)
p.add(distortion)
let q
switch(object){
case 'cage':
p.x = Math.abs(p.x) - 120
p.y = Math.abs(p.y) - 120
p.z = Math.abs(p.z) - 120
q = new THREE.Vector3(
Math.abs(p.x+1)-1,
Math.abs(p.y+1)-1,
Math.abs(p.z+1)-1)
let p1 = new THREE.Vector3(p.x,q.y,q.z).max(new THREE.Vector3(0,0,0)).length() +
Math.min(Math.max(p.x,q.y,q.z), 0)
let p2 = new THREE.Vector3(q.x,p.y,q.z).max(new THREE.Vector3(0,0,0)).length() +
Math.min(Math.max(q.x,p.y,q.z), 0)
let p3 = new THREE.Vector3(q.x,q.y,p.z).max(new THREE.Vector3(0,0,0)).length() +
Math.min(Math.max(q.x,q.y,p.z), 0)
return Math.min(p1,p2,p3)-40
case 'torus':
q = new THREE.Vector2(new THREE.Vector2(p.x, p.y).length()-120,p.z)
return q.length()-60
case 'sphere':
return p.length()-150
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.