Published
Edited
Dec 10, 2020
6 stars
Insert cell
Insert cell
strokeColor = "#e3450b"
Insert cell
bgColor = "#13161d"
Insert cell
lineEmbed = {
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);

ctx.scale(1.25, 1.25);
ctx.translate(-100, -100);

let holding = false;
// ctx.canvas.addEventListener("mousedown", e => { holding = true; addBoidOnEvent(e); });
// ctx.canvas.addEventListener("mouseup", e => { holding = false });
// ctx.canvas.addEventListener("mousemove", e => { if (holding) addBoidOnEvent(e); });

while (true && myBoids.flock.length) {
myBoids.tick();
// ctx.clearRect(0, 0, myBoids.width(), myBoids.height());
// ctx.fillStyle = "rgba(255,255,255,0.1)";
// ctx.fillStyle = cwf[0];
ctx.fillStyle = bgColor;
let cbg = d3.rgb(bgColor);
ctx.fillStyle = `rgba(${cbg.r},${cbg.g},${cbg.b},0.01)`;
ctx.fillRect(0, 0, width, height);
ctx.globalAlpha = 1;

ctx.strokeStyle = strokeColor;
let contours = contour(myBoids.flock);
for (const contour of contours) {
const threshold = contour.value;
ctx.beginPath(),
// (ctx.fillStyle = color(threshold)),
path(contour),
ctx.stroke();
}

// await Promises.delay(10);
yield ctx.canvas;
}
// return ctx.canvas;
}
Insert cell
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
]
Insert cell
import { Boids } from "@harrystevens/vanilla-boids"
Insert cell
import { vecmath } from "@harrystevens/vector-math"
Insert cell
myBoids = {
const sim = new Boids();

// Add 500 boids
for (let i = 0; i < width * .75; i++) {
sim.add();
// yield sim
}
return sim;
}
Insert cell
myBoids.flock.length
Insert cell
myBoids
.height(height + 100)
.alignment(0.72)
.cohesion(0.5)
.separation(0.85)
.perception(20)
.quadtree(true)
.maxSpeed(0.09)
Insert cell
import { cwf } from "@codingwithfire/cwf-season-2-reusable-style-elements"
Insert cell
myBoids
Insert cell
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])
Insert cell
height = 500
Insert cell
d3 = require("d3@6", "https://files-5ouswn75j.vercel.app/d3-contour.js")
Insert cell

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.
Learn more