30:Tde3,{ const context = DOM.context2d(width, height); const bottomVector = new Vector(0, height); const rightVector = new Vector(width, 0); while (true) { context.clearRect(0, 0, width, height); context.rect(0, 0, width, height); context.stroke(); if(drawNeighbors == "Yes") { for(let i = 0; i < N; i++) { CanvasHelper.drawCircles(context, boids[i].pos, [avoidanceRadius, alignmentRadius, cohesionRadius], 'rgba(200, 200, 200, 0.2)'); const largerRadius = Math.max(Math.max(avoidanceRadius, alignmentRadius), cohesionRadius); if(boids[i].pos.y - largerRadius <= 0) CanvasHelper.drawCircles(context, boids[i].pos, [avoidanceRadius, alignmentRadius, cohesionRadius], 'rgba(200, 200, 200, 0.2)'); if(boids[i].pos.x - largerRadius <= 0) CanvasHelper.drawCircles(context, boids[i].pos, [avoidanceRadius, alignmentRadius, cohesionRadius], 'rgba(200, 200, 200, 0.2)'); if(boids[i].pos.y + largerRadius >= height) CanvasHelper.drawCircles(context, boids[i].pos, [avoidanceRadius, alignmentRadius, cohesionRadius], 'rgba(200, 200, 200, 0.2)'); if(boids[i].pos.x + largerRadius >= width) CanvasHelper.drawCircles(context, boids[i].pos, [avoidanceRadius, alignmentRadius, cohesionRadius], 'rgba(200, 200, 200, 0.2)'); } } for(let i = 0; i < N; i++) { if(drawCenterOfMass == "Yes") { const neighborhood = boids[i].neighborhood(boids, cohesionRadius); if(neighborhood.length > 0) { const centerOfMass = boids[i].neighborhoodCenterOfMass(neighborhood); CanvasHelper.drawCircle(context, centerOfMass, 3, 'red'); context.beginPath(); context.moveTo(boids[i].pos.x, boids[i].pos.y); context.lineTo(centerOfMass.x, centerOfMass.y); context.strokeStyle = "red"; context.stroke(); } } context.strokeStyle = "black"; CanvasHelper.drawTriangle(context, boids[i].bottomRightPoint(), boids[i].bottomLeftPoint(), boids[i].topPoint()); if(boids[i].intersectsBottom()) { CanvasHelper.drawTriangle(context, boids[i].bottomRightPoint().clone().sub(bottomVector), boids[i].bottomLeftPoint().clone().sub(bottomVector), boids[i].topPoint().clone().sub(bottomVector), ); } if(boids[i].intersectsRight()) { CanvasHelper.drawTriangle(context, boids[i].bottomRightPoint().clone().sub(rightVector), boids[i].bottomLeftPoint().clone().sub(rightVector), boids[i].topPoint().clone().sub(rightVector), ); } if(boids[i].intersectsTop()) { CanvasHelper.drawTriangle(context, boids[i].bottomRightPoint().clone().add(bottomVector), boids[i].bottomLeftPoint().clone().add(bottomVector), boids[i].topPoint().clone().add(bottomVector), ); } if(boids[i].intersectsLeft()) { CanvasHelper.drawTriangle(context, boids[i].bottomRightPoint().clone().add(rightVector), boids[i].bottomLeftPoint().clone().add(rightVector), boids[i].topPoint().clone().add(rightVector), ); } boids[i].applyRules(boids, avoidanceRadius, alignmentRadius, cohesionRadius, avoidanceStrength, alignmentStrength, cohesionStrength); boids[i].forward(); } yield context.canvas; } }31:Te85,Boid = class { constructor(index, velocity) { this.index = index; this.size = 15; this.velocity = velocity; this.pos = new Vector(Math.random() * width, Math.random() * height); this.dir = new Vector(2 * Math.random() - 1, 2 * Math.random() - 1).normalize(); this.normal = this.dir.clone().normal(); } rotate(angle) { this.dir.rotate(angle).normalize(); this.normal = this.dir.getNormal(); } forward() { this.pos.x = this.pos.x + this.dir.x * this.velocity; this.pos.y = this.pos.y + this.dir.y * this.velocity; if(this.pos.x < 0) this.pos.x = width + this.pos.x; if(this.pos.x > width) this.pos.x = this.pos.x - width; if(this.pos.y < 0) this.pos.y = height + this.pos.y; if(this.pos.y > height) this.pos.y = this.pos.y - height; } alignment(boids, distance) { const neighborhood = this.neighborhood(boids, distance); if(neighborhood.length > 0) { return Vector.average(neighborhood.map((d) => d.dir)); } else { return new Vector(0, 0); } } cohesion(boids, distance) { const neighborhood = this.neighborhood(boids, distance); if(neighborhood.length > 0) { const averagePosition = this.neighborhoodCenterOfMass(neighborhood); return averagePosition.clone().sub(this.pos); } else { return new Vector(0, 0); } } avoidance(boids, separationSize) { const closeNeighbors = this.neighborhood(boids, separationSize); // Avoidance if(closeNeighbors.length > 0) { const separationAveragePosition = Vector.average( closeNeighbors.map((d) => d.pos.clone()) ); return separationAveragePosition.clone() .sub(this.pos) .mult(-1); } else { return new Vector(0, 0); } } applyRules(boids, avoidanceRadius, alignmentRadius, cohesionRadius, avoidanceStrength, alignmentStrength, cohesionStrength) { const alignment = this.alignment(boids, alignmentRadius); const cohesion = this.cohesion(boids, cohesionRadius); const avoidance = this.avoidance(boids, avoidanceRadius); if(avoidance.magnitude() > 0) this.dir.rotateTowards(avoidance.normalize(), avoidanceStrength); if(alignment.magnitude() > 0) this.dir.rotateTowards(alignment.normalize(), alignmentStrength); if(cohesion.magnitude() > 0) this.dir.rotateTowards(cohesion.normalize(), cohesionStrength); this.dir.normalize(); this.normal = this.dir.clone().normal(); } neighborhood(boids, distance) { return boids.filter((boid) => boid.pos.clone().sub(this.pos).magnitude() < distance && boid.index != this.index); } neighborhoodCenterOfMass(neighborhood) { return Vector.average(neighborhood.map((d) => d.pos)); } bottomLeftPoint() { return new Vector(this.pos.x - this.normal.x / 3 * this.size - this.dir.x * this.size / 2, this.pos.y - this.normal.y / 3 * this.size - this.dir.y * this.size / 2); } bottomRightPoint() { return new Vector(this.pos.x + this.normal.x / 3 * this.size - this.dir.x * this.size / 2, this.pos.y + this.normal.y / 3 * this.size - this.dir.y * this.size / 2); } topPoint() { return new Vector(this.pos.x + this.dir.x * this.size / 2, this.pos.y + this.dir.y * this.size / 2); } intersectsLeft() { return this.pos.x + this.dir.x * this.size <= 0; } intersectsBottom() { return this.pos.y + this.dir.y * this.size >= height; } intersectsRight() { return this.pos.x + this.dir.x * this.size >= width; } intersectsTop() { return this.pos.y + this.dir.y * this.size <= 0; } }32:T783,class Vector { constructor(x, y) { this.x = x; this.y = y; } clone() { return new Vector(this.x, this.y); } magnitude() { return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)); } normalize() { const m = this.magnitude(); if(m > 0) { this.x = this.x / m; this.y = this.y / m; } return this; } normal() { const new_x = this.y; const new_y = -this.x; this.x = new_x; this.y = new_y; return this; } rotate(angle) { const new_x = this.x * Math.cos(angle) - this.y * Math.sin(angle); const new_y = this.x * Math.sin(angle) + this.y * Math.cos(angle); this.x = new_x; this.y = new_y; return this; } angle() { if(this.x == 0) { return this.y > 0 ? Math.PI / 2 : Math.PI * 3/2; } else if(this.y == 0) { return this.x > 0 ? 0 : Math.PI; } else if(this.x > 0 && this.y > 0) { return Math.atan(this.y / this.x); } else if(this.x < 0 && this.y > 0) { return Math.PI + Math.atan(this.y / this.x); } else if(this.x < 0 && this.y < 0) { return Math.PI + Math.atan(this.y / this.x); } else if(this.x > 0 && this.y < 0) { return Math.PI * 2 + Math.atan(this.y / this.x); } } rotateTowards(v, a) { return this.rotate((v.angle() - this.angle()) * a); } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } divide(scalar) { this.x /= scalar; this.y /= scalar; return this; } mult(scalar) { this.x *= scalar; this.y *= scalar; return this; } dot(v) { return this.x * v.x + this.y * v.y; } static average(vs) { const average = new Vector(0, 0); vs.forEach((v) => average.add(v)); average.divide(vs.length); return average; } }33:[] 2e:{"title":"Boids","cells":[{"id":606,"value":"md`\n# Boids\n\nThis notebook contains my interpretation of the [Boids](https://en.wikipedia.org/wiki/Boids) simulation, originally developed by Craig Reynolds in 1986.\n\nBoids is an agent-based simulation in which flocking behavior emerges from three basic rules:\n\n## Avoidance\n\nBoids steer away from nearby boids.\n\n## Alignment\n\nBoids steer to match the heading of nearby boids.\n\n## Cohesion\n\nBoids steer towards the average position of nearby boids.\n\nSee [http://www.red3d.com/cwr/boids/](http://www.red3d.com/cwr/boids/) for images explaining each force.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof N = slider({ min: 1, max: 400, value: 50, step: 1, title: \"Number of Boids\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`\nThese radii control the distance at which each rule applies:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof avoidanceRadius = slider({\n min: 0,\n max: 100,\n value: 20, \n title: \"Avoidance Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof alignmentRadius = slider({\n min: 0,\n max: 100,\n value: 40,\n title: \"Alignment Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"viewof cohesionRadius = slider({\n min: 0,\n max: 100,\n value: 40,\n title: \"Cohesion Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"md`\nThese strengths control how much each rule contributes to steering the boids:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"viewof avoidanceStrength = slider({ min: 0, max: 0.2, value: 0.1, title: \"Avoidance Strength\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"viewof alignmentStrength = slider({ min: 0, max: 0.2, value: 0.08, title: \"Alignment Strength\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"viewof cohesionStrength = slider({ min: 0, max: 0.2, value: 0.02, title: \"Cohesion Strength\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"md`\nDrawing options:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"viewof drawNeighbors = radio({ options: ['Yes', 'No'], value: \"No\", title: \"Draw Neighborhoods\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"viewof drawCenterOfMass = radio({\n options: [\"Yes\", \"No\"],\n title: \"Draw cohesion center of mass\",\n value: \"No\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"boids = [...Array(N).keys()].map((i) => new Boid(i, 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"CanvasHelper = ({\n drawTriangle: function(context, bottomLeft, bottomRight, top) {\n context.beginPath();\n context.moveTo(bottomLeft.x, bottomLeft.y);\n context.lineTo(bottomRight.x, bottomRight.y);\n context.lineTo(top.x, top.y);\n context.lineTo(bottomLeft.x, bottomLeft.y);\n context.stroke();\n context.fillStyle = \"white\";\n context.fill();\n },\n \n drawCircle: function(context, pos, r, color) {\n context.beginPath();\n context.arc(pos.x, pos.y, r, 0, Math.PI * 2);\n context.fillStyle = color;\n context.fill();\n },\n \n drawCircles: function(context, pos, radii, color) {\n radii.forEach((d) => this.drawCircle(context, pos, d, color));\n },\n \n drawVector: function(context, pos, vec) {\n context.beginPath();\n context.moveTo(pos.x, pos.y);\n context.lineTo(pos.x + vec.x, pos.y + vec.y);\n context.strokeStyle = \"green\";\n context.stroke(); \n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"import { slider, checkbox, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}