2a:null 2b:["$","title",null,{"children":"Vanilla Boids | Harry Stevens | Observable"}] 30:T608,{ let startTime = (new Date()).getTime(), seconds = 0, secondsRounded = 0, ticks = 0, speeds = []; const ctx = DOM.context2d(myBoids.width(), myBoids.height()); 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()); myBoids.each(boid => { const a = vecmath.trans(boid.pos, boid.ang - Math.PI * .5, 3), b = vecmath.trans(boid.pos, boid.ang, 9), c = vecmath.trans(boid.pos, boid.ang + Math.PI * .5, 3); ctx.beginPath(); ctx.moveTo(...a); ctx.lineTo(...b); ctx.lineTo(...c); ctx.lineTo(...a); const color = d3.interpolateRdPu(.6 * myBoids.maxSpeed() / boid.speed); ctx.strokeStyle = color; ctx.fillStyle = d3.color(color).brighter(2); ctx.fill(); ctx.stroke(); }); 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; } }31:Tfba,md`## API Reference To use the Boids class in your own notebook ([example](https://observablehq.com/@harrystevens/minimalist-boids?collection=@harrystevens/boids)): ~~~js import { Boids } from "@harrystevens/vanilla-boids" ~~~ Boids Creates a new simulation, setting alignment, cohesion, and separation to 1, perception to 20, width to the notebook’s width, and height to 500. ~~~js const myBoids = new Boids(); ~~~ boids.add([options]) Adds a boid to the simulation with a random position and angle, and with a speed of 1, and returns the simulation. You can pass an options object with the following properties: | property | type | description | |----------|--------|-------------------------------------------------------------------------------------------------------------------------------------------------------------| | pos | Array | Starting position for the boid, specified as an array of two numbers, where the first number is the x-coordinate and the second number is the y-coordinate. | | ang | Number | Starting angle for the boid, specified as a number in radians. | | speed | Number | Starting speed for the boid, specified as a number. |
boids.each(accessor) Loops through the flock of boids, invoking an accessor function on each boid one at a time. The accessor is passed three arguments: the current boid, the current index, and the entire flock. boids.tick() Advances the simulation one tick and returns the simulation. boids.alignment([alignment]) If alignment is specified, sets the alignment force to a number and returns the simulation. Alignment forces the boids to steer towards the average heading of local flockmates. If alignment is not specified, returns the current alignment force, which defaults to 1. boids.cohesion([cohesion]) If cohesion is specified, sets the cohesion force to a number and returns the simulation. Cohesion forces the boids to steer towards the average position of local flockmates. If cohesion is not specified, returns the current cohesion force, which defaults to 1. boids.separation([separation]) If separation is specified, sets the separation force to a number and returns the simulation. Separation forces the boids to steer to avoid crowding local flockmates. If separation is not specified, returns the current separation force, which defaults to 1. boids.perception([perception]) If perception is specified, sets the perception radius of the boids to a number of pixels and returns the simulation. The boids’ movement will be affected only by those other boids whose positions fall within the perception radius. If perception is not specified, returns the current perception radius, which defaults to 20. boids.width([width]) If width is specified, sets the width of the simulation to a number of pixels and returns the simulation. If width is not specified, returns the current width, which defaults to the notebook’s width. boids.height([height]) If height is specified, sets the height of the simulation to a number of pixels and returns the simulation. If height is not specified, returns the current height, which defaults to 500. boids.maxSpeed([speed]) If speed is specified, sets the maximum speed of the boids to a number of pixels per tick and returns the simulation. If speed is not specified, returns the current maximum speed, which defaults to 4. `32:Tae3,class Boids { constructor(){ this._width = width; this._height = height; this._perception = 20; this._alignment = 1; this._cohesion = 1; this._separation = 1; this._maxSpeed = 4; this._quadtree = true; this.maxForce = 0.2; this.flock = []; this.tree = new BoidBush(); } alignment(n){ if (isFinite(n)){ this._alignment = n; for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._alignment = n; } return this; } else { return this._alignment; } } cohesion(n){ if (isFinite(n)){ this._cohesion = n; for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._cohesion = n; } return this; } else { return this._cohesion; } } perception(n){ if (isFinite(n)){ this._perception = n; for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._perception = n; } return this; } else { return this._perception; } } separation(n){ if (isFinite(n)){ this._separation = n; for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._separation = n; } return this; } else { return this._separation; } } width(n){ if (isFinite(n)){ this._width = n; for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._width = n; } return this; } else { return this._width; } } height(n){ if (isFinite(n)){ this._height = n; for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._height = n; } return this; } else { return this._height; } } quadtree(bool){ if (arguments.length) { this._quadtree = bool; if (this._quadtree && !this.tree) this.tree = new BoidBush(); for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._quadtree = bool; this.flock[i].tree = this.tree; } return this; } else { return this._quadtree; } } maxSpeed(n){ if (isFinite(n)){ this._maxSpeed = n; for (let i = 0, l = this.flock.length; i < l; i++){ this.flock[i]._maxSpeed = n; } return this; } else { return this._maxSpeed; } } add(opts){ this.flock.push(new Boid(this, opts)); return this; } each(fn){ for (let i = 0, l = this.flock.length; i < l; i++){ fn(this.flock[i], i, this.flock); } return this; } tick(){ if (this._quadtree) { this.tree.clear(); this.tree.load(this.flock); } this.each(boid => boid.update()); return this; } }33:Tcaa,class Boid { constructor(Boids, opts){ Object.assign(this, Boids); Object.assign(this, opts); // Angle, position, and speed can be assigned by the user. this.ang = this.ang || 2 * Math.random() * Math.PI; this.pos = this.pos || [ Math.random() * this._width, Math.random() * this._height ]; this.speed = this.speed || 1; const obj = { pos: this.pos, ang: this.ang, speed: this.speed, vel: vecmath.sub( vecmath.trans(this.pos, this.ang, this.speed), this.pos ), acc: [0, 0], id: this.flock.length }; Object.assign(this, obj); } update(){ const prev = { ...this }; let alignment = [0, 0], cohesion = [0, 0], separation = [0, 0], n = 0, candidates = this.flock; if (this._quadtree){ candidates = this.tree.search({ minX: this.pos[0] - this._perception, minY: this.pos[1] - this._perception, maxX: this.pos[0] + this._perception, maxY: this.pos[1] + this._perception, }); } for (let i = 0, l = candidates.length; i < l; i ++){ const that = candidates[i], dist = vecmath.dist(this.pos, that.pos); if (this.id !== that.id && dist < this._perception){ alignment = vecmath.add(alignment, that.vel); cohesion = vecmath.add(cohesion, that.pos); const diff = vecmath.div( vecmath.sub(this.pos, that.pos), Math.max(dist, epsilon) ); separation = vecmath.add(separation, diff); n++; } } if (n > 0){ alignment = vecmath.div(alignment, n); alignment = vecmath.setMag(alignment, this._maxSpeed); alignment = vecmath.sub(alignment, this.vel); alignment = vecmath.limit(alignment, this.maxForce); cohesion = vecmath.div(cohesion, n); cohesion = vecmath.sub(cohesion, this.pos); cohesion = vecmath.setMag(cohesion, this._maxSpeed); cohesion = vecmath.sub(cohesion, this.vel); cohesion = vecmath.limit(cohesion, this.maxForce); separation = vecmath.div(separation, n); separation = vecmath.setMag(separation, this._maxSpeed); separation = vecmath.sub(separation, this.vel); separation = vecmath.limit(separation, this.maxForce); } alignment = vecmath.mult(alignment, this._alignment); cohesion = vecmath.mult(cohesion, this._cohesion); separation = vecmath.mult(separation, this._separation); this.acc = vecmath.add(this.acc, alignment); this.acc = vecmath.add(this.acc, cohesion); this.acc = vecmath.add(this.acc, separation); this.pos = vecmath.add(this.pos, this.vel); this.vel = vecmath.add(this.vel, this.acc); this.vel = vecmath.limit(this.vel, this._maxSpeed); if (this.pos[0] > this._width) this.pos[0] = 0; if (this.pos[0] < 0) this.pos[0] = this._width; if (this.pos[1] > this._height) this.pos[1] = 0; if (this.pos[1] < 0) this.pos[1] = this._height; this.ang = vecmath.ang(prev.pos, this.pos); this.speed = vecmath.dist(prev.pos, this.pos); this.acc = vecmath.mult(this.acc, 0); } }34:[] 2e:{"id":"59dfcc8024b5cbc6","slug":"vanilla-boids","title":"Vanilla Boids","thumbnail":"6c021379e01461960e14deeafdf35b2e62cc62be0e3b41542f834c9b45b162a5","access_level":"public","create_time":"$D2020-06-21T14:53:17.721Z","update_time":"$D2023-05-07T01:19:01.190Z","view_time":null,"first_public_time":"$D2020-06-21T20:11:58.842Z","fork":false,"stars":29,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":901,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"eb9b19851f763b4b","slug":"boids","title":"Boids","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"Vanilla Boids","cells":[{"id":0,"value":"md`# Vanilla Boids\n\nCraig Reynolds’s [boids](https://www.red3d.com/cwr/boids/) in vanilla JavaScript. Compare to [P5.js Boids](https://observablehq.com/@harrystevens/p5-js-boids) and [Bad Boids](https://observablehq.com/@harrystevens/bad-boids). Click and drag to add boids.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"{\n const el = DOM.element(\"div\");\n el.classList.add(\"ticker\");\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"viewof useTree = checkbox({\n options: [{ value: \"true\", label: \"Use RBush\" }],\n value: \"true\",\n description: \"Use a quadtree to improve performance\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"viewof alignment = slider({\n title: \"Alignment\",\n value: 1,\n min: 0,\n max: 1,\n step: .1,\n description: \"Steer towards the average heading of local flockmates\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"viewof cohesion = slider({\n title: \"Cohesion\",\n value: 1,\n min: 0,\n max: 1,\n step: .1,\n description: \"Steer towards the average position of local flockmates\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":317,"value":"viewof separation = slider({\n title: \"Separation\",\n value: 1,\n min: 0,\n max: 1,\n step: .1,\n description: \"Steer to avoid crowding local flockmates\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"viewof perception = slider({\n title: \"Perception\",\n value: 20,\n min: 1,\n max: 60,\n step: 1,\n description: \"Maximum distance of other boids to consider\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"toc({selector: \"h2\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"myBoids = {\n const sim = new Boids();\n \n // Add 500 boids\n for (let i = 0; i < 500; i++) {\n sim.add();\n }\n \n return sim;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"myBoids\n .alignment(alignment)\n .cohesion(cohesion)\n .separation(separation)\n .perception(perception)\n .quadtree(!!useTree);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"function addBoidOnEvent(e){\n myBoids.add({\n pos: [e.offsetX, e.offsetY]\n });\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$32","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"class BoidBush extends RBush {\n toBBox(boid) { return {minX: boid.pos[0], minY: boid.pos[1], maxX: boid.pos[0], maxY: boid.pos[1]}; }\n compareMinX(a, b) { return a.pos[0] - b.pos[0]; }\n compareMinY(a, b) { return a.pos[1] - b.pos[1]; }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`## Values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"epsilon = 1e-6;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"html``","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"import { checkbox, slider } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"import { toc } from \"@harrystevens/toc\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"import { vecmath } from \"@harrystevens/vector-math\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"d3 = require(\"d3-array@1\", \"d3-color@1\", \"d3-scale-chromatic@1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"RBush = require(\"rbush@3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"md`## Todo\n\n- Use a spatial index data structure to improve performance\n- WebGL?!?!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"