31:T473,viewof boidsStraight = { const { gutter, width, height, border, fill, stroke, lineWidth } = constants; const n = 20; const ctx = DOM.context2d(width, height); ctx.canvas.style.border = border; ctx.fillStyle = fill; ctx.strokeStyle = stroke; ctx.lineWidth = lineWidth; let hwidth = (width - gutter*2); let hheight = (height - gutter*2); const b = Array(n).fill().map(() => new Boid(hwidth * (Math.random() - 0.5), hheight * (Math.random() - 0.5))); b.forEach(boid => { boid.v.x += Math.random() * 20 - 10; boid.v.y += Math.random() * 20 - 10; // boid.a.x = Math.random() * 1; // boid.a.y = Math.random() * 1; }) let pnow = performance.now(); let then = pnow; let dt = pnow - then; b[0] = new Boid(0,0); while (true) { pnow = performance.now(); dt = pnow - then; then = pnow; ctx.clearRect(0, 0, width, height); ctx.beginPath(); b.forEach(boid => boid.drawV(ctx)); ctx.stroke(); b.forEach(boid => { boid.drawArc(ctx); boid.move(dt); }) ctx.fill(); // ctx.fillText(JSON.stringify(b[0]), 10, 10); yield ctx.canvas; } }32:T49d,viewof boidsRotating = { const { gutter, width, height, border, fill, stroke, lineWidth } = constants; const n = 20; const ctx = DOM.context2d(width, height); ctx.canvas.style.border = border; ctx.fillStyle = fill; ctx.strokeStyle = stroke; ctx.lineWidth = lineWidth; let hwidth = (width - gutter*2); let hheight = (height - gutter*2); const b = Array(n).fill().map(() => new Boid(hwidth * (Math.random() - 0.5), hheight * (Math.random() - 0.5))); b.forEach(boid => { boid.v.x += Math.random() * 20 - 10; boid.v.y += Math.random() * 20 - 10; // boid.a.x = Math.random() * 1; // boid.a.y = Math.random() * 1; }) let pnow = performance.now(); let then = pnow; let dt = pnow - then; b[0] = new Boid(0,0); while (true) { pnow = performance.now(); dt = pnow - then; then = pnow; ctx.clearRect(0, 0, width, height); ctx.beginPath(); b.forEach(boid => boid.drawV(ctx)); ctx.stroke(); b.forEach(boid => { boid.drawArc(ctx); boid.move(dt); boid.v = boid.v.rotate(Math.PI/50); }) ctx.fill(); // ctx.fillText(JSON.stringify(b[0]), 10, 10); yield ctx.canvas; } }33:T1a39,md` ## Boids Flocking code from Processing \`\`\`\` Flock flock; void setup() { size(640, 360); flock = new Flock(); // Add an initial set of boids into the system for (int i = 0; i < 150; i++) { flock.addBoid(new Boid(width/2,height/2)); } } void draw() { background(50); flock.run(); } // Add a new boid into the System void mousePressed() { flock.addBoid(new Boid(mouseX,mouseY)); } // The Flock (a list of Boid objects) class Flock { ArrayList boids; // An ArrayList for all the boids Flock() { boids = new ArrayList(); // Initialize the ArrayList } void run() { for (Boid b : boids) { b.run(boids); // Passing the entire list of boids to each boid individually } } void addBoid(Boid b) { boids.add(b); } } // The Boid class class Boid { PVector position; PVector velocity; PVector acceleration; float r; float maxforce; // Maximum steering force float maxspeed; // Maximum speed Boid(float x, float y) { acceleration = new PVector(0, 0); // This is a new PVector method not yet implemented in JS // velocity = PVector.random2D(); // Leaving the code temporarily this way so that this example runs in JS float angle = random(TWO_PI); velocity = new PVector(cos(angle), sin(angle)); position = new PVector(x, y); r = 2.0; maxspeed = 2; maxforce = 0.03; } void run(ArrayList boids) { flock(boids); update(); borders(); render(); } void applyForce(PVector force) { // We could add mass here if we want A = F / M acceleration.add(force); } // We accumulate a new acceleration each time based on three rules void flock(ArrayList boids) { PVector sep = separate(boids); // Separation PVector ali = align(boids); // Alignment PVector coh = cohesion(boids); // Cohesion // Arbitrarily weight these forces sep.mult(1.5); ali.mult(1.0); coh.mult(1.0); // Add the force vectors to acceleration applyForce(sep); applyForce(ali); applyForce(coh); } // Method to update position void update() { // Update velocity velocity.add(acceleration); // Limit speed velocity.limit(maxspeed); position.add(velocity); // Reset accelertion to 0 each cycle acceleration.mult(0); } // A method that calculates and applies a steering force towards a target // STEER = DESIRED MINUS VELOCITY PVector seek(PVector target) { PVector desired = PVector.sub(target, position); // A vector pointing from the position to the target // Scale to maximum speed desired.normalize(); desired.mult(maxspeed); // Above two lines of code below could be condensed with new PVector setMag() method // Not using this method until Processing.js catches up // desired.setMag(maxspeed); // Steering = Desired minus Velocity PVector steer = PVector.sub(desired, velocity); steer.limit(maxforce); // Limit to maximum steering force return steer; } void render() { // Draw a triangle rotated in the direction of velocity float theta = velocity.heading2D() + radians(90); // heading2D() above is now heading() but leaving old syntax until Processing.js catches up fill(200, 100); stroke(255); pushMatrix(); translate(position.x, position.y); rotate(theta); beginShape(TRIANGLES); vertex(0, -r*2); vertex(-r, r*2); vertex(r, r*2); endShape(); popMatrix(); } // Wraparound void borders() { if (position.x < -r) position.x = width+r; if (position.y < -r) position.y = height+r; if (position.x > width+r) position.x = -r; if (position.y > height+r) position.y = -r; } // Separation // Method checks for nearby boids and steers away PVector separate (ArrayList boids) { float desiredseparation = 25.0f; PVector steer = new PVector(0, 0, 0); int count = 0; // For every boid in the system, check if it's too close for (Boid other : boids) { float d = PVector.dist(position, other.position); // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself) if ((d > 0) && (d < desiredseparation)) { // Calculate vector pointing away from neighbor PVector diff = PVector.sub(position, other.position); diff.normalize(); diff.div(d); // Weight by distance steer.add(diff); count++; // Keep track of how many } } // Average -- divide by how many if (count > 0) { steer.div((float)count); } // As long as the vector is greater than 0 if (steer.mag() > 0) { // First two lines of code below could be condensed with new PVector setMag() method // Not using this method until Processing.js catches up // steer.setMag(maxspeed); // Implement Reynolds: Steering = Desired - Velocity steer.normalize(); steer.mult(maxspeed); steer.sub(velocity); steer.limit(maxforce); } return steer; } // Alignment // For every nearby boid in the system, calculate the average velocity PVector align (ArrayList boids) { float neighbordist = 50; PVector sum = new PVector(0, 0); int count = 0; for (Boid other : boids) { float d = PVector.dist(position, other.position); if ((d > 0) && (d < neighbordist)) { sum.add(other.velocity); count++; } } if (count > 0) { sum.div((float)count); // First two lines of code below could be condensed with new PVector setMag() method // Not using this method until Processing.js catches up // sum.setMag(maxspeed); // Implement Reynolds: Steering = Desired - Velocity sum.normalize(); sum.mult(maxspeed); PVector steer = PVector.sub(sum, velocity); steer.limit(maxforce); return steer; } else { return new PVector(0, 0); } } // Cohesion // For the average position (i.e. center) of all nearby boids, calculate steering vector towards that position PVector cohesion (ArrayList boids) { float neighbordist = 50; PVector sum = new PVector(0, 0); // Start with empty vector to accumulate all positions int count = 0; for (Boid other : boids) { float d = PVector.dist(position, other.position); if ((d > 0) && (d < neighbordist)) { sum.add(other.position); // Add position count++; } } if (count > 0) { sum.div(count); return seek(sum); // Steer towards the position } else { return new PVector(0, 0); } } } \`\`\`\` `34:[] 2f:{"title":"Boids Experimental Notebook","cells":[{"id":0,"value":"md`\n# Boids Experimental Notebook\n\nWherein I play with boids and canvas. \\\\o/\n`\n\n// Bob, Betsy, Brandon and Britney\n\n// Boids should be circles?\n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"viewof boidsFast = {\n const { gutter, width, height, border, fill, stroke, lineWidth } = constants;\n const n = 20;\n const ctx = DOM.context2d(width, height);\n ctx.canvas.style.border = border;\n ctx.fillStyle = fill;\n ctx.strokeStyle = stroke;\n ctx.lineWidth = lineWidth;\n let hwidth = (width - gutter*2);\n let hheight = (height - gutter*2);\n const b = Array(n).fill().map(() => new Boid(hwidth * (Math.random() - 0.5), hheight * (Math.random() - 0.5)));\n b.forEach(boid => {\n boid.v.x += Math.random() * 100 - 50;\n\tboid.v.y += Math.random() * 100 - 50;\n })\n let pnow = performance.now();\n let then = pnow;\n let dt = pnow - then;\n \n \n while (true) {\n pnow = performance.now();\n \tdt = pnow - then;\n then = pnow;\n ctx.clearRect(0, 0, width, height);\n ctx.beginPath();\n b.forEach(boid => boid.drawV(ctx));\n \n ctx.stroke();\n \n b.forEach(boid => {\n boid.drawArc(ctx);\n\t boid.move(dt);\n \n });\n \n ctx.fill();\n \tyield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"// Observable HQ Notebook\nconstants = {\n return {\n width: 600,\n height: 400,\n \tgutter: 25,\n\tborder: \"2px solid #333\",\n fill: \"#333333\",\n stroke: \"#0099CC\",\n strokeWidth: 2\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"class Boid {\n constructor(x, y) {\n this.p = new Vector(x + constants.width/2|0, y + constants.height/2|0);\n this.v = new Vector(0, 0);\n this.a = new Vector(0, 0);\n }\n drawV(ctx) {\n Vector.draw(ctx, this.p, this.v);\n }\n drawBox(ctx) {\n ctx.fillRect(this.p.x - 2, this.p.y - 2, 5, 5);\n }\n \tdrawArc(ctx) {\n ctx.moveTo(this.p.x, this.p.y);\n ctx.arc(this.p.x, this.p.y, 2, 0, 2 * Math.PI);\n }\n \tmove(dt) {\n this.p = this.p.add(this.v.rescale(dt/100));\n this.v = this.v.add(this.a.rescale(dt/100));\n \n if (this.p.x < 1) {\n this.p.x = 1;\n this.v.x *= -1;\n } else if (this.p.x > constants.width - 1) {\n this.p.x = constants.width - 1;\n this.v.x *= -1;\n \t }\n \n if (this.p.y < 1) {\n this.p.y = 1;\n this.v.y *= -1;\n } else if (this.p.y > constants.height - 1) {\n this.p.y = constants.height - 1;\n this.v.y *= -1;\n }\n \n return this;\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"// Vector class!\nclass Vector {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n toString() { return `(${this.x}, ${this.y})`; }\n get magnitude() {\n return Math.sqrt(this.x ** 2 + this.y ** 2);\n }\n get normal() {\n return new Vector(this.x/this.magnitude, this.y/this.magnitude);\n }\n add(v) { return new Vector(this.x + v.x, this.y + v.y); }\n rescale(n) { return new Vector(this.x * n, this.y * n); }\n moveTo(ctx) { ctx.moveTo(this.x, this.y); }\n lineTo(ctx) { ctx.lineTo(this.x, this.y); }\n rotate(th) { return new Vector(Math.cos(th) * this.x - Math.sin(th) * this.y, Math.sin(th) * this.x + Math.cos(th) * this.y);}\n static draw(ctx, a, b) {\n ctx.moveTo(a.x, a.y);\n ctx.lineTo(a.x + b.x*2, a.y + b.y*2);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}