2d:null 2e:["$","title",null,{"children":"Flocking | Dexter Awoyemi | Observable"}] 33:Td45,{ const element = DOM.element("sk"); let coPerceptionSlider; let sePerceptionSlider; let alPerceptionSlider; let alignmentSlider; let cohesionSlider; let separationSlider; let minSpeedSlider; let showDebuggers; return p5((sk) => { const flock = []; sk.setup = () => { sk.createCanvas(width, height); Array.from({ length: 150 }, (_) => flock.push(new Boid(sk))); alPerceptionSlider = addSlider(sk, "alignment perception range", [ 0, sk.width / 4, sk.width / 15 ]); coPerceptionSlider = addSlider(sk, "cohesion perception range", [ 0, sk.width / 4, sk.width / 12 ]); sePerceptionSlider = addSlider(sk, "separation perception range", [ 0, sk.width / 4, sk.width / 48 ]); alignmentSlider = addSlider(sk, "alignment force", [0, 1, 0.33]); cohesionSlider = addSlider(sk, "cohesion force", [0, 1, 0.01]); separationSlider = addSlider(sk, "separation force", [0, 1, 0.16]); minSpeedSlider = addSlider(sk, "min speed", [0, maxSpeed, 6]); addCheckBox( sk, "continuous edges", () => flock.forEach((boid) => boid.updateEdges()), true ); addCheckBox( sk, "track Boid Prime", () => (flock[0].special = !flock[0].special) ); addCheckBox( sk, "show debug info", () => (showDebuggers = !showDebuggers) ); }; sk.draw = function () { sk.background(bgHex); const coPerception = coPerceptionSlider.value(); const sePerception = sePerceptionSlider.value(); const alPerception = alPerceptionSlider.value(); const alignmentForce = alignmentSlider.value(); const cohesionForce = cohesionSlider.value(); const separationForce = separationSlider.value(); const minSpeed = minSpeedSlider.value(); flock.forEach((boid) => { boid.push(); boid.updateAlignment(flock, alPerception, alignmentForce); boid.updateCohesion(flock, coPerception, cohesionForce); boid.updateSeparation(flock, sePerception, separationForce); boid.updateMinSpeed(minSpeed); boid.pop(); }); if (showDebuggers) { sk.fill("white"); addDebugTextLeft(sk, [ `Sliders`, `alignment: ${alignmentForce}`, `alignment perception: ${alPerception}`, `cohesion: ${cohesionForce}`, `cohesion perception: ${coPerception}`, `separation: ${separationForce}`, `separation perception: ${sePerception}` ]); addDebugTextRight(sk, [ `Boid Prime`, `alignment: ${flock[0].alignment.x.toFixed( 2 )}, ${flock[0].alignment.y.toFixed(2)}`, `cohesion: ${flock[0].cohesion.x.toFixed( 2 )}, ${flock[0].cohesion.y.toFixed(2)}`, `separation: ${flock[0].separation.x.toFixed( 2 )}, ${flock[0].separation.y.toFixed(2)}`, `position: ${flock[0].position.x.toFixed( 2 )}, ${flock[0].position.y.toFixed(2)}`, `velocity: ${flock[0].velocity.x.toFixed( 2 )}, ${flock[0].velocity.y.toFixed(2)}`, `angle: ${(flock[0].velocity.heading() / Math.PI).toFixed(2)}π` ]); } }; }, element); }34:T1b86,class Boid { constructor(sk, x0, y0) { this.sk = sk this.velocity = P5.Vector.random2D() const x = x0 ? x0 : sk.random(sk.width) const y = y0 ? y0 : sk.random(sk.height) this.position = sk.createVector(x, y) this.acceleration = sk.createVector() this.cohesion = sk.createVector() this.alignment = sk.createVector() this.separation = sk.createVector() this.angle = Math.PI / 2 this.alignmentPerception = 0 this.cohesionPerception = 0 this.separationPerception = 0 this.maxForce = 1 this.minSpeed = 2 this.maxSpeed = 20 this.edgeType = this.continuousEdges this.special = false } vectorAverage(boids, key, accumulator) { return boids.length > 0 ? boids.reduce((a, b) => { return a ? accumulator(a, b) : this.sk.createVector(0, 0) }, this.sk.createVector(0, 0)).div(boids.length) : this[key] } alignmentForce(boids, ratio) { const avg = this.vectorAverage(boids, 'velocity', (a, b) => a.add(b.velocity)) let alignVec if (boids.length > 0) { alignVec = avg.sub(this['velocity']) alignVec.mult(ratio) } else { alignVec = this.sk.createVector() } return alignVec } cohesionForce(boids, ratio) { const avg = this.vectorAverage(boids, 'position', (a, b) => a.add(b.position)) let cohesionVec if (boids.length > 0) { cohesionVec = avg.sub(this['position']) cohesionVec = cohesionVec.sub(this['velocity']) cohesionVec.mult(ratio) } else { cohesionVec = this.sk.createVector() } return cohesionVec } separationForce(boids, ratio) { const avgDiff = this.vectorAverage(boids, 'position', (a, b) => { const distVec = P5.Vector.sub(this.position, b.position) return a.add(distVec) }) let separationVec = this.sk.createVector() if (boids.length > 0) { separationVec.add(avgDiff) separationVec.sub(this.velocity) separationVec.mult(ratio) } return separationVec } perceivedBoids(boids, perception) { return boids.filter(b => { if (b === this) return false const d = this.sk.dist(this.position.x, this.position.y, b.position.x, b.position.y) return d < perception }) } perceptionLines(boids) { this.sk.push() const c = this.sk.color(255) c.setAlpha(220) this.sk.fill(c) boids.forEach(b => { this.sk.line(b.position.x, b.position.y, this.position.x, this.position.y) }) this.sk.pop() } updateAlignment(boids, perception, force) { this.alignmentPerception = perception const alpb = this.perceivedBoids(boids, this.alignmentPerception) this.alignment = this.alignmentForce(alpb, force) } updateCohesion(boids, perception, force) { this.cohesionPerception = perception const alpb = this.perceivedBoids(boids, this.cohesionPerception) this.cohesion = this.cohesionForce(alpb, force) } updateSeparation(boids, perception, force) { this.separationPerception = perception const alpb = this.perceivedBoids(boids, this.separationPerception) this.separation = this.separationForce(alpb, force) } updateMinSpeed(minSpeed) { this.minSpeed = minSpeed } updateMaxSpeed(maxSpeed) { this.maxSpeed = maxSpeed } push() { this.angle = this.velocity.heading() this.acceleration.set(0, 0) this.acceleration.add(this.alignment) this.acceleration.add(this.cohesion) this.acceleration.add(this.separation) this.position.add(this.velocity) this.velocity.add(this.acceleration) if (this.velocity.mag() < this.minSpeed) this.velocity.setMag(this.minSpeed) if (this.velocity.mag() > this.maxSpeed) this.velocity.setMag(this.maxSpeed) this.edgeType() if (this.special) this.drawIndicators() } drawIndicators() { this.sk.push() const alignmentColour = this.sk.color('blue') alignmentColour.setAlpha(100) this.sk.noStroke() this.sk.fill(alignmentColour) this.sk.ellipse(this.position.x, this.position.y, this.alignmentPerception * 2, this.alignmentPerception * 2) const alVec = this.sk.createVector( this.alignment.x, this.alignment.y, ) alVec.setMag(this.alignmentPerception) this.sk.stroke('blue') this.sk.fill('blue') this.sk.line(this.position.x, this.position.y, alVec.x, alVec.y) const cohesionColour = this.sk.color('red') cohesionColour.setAlpha(100) this.sk.noStroke() this.sk.fill(cohesionColour) this.sk.ellipse(this.position.x, this.position.y, this.cohesionPerception * 2, this.cohesionPerception * 2) this.sk.stroke('red') const coVec = { x: this.position.x + this.cohesion.x * 80, y: this.position.y + this.cohesion.y * 80 } this.sk.line(this.position.x, this.position.y, coVec.x, coVec.y) const separationColour = this.sk.color('yellow') separationColour.setAlpha(100) this.sk.noStroke() this.sk.fill(separationColour) this.sk.ellipse(this.position.x, this.position.y, this.separationPerception * 2, this.separationPerception * 2) this.sk.stroke('yellow') const seVec = { x: this.position.x + this.separation.x * 80, y: this.position.y + this.separation.y * 80 } this.sk.line(this.position.x, this.position.y, seVec.x, seVec.y) const velocityColour = this.sk.color('#FFD53E') velocityColour.setAlpha(100) this.sk.noStroke() this.sk.fill(velocityColour) this.sk.stroke('#FFD53E') const velocityVec = { x: this.position.x + this.velocity.x, y: this.position.y + this.velocity.y } this.sk.line(this.position.x, this.position.y, velocityVec.x, velocityVec.y) this.sk.pop() } updateEdges() { this.edgeType = this.edgeType === this.hardEdges ? this.continuousEdges : this.hardEdges } hardEdges() { if ((this.position.x < nodeSize / 2 && this.velocity.x < 0) || (this.position.x > this.sk.width - nodeSize / 2 && this.velocity.x > 0)) this.velocity.x = -this.velocity.x if ((this.position.y < nodeSize / 2 && this.velocity.y < 0) || (this.position.y > this.sk.height - nodeSize / 2 && this.velocity.y > 0)) this.velocity.y = -this.velocity.y } continuousEdges() { if (this.position.x < 0) this.position.x = this.sk.width if (this.position.x > this.sk.width) this.position.x = 0 if (this.position.y < 0) this.position.y = this.sk.height if (this.position.y > this.sk.height) this.position.y = 0 } pop() { this.sk.push() this.sk.stroke(boidColour) const c = this.sk.color(boidColour) c.setAlpha(170) this.sk.fill(c) this.sk.translate(this.position.x, this.position.y) const rotationForce = this.velocity.heading() - this.angle const rotationVelocity = rotationForce / this.sk.frameRate() this.sk.rotate(this.velocity.heading() + rotationVelocity + Math.PI / 2) this.sk.triangle( -nodeSize / 2, +nodeSize / 2, +nodeSize / 2, nodeSize / 2, 0, -nodeSize / 2, ) this.sk.pop() } }35:[] 31:{"id":"343ce3b18fb83554","slug":"flocking-boids","title":"Flocking","thumbnail":"910c54a05950ebee837b3e1ebb76de0d86117c5d8028f6aeb91f5da515ee7faa","access_level":"public","create_time":"$D2021-10-10T19:50:50.248Z","update_time":"$D2024-06-20T12:38:46.556Z","view_time":null,"first_public_time":"$D2021-10-31T21:46:52.897Z","fork":{"id":"df38094bc9089946","slug":"processing-p5-js","title":"Processing (p5.js)","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"f948834a8c29c2f9","login":"dextersjab","name":"Dexter Awoyemi","avatar_url":"https://avatars-next.observableusercontent.com/f8835a0c243be3bc7bd54cd12906a89989dde9dfdb9918e952ecb98022889cc3","tier":"starter_2024"},"version":1590,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a61b949d93493a2","login":"dextersjab","name":"Dexter Awoyemi","avatar_url":"https://avatars-next.observableusercontent.com/f8835a0c243be3bc7bd54cd12906a89989dde9dfdb9918e952ecb98022889cc3","tier":null}],"members":[{"type":"individual","id":"7a61b949d93493a2","login":"dextersjab","name":"Dexter Awoyemi","avatar_url":"https://avatars-next.observableusercontent.com/f8835a0c243be3bc7bd54cd12906a89989dde9dfdb9918e952ecb98022889cc3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Flocking","cells":[{"id":0,"value":"# Flocking","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"Inspired by Craig Reynolds' original 1986 [algorithm](http://www.red3d.com/cwr/boids/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1248,"value":"`Boid = abstract bird`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"{\n const element = DOM.element('sk')\n return p5(sk => {\n const flock = []\n sk.setup = () => {\n sk.createCanvas(50, 50)\n const boid = new Boid(sk, 50 / 2 - nodeSize / 2, 50 / 2 - nodeSize / 2)\n boid.pop()\n boid.push()\n }\n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"Each boid follows 3️⃣ simple rules.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"### 1️⃣ Alignment\n🧠 Fly in the same direction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"{\n const element = DOM.element('sk')\n return p5(sk => {\n const w = 150\n const h = w\n const flock = []\n sk.setup = () => {\n sk.createCanvas(w, h)\n Array.from({length: 12}, _ => flock.push(new Boid(sk)))\n flock[0].special = true\n }\n sk.draw = () => {\n sk.background(bgHex)\n flock.forEach(boid => {\n boid.pop()\n boid.updateAlignment(flock, w / 2 - nodeSize / 2, 1)\n boid.push()\n })\n }\n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":847,"value":"### 2️⃣ Cohesion\n🧠 Be close to others","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"{\n const element = DOM.element('sk')\n return p5(sk => {\n const w = 150\n const h = w\n const flock = []\n sk.setup = () => {\n sk.createCanvas(w, h)\n Array.from({length: 12}, _ => flock.push(new Boid(sk)))\n flock[0].special = true\n }\n sk.draw = () => {\n sk.background(bgHex)\n flock.forEach(boid => {\n boid.pop()\n boid.updateCohesion(flock, w / 3, .01)\n boid.updateMaxSpeed(2)\n boid.push()\n })\n }\n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"
\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":845,"value":"### 3️⃣ Separation\n🧠 Avoid others","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"{\n const element = DOM.element('sk')\n return p5(sk => {\n const w = 150\n const h = w\n const flock = []\n sk.setup = () => {\n sk.createCanvas(w, h)\n Array.from({length: 10}, _ => flock.push(new Boid(sk)))\n flock[0].special = true\n }\n sk.draw = () => {\n sk.background(bgHex)\n flock.forEach(boid => {\n boid.pop()\n boid.updateSeparation(flock, w / 6, .05)\n boid.updateMaxSpeed(2)\n boid.push()\n })\n }\n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1513,"value":"### All 3️⃣ rules together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1090,"value":"🪄 Some kind of flocking emerges","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"## Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"[Craig Reynold's flocking algorithm description (http)](http://www.red3d.com/cwr/boids/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"[Coding Train's flocking implementation](https://thecodingtrain.com/CodingChallenges/124-flocking-boids)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"#### Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"maxSpeed = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"height = !isPortrait ? width / 2 : width * 1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"nodeSize = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"bgHex = '#001C44'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"boidColour = '#FFD53E'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"#### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"canvasDiagonal = (sk) => Math.sqrt(sk.width ** 2 + sk.height ** 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"addSlider = (sk, name, values) => {\n sk.createSpan('
')\n sk.createSpan(name)\n sk.createSpan(' ')\n return sk.createSlider(values[0], values[1], values[2], 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"addButton = (sk, name, mousePressed) => {\n sk.createSpan('
')\n sk.createSpan(' ')\n const edgesButton = sk.createButton(name)\n edgesButton.mousePressed(mousePressed)\n return edgesButton\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"addCheckBox = (sk, name, changed, defaultValue) => {\n const checkBox = sk.createCheckbox(name, defaultValue)\n checkBox.changed(changed)\n return checkBox\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"addDebugTextLeft = (sk, lines) => lines.forEach((l, i) => sk.text(l, 200, sk.height - (lines.length - i) * 20))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"addDebugTextRight = (sk, lines) => lines.forEach((l, i) => sk.text(l, sk.width - 600, sk.height - (lines.length - i) * 20))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"isPortrait = window.outerWidth < window.outerHeight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"import {p5} from '@dextersjab/p5-mod'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"P5 = require('https://unpkg.com/p5@1.4.0/lib/p5.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"