EJ Fox & Ian Johnson
streaming data, code, acid, design
contours = contour(myBoids.flock)
{
let startTime = new Date().getTime(),
seconds = 0,
secondsRounded = 0,
ticks = 0,
speeds = [];
const ctx = DOM.context2d(myBoids.width(), height);
// const scale = width / height,
let projection = d3.geoIdentity(); //.scale(scale),
let path = d3.geoPath(projection).context(ctx);
let holding = false;
// while (true && myBoids.flock.length) {
myBoids.tick();
// ctx.clearRect(0, 0, myBoids.width(), myBoids.height());
// ctx.fillStyle = "rgba(255,255,255,0.1)";
ctx.globalAlpha = 0.9;
ctx.fillStyle = cwf[0];
ctx.fillRect(0, 0, width, height);
ctx.globalAlpha = 1;
contours.forEach((contour, i) => {
const threshold = contour.value;
ctx.beginPath(),
(ctx.fillStyle = weightColor(toOneScale(i))),
path(contour),
ctx.stroke();
ctx.fill();
});
seconds = (new Date().getTime() - startTime) / 1e3;
ticks++;
document.querySelector(".ticker").innerHTML = `${
myBoids.flock.length
} boids at ${d3.mean(speeds)} frames per second`;
if (Math.round(seconds) !== secondsRounded) {
speeds.push(ticks);
if (speeds.length > 2) speeds.shift();
secondsRounded = Math.round(seconds);
ticks = 0;
}
yield ctx.canvas;
// }
}
makeMesh = function(contour, i) {
let tx = -0;
let ty = -0;
let scale = .01;
const material = new THREE.MeshStandardMaterial({
color: 0xff3333
// 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 meshes = contour.coordinates.map((points, i) => {
let shape = new THREE.Shape();
extrudeSettings.depth = toOneScale(i);
// 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].x * scale, ty + points[0].y * 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].nx * scale, ty + points[0].ny * scale);
let geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
let mesh = new THREE.Mesh(geometry, material);
return 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)
// .cellSize(1)
.size([width, height + 100])
height = 500
d3 = require("d3@6", "https://files-5ouswn75j.vercel.app/d3-contour.js")
import { threeScene, THREE } with {
pointsToMesh as defaultMesh
} 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.
