2b:null 2c:["$","title",null,{"children":"Worms boids | rdevooght | Observable"}] 31:T652,class Worm { constructor({length = 10, seg_length = 5, color = "blue"} = {}) { // To work as a boid, the worm object must have a direction, a speed and a position this.direction = Math.random() * Math.PI; this.speed = 3; this.position = [ (Math.random() * width) / 2 + width / 4, (Math.random() * height) / 2 + height / 4 ]; // Options specific to the worms this.length = length; this.seg_length = seg_length; this.color = color; // initialise the worm as an horizontal line on the right of the head this.nodes = [this.position]; for (var i = 1; i < length; i++) { this.nodes.push([ this.nodes[i - 1][0] + seg_length, this.nodes[i - 1][1] ]); } } // move the worm, must be called each time the position of the head is changed update() { this.nodes[0] = this.position; for (var i = 1; i < this.length; i++) { var L = vecmath.dist(this.nodes[i], this.nodes[i - 1]); var new_x = this.nodes[i - 1][0] + (this.seg_length / L) * (this.nodes[i][0] - this.nodes[i - 1][0]); var new_y = this.nodes[i - 1][1] + (this.seg_length / L) * (this.nodes[i][1] - this.nodes[i - 1][1]); this.nodes[i][0] = new_x; this.nodes[i][1] = new_y; } } draw(ctx) { ctx.lineCap = "round"; ctx.lineWidth = 10; ctx.miterLimit = 1; ctx.beginPath(); ctx.moveTo(...this.nodes[0]); for (var i = 1; i < this.nodes.length; i++) { ctx.lineTo(...this.nodes[i]); } ctx.strokeStyle = this.color; ctx.stroke(); return ctx; } }32:T13ff,class BoidWrapper { constructor(Boids, boid, opts = {}){ this.boids = Boids; this.boid = boid; // Direction, speed and position are stored as properties of the boid object // They are initialised as 1. the value passed in the opts object if it exists, // if not 2. as the value already stored in the boid object if it existed, // if not 3. is randomly initialised this.boid.direction = opts.direction || this.boid.direction || 2 * Math.random() * Math.PI; this.boid.position = opts.position || this.boid.position || [ Math.random() * this._width, Math.random() * this._height ]; this.boid.speed = opts.speed || this.boid.speed || 1; const obj = { vel: vecmath.sub( vecmath.trans(this.boid.position, this.boid.direction, this.boid.speed), this.boid.position ), acc: [0, 0], id: this.boids.flock.length }; Object.assign(this, obj); this.epsilon = opts.epsilon || 0.000001; } update(){ const prev_pos = this.boid.position; let alignment = [0, 0], cohesion = [0, 0], separation = [0, 0], n = 0, candidates = this.boids.flock; if (this.boids._quadtree){ candidates = this.boids.tree.within(this.boid.position[0], this.boid.position[1], this.boids._perception).map(id => this.boids.flock[id]); } for (let i = 0, l = candidates.length; i < l; i ++){ const that = candidates[i], dist = vecmath.dist(this.boid.position, that.boid.position); if (this.id !== that.id && dist < this.boids._perception){ alignment = vecmath.add(alignment, that.vel); cohesion = vecmath.add(cohesion, that.boid.position); const diff = vecmath.div( vecmath.sub(this.boid.position, that.boid.position), Math.max(dist, this.epsilon) ); separation = vecmath.add(separation, diff); n++; } } if (n > 0){ alignment = vecmath.div(alignment, n); alignment = vecmath.setMag(alignment, this.boids._maxSpeed); alignment = vecmath.sub(alignment, this.vel); alignment = vecmath.limit(alignment, this.boids.maxForce); cohesion = vecmath.div(cohesion, n); cohesion = vecmath.sub(cohesion, this.boid.position); cohesion = vecmath.setMag(cohesion, this.boids._maxSpeed); cohesion = vecmath.sub(cohesion, this.vel); cohesion = vecmath.limit(cohesion, this.boids.maxForce); separation = vecmath.div(separation, n); separation = vecmath.setMag(separation, this.boids._maxSpeed); separation = vecmath.sub(separation, this.vel); separation = vecmath.limit(separation, this.boids.maxForce); } alignment = vecmath.mult(alignment, this.boids._alignment); cohesion = vecmath.mult(cohesion, this.boids._cohesion); separation = vecmath.mult(separation, this.boids._separation); this.acc = vecmath.add(this.acc, alignment); this.acc = vecmath.add(this.acc, cohesion); this.acc = vecmath.add(this.acc, separation); this.boid.position = vecmath.add(this.boid.position, this.vel); this.vel = vecmath.add(this.vel, this.acc); this.vel = vecmath.limit(this.vel, this.boids._maxSpeed); this.boid.direction = vecmath.ang(prev_pos, this.boid.position); this.boid.speed = vecmath.dist(prev_pos, this.boid.position); this._handle_boundaries(); this.acc = vecmath.mult(this.acc, 0); this.boid.update(); } // When approaching a wall, the boid can either bounce or pass through the wall and loop to the other side _handle_boundaries() { if (this.boids.boundaries_behavior == 'bounce') { this._bounce(); } else { this._traverse(); } } _bounce() { if (this.boid.position[0] < 0) { this.boid.position[0] = -this.boid.position[0]; this.boid.direction = Math.PI - this.boid.direction; this.vel[0] = -this.vel[0]; } if (this.boid.position[1] < 0) { this.boid.position[1] = -this.boid.position[1]; this.boid.direction = - this.boid.direction; this.vel[1] = -this.vel[1]; } if (this.boid.position[0] > width) { this.boid.position[0] = 2*width - this.boid.position[0]; this.boid.direction = Math.PI - this.boid.direction; this.vel[0] = -this.vel[0]; } if (this.boid.position[1] > height) { this.boid.position[1] = 2*height - this.boid.position[1]; this.boid.direction = - this.boid.direction; this.vel[1] = -this.vel[1]; } } // This doesn't work well with worms, the head of the worms moves properly, // but the body isn't handled properly. _traverse() { if (this.boid.position[0] > this.boids._width) this.boid.position[0] = 0; if (this.boid.position[0] < 0) this.boid.position[0] = this.boids._width; if (this.boid.position[1] > this.boids._height) this.boid.position[1] = 0; if (this.boid.position[1] < 0) this.boid.position[1] = this.boids._height; } draw(ctx) { return this.boid.draw(ctx); } }33:T7da,class Boids { constructor(){ this._width = width; this._height = height; this._perception = 20; this._alignment = 1; this._cohesion = 1; this._separation = 1; this._maxSpeed = 4; this._quadtree = true; this.maxForce = 0.2; this.boundaries_behavior = 'bounce'; this.flock = []; this.tree = null; } alignment(n){ if (isFinite(n)){ this._alignment = n; return this; } else { return this._alignment; } } cohesion(n){ if (isFinite(n)){ this._cohesion = n; return this; } else { return this._cohesion; } } perception(n){ if (isFinite(n)){ this._perception = n; return this; } else { return this._perception; } } separation(n){ if (isFinite(n)){ this._separation = n; return this; } else { return this._separation; } } width(n){ if (isFinite(n)){ this._width = n; return this; } else { return this._width; } } height(n){ if (isFinite(n)){ this._height = n; return this; } else { return this._height; } } quadtree(bool){ if (arguments.length) { this._quadtree = bool; return this; } else { return this._quadtree; } } maxSpeed(n){ if (isFinite(n)){ this._maxSpeed = n; return this; } else { return this._maxSpeed; } } add(boid, opts){ this.flock.push(new BoidWrapper(this, boid, opts)); return this; } each(fn){ for (let i = 0, l = this.flock.length; i < l; i++){ fn(this.flock[i], i, this.flock); } return this; } tick(){ if (this._quadtree) { this.tree = new KDBush(this.flock, p => p.boid.position[0], p => p.boid.position[1]); } this.each(boid => boid.update()); return this; } draw(ctx) { this.each(boid => boid.draw(ctx)); return this; } }34:[] 2f:{"id":"71699aab2b32a113","slug":"worms-boids","title":"Worms boids","thumbnail":"ba0ead9f7f5b396b03ceee56a95d5044689262664546498a4deddb43355899ad","access_level":"public","create_time":"$D2022-01-03T13:58:51.767Z","update_time":"$D2022-01-03T14:38:25.573Z","view_time":null,"first_public_time":"$D2022-01-03T14:40:40.173Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"08edfe4fc9c48058","login":"rdevooght","name":"","avatar_url":"https://avatars-next.observableusercontent.com/84eeb55c51a715de2358854408e42b23748bf474ec7b5e8dfe59fa94b4976d6b","tier":"starter_2024"},"version":279,"publish_version":279,"role":null,"authored":false,"authors":[{"type":"individual","id":"b57291a859dc84da","login":"rdevooght","name":"","avatar_url":"https://avatars-next.observableusercontent.com/84eeb55c51a715de2358854408e42b23748bf474ec7b5e8dfe59fa94b4976d6b","tier":null}],"members":[{"type":"individual","id":"b57291a859dc84da","login":"rdevooght","name":"","avatar_url":"https://avatars-next.observableusercontent.com/84eeb55c51a715de2358854408e42b23748bf474ec7b5e8dfe59fa94b4976d6b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Worms boids","cells":[{"id":0,"value":"# Worms boids\n\nBased on the \"[vanilla boids](https://observablehq.com/@harrystevens/vanilla-boids)\" of [Harry Stevens](https://observablehq.com/@harrystevens), here are boids with a worm-like body.\n\nThe original _Boid_ class as been modified to be a wrapper around another class (_Worm_) that handles the shape and drawing of the boid as it moves.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":171,"value":"{\n let startTime = (new Date()).getTime(), seconds = 0, secondsRounded = 0, ticks = 0, speeds = [];\n \n const ctx = DOM.context2d(myBoids.width(), myBoids.height());\n \n \n while (true && myBoids.flock.length){\n myBoids.tick();\n ctx.clearRect(0, 0, myBoids.width(), myBoids.height());\n ctx.fillStyle = '#122240';\n ctx.fillRect(0, 0, myBoids.width(), myBoids.height());\n \n myBoids.draw(ctx);\n\n seconds = ((new Date()).getTime() - startTime) / 1e3;\n ticks++;\n document.querySelector(\".ticker\").innerHTML = `${myBoids.flock.length} boids at ${d3.mean(speeds)} frames per second`;\n \n if (Math.round(seconds) !== secondsRounded){\n speeds.push(ticks);\n if (speeds.length > 2) speeds.shift();\n secondsRounded = Math.round(seconds);\n ticks = 0;\n }\n \n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"{\n const el = DOM.element(\"div\");\n el.classList.add(\"ticker\");\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"viewof n_worms = Inputs.range([0, 255], { step: 1, label: \"Number of worms\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"myBoids = {\n const sim = new Boids();\n\n // Add worms\n for (let i = 0; i < n_worms; i++) {\n sim.add(\n new Worm({\n length: Math.round(Math.random() * 15 + 5),\n color: d3.interpolatePlasma(Math.random())\n })\n );\n }\n\n return sim;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":152,"value":"import { vecmath } from \"@harrystevens/vector-math\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"KDBush = require(\"kdbush@3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"