EJ Fox & Ian Johnson
streaming data, code, acid, design
scene = {
// frame;
// myBoids.tick();
return threeScene({
width,
height: height,
visibility,
cam: { x: 4, y: -4, z: 6.75 },
// addMeshes: pointsToMeshScene(getPoints(hexGridPaths[0])),
addMeshes: makeScene(),
update: ({ meches, camera }) => {
// mutable debug = camera;
meches.meshes.forEach(mesh => {
mesh.rotation.x = rotationX;
mesh.rotation.y = rotationY;
// mesh.rotation.z = 0
});
// meches.mesh.rotation.y += 0.01;
// meches.cubes.forEach(cube => {
// cube.rotation.y += 0.01;
// });
}
});
}
rotationY = 0.1
rotationX = -0.6
flockSet = {
return frames.map(i => {
myBoids.tick();
// return contour(myBoids.flock);
return myBoids.flock.map(d => ({ ...d }));
});
}
contours = {
return contour(flockSet[frame]);
}
thresholds = [
//[0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08, 0.09, 0.1]
0.005,
0.01,
0.015,
0.02,
0.025,
0.03,
0.035,
0.04,
0.045,
0.05,
0.055,
0.06,
0.065,
0.07,
0.075,
0.08,
0.085,
0.09,
0.095,
0.1
]
makeMesh = function(points, i) {
let tx = -5;
let ty = -2.5;
let scale = .01;
const material = new THREE.MeshStandardMaterial({
color: weightColor(toOneScale(i))
// opacity: 0.4
});
// just as with textures, we need to put colors into linear color space
material.color.convertSRGBToLinear();
var extrudeSettings = {
steps: 4,
depth: .1,
bevelEnabled: false
// bevelThickness: 1,
// bevelSize: .1,
// bevelOffset: 0,
// bevelSegments: 1
};
let shape = new THREE.Shape();
extrudeSettings.depth = toOneScale(i) / 5;
// Math.abs(Math.sin(((Math.PI * i) / contour.coordinates.length) * 8)) * 0.4 + 0.05;
// console.log(tx + points[0].x * scale);
shape.moveTo(tx + points[0][0] * scale, ty + points[0][1] * scale);
points.forEach(d => {
let x = tx + d[0] * scale;
let y = ty + d[1] * scale;
shape.lineTo(x, y);
});
// shape.lineTo(tx + points[0][0] * scale, ty + points[0][1] * scale);
// shape.lineTo(tx + points[0].nx * scale, ty + points[0].ny * scale);
let geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
let mesh = new THREE.Mesh(geometry, material);
return mesh;
}
function makeScene() {
return function(scene) {
let meshes = [];
contours.forEach((contour, i) => {
console.log("contour", contour, i);
contour.coordinates.forEach(segments => {
segments.forEach(points => {
let mesh = makeMesh(points, i);
// console.log("mesh", mesh);
scene.add(mesh);
meshes.push(mesh);
});
});
});
return { meshes };
};
}
import { Boids } from "@harrystevens/vanilla-boids"
import { vecmath } from "@harrystevens/vector-math"
myBoids = {
const sim = new Boids();
// Add 500 boids
for (let i = 0; i < width * .5; i++) {
sim.add();
// yield sim
}
return sim;
}
myBoids
.height(height + 100)
.alignment(0.72)
.cohesion(0.5)
.separation(0.85)
.perception(20)
.quadtree(true)
.maxSpeed(2.75)
import { cwf } from "@codingwithfire/cwf-season-2-reusable-style-elements"
myBoids
contour = d3
.contourDensity()
.x(d => d.pos[0])
.y(d => d.pos[1])
// .thresholds(10)
.thresholds(function() {
return thresholds;
})
// .cellSize(1)
.size([width, height + 100])
height = 500
d3 = require("d3@6", "https://files-5ouswn75j.vercel.app/d3-contour.js")
import { Scrubber } from "@mbostock/scrubber"
import { threeScene, THREE } from "@ajur/threejs"
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.
