31:T1ae2,sketch = function( p ) { // Adapted from The Nature of Code by Daniel Shiffman // http://natureofcode.com // craig reynolds, steering behaviors let flock; let cohesionSlider; let separationSlider; let alignmentSlider; p.setup = function() { p.createCanvas(p.windowWidth, 800); cohesionSlider = p.createSlider(0, 1, 1, 0.1).position(100,10); separationSlider = p.createSlider(0, 10, 1, 1).position(100,30); alignmentSlider = p.createSlider(0, 2, 1, 0.1).position(100,50); flock = new Flock(); // Add an initial set of boids into the system for (let i = 0; i < 50; i++) { let b = new Boid(p.width/2, p.height/2); flock.addBoid(b); } } p.draw = function() { p.background(0, 1); flock.run(); p.fill(255); p.noStroke(); p.text('cohesion', 20, 20); p.text('separation', 20, 40); p.text('alignment', 20, 60); } //----------------------------------------- class Flock { constructor() { // An array for all the boids this.boids = []; // Initialize the array } run() { for (let i = 0; i < this.boids.length; i++) { // Passing entire list of boids to each boid individually this.boids[i].run(this.boids); } } addBoid(b) { this.boids.push(b); } } //----------------------------------------- class Boid { constructor(x, y) { this.acceleration = p.createVector(0, 0); this.velocity = p.createVector(p.random(-1, 1), p.random(-1, 1)); this.position = p.createVector(x, y); this.r = 20.0; this.maxspeed = 8; // Maximum speed this.maxforce = 0.05; // Maximum steering force } run(boids) { this.flock(boids); this.update(); this.borders(); this.render(); } applyForce(F) { // We could add mass here if we want A = F / M this.acceleration.add(F); } //accumulate a new acceleration each time based on three rules flock(boids) { let sep = this.separate(boids); // Separation let ali = this.align(boids); // Alignment let coh = this.cohesion(boids); // Cohesion // arbitrarily weight these forces sep.mult(separationSlider.value()); ali.mult(alignmentSlider.value()); coh.mult(cohesionSlider.value()); // add the force vectors to acceleration this.applyForce(sep); this.applyForce(ali); this.applyForce(coh); } //update location update() { // Update velocity this.velocity.add(this.acceleration); // Limit speed this.velocity.limit(this.maxspeed); this.position.add(this.velocity); // Reset accelertion 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); steer.limit(this.maxforce); // Limit to maximum steering force return steer; } render() { // Draw a triangle rotated in the direction of velocity let theta = this.velocity.heading() + p.radians(90); let hue = p.round(180 + p.cos(p.frameCount*0.001) * 180); let c = p.color(`hsl(${hue}, 100%, 50%)`); p.noFill(); p.stroke(c); p.push(); p.translate(this.position.x, this.position.y); p.rotate(theta); p.beginShape(); p.vertex(0, -this.r * 2); p.vertex(-this.r, this.r * 2); p.vertex(this.r, this.r * 2); p.endShape(p.CLOSE); p.pop(); } //wrap around borders(boids) { if (this.position.x < -this.r) this.position.x = p.width + this.r; if (this.position.y < -this.r) this.position.y = p.height + this.r; if (this.position.x > p.width + this.r) this.position.x = -this.r; if (this.position.y > p.height + this.r) this.position.y = -this.r; } // Separation // Method checks for nearby boids and steers away separate(boids) { let desiredseparation = 25.0; let steer = p.createVector(0, 0); let count = 0; // For every boid in the system, check if it's too close for (let i = 0; i < boids.length; i++) { let d = p5.Vector.dist(this.position, boids[i].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 let diff = p5.Vector.sub(this.position, boids[i].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(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 neighbordist = 50; let sum = p.createVector(0, 0); let count = 0; for (let i = 0; i < boids.length; i++) { var d = p5.Vector.dist(this.position, boids[i].position); if ((d > 0) && (d < neighbordist)) { sum.add(boids[i].velocity); count++; } } if (count > 0) { sum.div(count); sum.normalize(); sum.mult(this.maxspeed); var steer = p5.Vector.sub(sum, this.velocity); steer.limit(this.maxforce); return steer; } else { return p.createVector(0, 0); } } // Cohesion // For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location cohesion(boids) { let neighbordist = 50; let sum = p.createVector(0, 0); // Start with empty vector to accumulate all locations let count = 0; for (var i = 0; i < boids.length; i++) { let d = p5.Vector.dist(this.position, boids[i].position); if ((d > 0) && (d < neighbordist)) { sum.add(boids[i].position); // Add location count++; } } if (count > 0) { sum.div(count); return this.seek(sum); // Steer towards the location } else { return p.createVector(0, 0); } } } } 32:[] 2f:{"title":"Reynolds Steering","cells":[{"id":5,"value":"# Reynolds Steering","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"container = container_from(canvas);","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"canvas = canvas_template.square_md; //use a template size","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"{ \n //resets div container\n\tcontainer.innerHTML = \"\";\n // reinstantiate the p5 with the sketch\n\treturn new p5(sketch, container);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"import {p5, canvas_template, container_from} from \"@mmansion/p5\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}