Awesome

boids-ts

Flock simulation and boids

(demo)

Flock simulation with canvas, gl-vec2 and typescript.

Code is not optimized but slavishly ported from Nature of Code (chapter 6). Go Daniel Shiffman, go!

For the original code see here:

For a - maybe better, less OOP, more optimized - boid package see hughsk boid

Example

import { Flock, Boids, heading } from 'boid-ts'

const flock = new Flock()

for (let i = 0; i < 60; i++) {
  const opts = {
    center: [0, 0],
    canvasSize: [canvasWidth, canvasHeight],

    velocity: [Math.random(), Math.random()],
    r: 3,
    maxspeed: 3,
    maxforce: 0.05,

    separationScale: 1.5,
    alignScale: 1.0,
    cohesionScale: 1.0,

    desiredSeparation: 25,
    neighborDistance: 50,
  }

  let b = new Boid(opts)
  flock.addBoid(b)
}

function loop() {
  flock.run()

  context.clearRect(0, 0, width, height)

  for (let i = 0; i < flock.boids.length; ++i) {
    const boid = flock.boids[i]
    const x = boid.position[0]
    const y = boid.position[1]
    const theta = heading(boid.velocity) + Math.PI / 2

    context.save()
    context.translate(x, y)
    context.rotate(theta)
    context.beginPath()
    context.moveTo(0, -r * 2)
    context.lineTo(-r, r * 2)
    context.lineTo(r, r * 2)
    context.closePath()
    context.stroke()
    context.restore()
  }
  requestAnimationFrame(loop)
}
requestAnimationFrame(loop)

Awesome

boids-ts

Example

License