2c:null 2d:["$","title",null,{"children":"Flocking Simulation | Chuncheng | Observable"}] 32:T498,// Flock class to manage the array of all the boids class Flock { constructor() { // Initialize the array of boids this.boids = []; } mapBoidIntoGrid(boid, k) { let i, j; i = (gridXs + parseInt(boid.position.x / _width)) % gridXs; j = (gridYs + parseInt(boid.position.y / _height)) % gridYs; gridArray[i][j].push(k); boid.xi = i; boid.yi = j; } run() { if (toggle) { for (let i = 0; i < gridXs; ++i) { for (let j = 0; j < gridYs; ++j) { gridArray[i][j] = []; } } this.boids.map((boid, k) => { this.mapBoidIntoGrid(boid, k); }); } for (let boid of this.boids) { boid.render(); if (toggle) { let boids = []; for (let x = -1; x < 2; ++x) { for (let y = -1; y < 2; ++y) { boids = boids.concat( gridArray[(gridXs + boid.xi + x) % gridXs][ (gridYs + boid.yi + y) % gridYs ].map((e) => this.boids[e]) ); } } boid.run(boids); } else { boid.run(this.boids); } } } addBoid(b) { this.boids.push(b); } }33:T158e,class Boid { constructor(p5, x, y) { this.p5 = p5; this.acceleration = p5.createVector(0, 0); this.velocity = p5.createVector(p5.random(-1, 1), p5.random(-1, 1)); this.position = p5.createVector(x, y); (this.size = 3.0), this.xi, this.yi; // Maximum speed this.maxSpeed = 3; // Maximum steering force this.maxForce = 0.05; p5.colorMode(p5.HSB); this.color = p5.color(p5.random(256), 255, 255); } run(boids) { this.update(); this.borders(); // this.render(); this.flock(boids); // console.log("run"); } applyForce(force) { // We could add mass here if we want: A = F / M this.acceleration.add(force); } // We accumulate a new acceleration each time based on three rules flock(boids) { let separation = this.separate(boids); let alignment = this.align(boids); let cohesion = this.cohesion(boids); // Arbitrarily weight these forces separation.mult(1.5); alignment.mult(1.0); cohesion.mult(1.0); // Add the force vectors to acceleration this.applyForce(separation); this.applyForce(alignment); this.applyForce(cohesion); } // Method to update location update() { // Update velocity this.velocity.add(this.acceleration); // Limit speed this.velocity.limit(this.maxSpeed); this.position.add(this.velocity); // Reset acceleration to 0 each cycle this.acceleration.mult(0); } // A method that calculates and applies a steering force towards a target // STEER = DESIRED MINUS VELOCITY seek(target) { // A vector pointing from the location to the target let desired = P5.Vector.sub(target, this.position); // Normalize desired and scale to maximum speed desired.normalize(); desired.mult(this.maxSpeed); // Steering = Desired minus Velocity let steer = P5.Vector.sub(desired, this.velocity); // Limit to maximum steering force steer.limit(this.maxForce); return steer; } render() { // Draw a triangle rotated in the direction of velocity let theta = this.velocity.heading() + this.p5.radians(90); this.p5.fill(this.color); this.p5.stroke(255); this.p5.push(); this.p5.translate(this.position.x, this.position.y); this.p5.rotate(theta); this.p5.beginShape(); this.p5.vertex(0, -this.size * 2); this.p5.vertex(-this.size, this.size * 2); this.p5.vertex(this.size, this.size * 2); this.p5.endShape(this.p5.CLOSE); this.p5.pop(); } // Wraparound borders() { if (this.position.x < -this.size) { this.position.x = width + this.size; } if (this.position.y < -this.size) { this.position.y = height + this.size; } if (this.position.x > width + this.size) { this.position.x = -this.size; } if (this.position.y > height + this.size) { this.position.y = -this.size; } } // Separation // Method checks for nearby boids and steers away separate(boids) { let desiredSeparation = 25.0; let steer = this.p5.createVector(0, 0); let count = 0; // For every boid in the system, check if it's too close for (let boid of boids) { let distanceToNeighbor = P5.Vector.dist(this.position, boid.position); // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself) if (distanceToNeighbor > 0 && distanceToNeighbor < desiredSeparation) { // Calculate vector pointing away from neighbor let diff = P5.Vector.sub(this.position, boid.position); diff.normalize(); // Scale by distance diff.div(distanceToNeighbor); steer.add(diff); // Keep track of how many count++; } } // Average -- divide by how many if (count > 0) { steer.div(count); } // As long as the vector is greater than 0 if (steer.mag() > 0) { // Implement Reynolds: Steering = Desired - Velocity steer.normalize(); steer.mult(this.maxSpeed); steer.sub(this.velocity); steer.limit(this.maxForce); } return steer; } // Alignment // For every nearby boid in the system, calculate the average velocity align(boids) { let neighborDistance = 50; let sum = this.p5.createVector(0, 0); let count = 0; for (let i = 0; i < boids.length; i++) { let d = P5.Vector.dist(this.position, boids[i].position); if (d > 0 && d < neighborDistance) { sum.add(boids[i].velocity); count++; } } if (count > 0) { sum.div(count); sum.normalize(); sum.mult(this.maxSpeed); let steer = P5.Vector.sub(sum, this.velocity); steer.limit(this.maxForce); return steer; } else { return this.p5.createVector(0, 0); } } // Cohesion // For the average location (i.e., center) of all nearby boids, calculate steering vector towards that location cohesion(boids) { let neighborDistance = 50; let sum = this.p5.createVector(0, 0); // Start with empty vector to accumulate all locations let count = 0; for (let i = 0; i < boids.length; i++) { let d = P5.Vector.dist(this.position, boids[i].position); if (d > 0 && d < neighborDistance) { sum.add(boids[i].position); // Add location count++; } } if (count > 0) { sum.div(count); return this.seek(sum); // Steer towards the location } else { return this.p5.createVector(0, 0); } } } // class Boid34:T40e,function* p5(sketch) { const element = DOM.element("div"); // p5.js really likes its target element to already be in the DOM, not just // floating around detached. So, before we call P5, we yield it, which puts // in the DOM. yield element; // This is ‘instance mode’ in p5 jargon: instead of relying on lots of // globals, we create a sketch that has its own copy of everything under p5. const instance = new P5(sketch, element, true); // This is the tricky part: when you run P5(sketch, element), it starts a // loop that updates the drawing a bunch of times a second. If we were just // to call P5 repeatedly with different arguments, the loops would all keep // running, one on top of the other. So what we do is we use this cell // as a generator, and then when that generator is interrupted, like // when you update the code in the sketch() method, then we call instance.remove() // to clean it up. try { while (true) { yield element; } } finally { instance.remove(); } }35:Taf5,Stats = function () { let Panel = function (e, t, l) { var n = 1 / 0, a = 0, i = Math.round, o = i(window.devicePixelRatio || 1), r = 80 * o, f = 48 * o, c = 3 * o, d = 2 * o, s = 3 * o, p = 15 * o, u = 74 * o, m = 30 * o, h = document.createElement("canvas"); (h.width = r), (h.height = f), (h.style.cssText = "width:80px;height:48px"); var S = h.getContext("2d"); return ( (S.font = "bold " + 9 * o + "px Helvetica,Arial,sans-serif"), (S.textBaseline = "top"), (S.fillStyle = l), S.fillRect(0, 0, r, f), (S.fillStyle = t), S.fillText(e, c, d), S.fillRect(s, p, u, m), (S.fillStyle = l), (S.globalAlpha = 0.9), S.fillRect(s, p, u, m), { dom: h, update: function (f, v) { (n = Math.min(n, f)), (a = Math.max(a, f)), (S.fillStyle = l), (S.globalAlpha = 1), S.fillRect(0, 0, r, p), (S.fillStyle = t), S.fillText(i(f) + " " + e + " (" + i(n) + "-" + i(a) + ")", c, d), S.drawImage(h, s + o, p, u - o, m, s, p, u - o, m), S.fillRect(s + u - o, p, o, m), (S.fillStyle = l), (S.globalAlpha = 0.9), S.fillRect(s + u - o, p, o, i((1 - f / v) * m)); } } ); }; var e = 0, t = document.createElement("div"); function l(e) { return t.appendChild(e.dom), e; } function n(l) { for (var n = 0; n < t.children.length; n++) t.children[n].style.display = n === l ? "block" : "none"; e = l; } (t.style.cssText = "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000"), t.addEventListener( "click", function (l) { l.preventDefault(), n(++e % t.children.length); }, !1 ); var a = (performance || Date).now(), i = a, o = 0, r = l(new Panel("FPS", "#0ff", "#002")), f = l(new Panel("MS", "#0f0", "#020")); if (self.performance && self.performance.memory) var c = l(new Panel("MB", "#f08", "#201")); return ( n(0), { REVISION: 16, dom: t, addPanel: l, showPanel: n, begin: function () { a = (performance || Date).now(); }, end: function () { o++; var e = (performance || Date).now(); if ( (f.update(e - a, 200), e > i + 1e3 && (r.update((1e3 * o) / (e - i), 100), (i = e), (o = 0), c)) ) { var t = performance.memory; c.update(t.usedJSHeapSize / 1048576, t.jsHeapSizeLimit / 1048576); } return e; }, update: function () { a = this.end(); }, domElement: t, setMode: n } ); }36:[] 30:{"id":"247a71e9b46d651f","slug":"flocking-simulation","title":"Flocking Simulation","thumbnail":"728851aec2f8ea0d6e455472fa02d9854503c33198f99b3b30b1990a64f8e25b","access_level":"public","create_time":"$D2025-11-17T03:53:00.720Z","update_time":"$D2025-11-19T11:07:39.073Z","view_time":null,"first_public_time":"$D2025-11-19T12:01:09.655Z","has_unpublished_edits":null,"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":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":352,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"},{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Flocking Simulation","cells":[{"id":0,"value":"# Flocking Simulation\n\n\n\nGet started with creative coding. Learn more in the [tutorial](https://observablehq.com/@tmcw/p5).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"viewof refreshButton = Inputs.button(\"Click me to Refresh\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"stats.dom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"{\n now;\n return flock.boids.length;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof selectNumber = Inputs.select([100, 500, 1000, 2000], {\n label: \"Select Number\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof toggle = Inputs.toggle({ label: \"Use Accelerate\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"p5(main)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"height = (width * 9) / 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"gridXs = parseInt(width / 50) + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"_width = width / gridXs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"gridYs = parseInt(height / 50) + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"_height = height / gridYs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"gridArray = {\n const array2 = [];\n for (let i = 0; i < gridXs; ++i) {\n let array1 = [];\n for (let j = 0; j < gridYs; ++j) {\n array1.push([]);\n }\n array2.push(array1);\n }\n return array2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"gridLimit = {\n const array2 = [];\n for (let i = 0; i < gridXs; ++i) {\n let array1 = [];\n for (let j = 0; j < gridYs; ++j) {\n array1.push([\n (width / gridXs) * i,\n (width / gridXs) * (i + 1),\n (height / gridYs) * j,\n (height / gridYs) * (j + 1)\n ]);\n }\n array2.push(array1);\n }\n return array2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"flock = new Flock()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"function main(sketch) {\n refreshButton;\n\n sketch.setup = function () {\n sketch.createCanvas(width, height);\n sketch.createP(\"Drag the mouse to generate new boids.\");\n\n while (flock.boids.length > 0) {\n flock.boids.pop();\n }\n\n // Add an initial set of boids into the system\n for (let i = 0; i < selectNumber; i++) {\n let b = new Boid(sketch, Math.random() * width, Math.random() * height);\n flock.addBoid(b);\n }\n\n sketch.describe(\n \"A group of bird-like objects, represented by triangles, moving across the canvas, modeling flocking behavior.\"\n );\n };\n\n sketch.draw = function () {\n sketch.background(0);\n flock.run();\n stats.update();\n };\n\n // On mouse drag, add a new boid to the flock\n sketch.mouseDragged = function () {\n flock.addBoid(new Boid(sketch, sketch.mouseX, sketch.mouseY));\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"stats = {\n let stats = new Stats();\n stats.dom.style.position = \"\";\n return stats;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"P5 = require(\"https://unpkg.com/p5@1.2.0/lib/p5.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"