Fire JS Bin - flocking

// Code by Richard Poole: http://sycora.com/
// Algorithm by Craig Reynolds: http://www.red3d.com/cwr/boids/
// Licence for this file: http://creativecommons.org/licenses/MIT/

Math.dotProduct2 = function(ax, ay, bx, by) {
  return ax * bx + ay * by;
}

function FlockController(canvas, options) {
  // Settings for the flocking algorithm.
  var defaults = {
    alignmentPriority: 2,
    cohesionPriority: 1,
    frameRate: 50,
    maxRotation: 30 * Math.PI / 180,
    minSpeed: 3,
    maxSpeed: 5,
    numBoids: 30,
    rotationSpeed: 0.2,
    separationDistance: 20,
    separationPriority: 5,
    targetPriority: 3,
    visualField: Math.PI * 270 / 180,
    visualRange: 50,
  };

var boids = new Array();
    var cosVisualFieldDiv2;
    var redrawInterval;
    var settings = {};
  var targetX = canvas.width / 2;
  var targetY = canvas.height / 2;
    var timer;
    var visualRangeSqr;
    
  if (!canvas.getContext)
    throw new Error('Canvas is not supported by your browser.');

var ctx = canvas.getContext('2d');

var drawBoid = function(boid) {
    ctx.fillRect(boid.x, boid.y, 2, 2);

if (settings && settings.directionVectorStyle) {
      ctx.strokeStyle = settings.directionVectorStyle;
      ctx.beginPath();
      ctx.moveTo(boid.x, boid.y);
      ctx.lineTo(boid.x + boid.vx * 10, boid.y + boid.vy * 10);
      ctx.stroke();
    }
  }

var getVisualStats = function(boid) {
    var stats = {x: 0, y: 0, vx: 0, vy: 0, closestDistance: 999999999};
    var count = 0;
    for (var i in boids) {
      if (boids[i] == boid)
        continue;

var dx = boids[i].x - boid.x;
      var dy = boids[i].y - boid.y;

var distance = Math.sqrt(dx * dx + dy * dy);
      if (distance < stats.closestDistance) {
        stats.closestDistance = distance;
        stats.closestBoid = boids[i];
      }

var ndx = dx / distance;
      var ndy = dy / distance;

var cosθ = Math.dotProduct2(Math.cos(boid.θ), Math.sin(boid.θ), ndx, ndy);

if (dx * dx + dy * dy <= visualRangeSqr && cosθ >= cosVisualFieldDiv2) {
        stats.x += boids[i].x;
        stats.y += boids[i].y;
        stats.vx += boids[i].vx;
        stats.vy += boids[i].vy;
        stats.count++;
      }
    }

stats.x /= count;
    stats.y /= count;
    stats.θ = Math.atan2(stats.vy, stats.vx);
    return stats;
  }

this.animateFrame = function() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#f9f9f9';
        ctx.beginPath();
        ctx.arc(targetX, targetY, 50, 0, Math.PI * 2, true);
        ctx.fill();

// Draw the boids!
    ctx.fillStyle = 'black';
    for (var i in boids)
      drawBoid(boids[i]);

// Move the boids in a flocky way.
    for (i in boids) {
      var boid = boids[i];
      var avg = getVisualStats(boid);
      var tx = boid.vx;
      var ty = boid.vy;

// Steer to avoid crowding local flock mates.
      if (avg.closestBoid) {
        var dx = avg.closestBoid.x - boid.x;
        var dy = avg.closestBoid.y - boid.y;
        if (avg.closestDistance < settings.separationDistance) {
          tx -= dx / avg.closestDistance * settings.separationPriority;
          ty -= dy / avg.closestDistance * settings.separationPriority;
        }
      }

// Steer towards the average heading of local flock mates.
      tx += Math.cos(avg.θ) * settings.alignmentPriority;
      ty += Math.sin(avg.θ) * settings.alignmentPriority;

// Steer towards the average position of local flock mates.
      if (avg.count > 0) {
        var dx = avg.x - boid.x;
        var dy = avg.y - boid.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
        var ndx = dx / distance;
        var ndy = dy / distance;
        tx += ndx * settings.cohesionPriority;
        ty += ndy * settings.cohesionPriority;
      }

// Steer towards the target.
      var dx = targetX - boid.x;
      var dy = targetY - boid.y;
      var distance = Math.max(Math.sqrt(dx * dx + dy * dy), 50);
      var ndx = dx / distance;
      var ndy = dy / distance;
      tx += ndx * settings.targetPriority;
      ty += ndy * settings.targetPriority;

var tθ = Math.atan2(ty, tx);
      var cw = (tθ - boid.θ + Math.PI * 4) % (Math.PI * 2);
      var acw = (boid.θ - tθ + Math.PI * 4) % (Math.PI * 2);
      var rotation = Math.abs(cw) < Math.abs(acw) ? cw : -acw;
      rotation *= settings.rotationSpeed;
      rotation = Math.min(Math.max(rotation, -settings.maxRotation), settings.maxRotation);
      boid.θ += rotation;
      boid.updateVelocity();

boid.updatePosition();
    }
  };

this.setTarget = function(x, y) {
    targetX = x;
    targetY = y;
  }

this.startAnimation = function() {
    timer = window.setInterval(this.animateFrame, redrawInterval);
  };
    
    this.stopAnimation = function() {
        window.clearInterval(timer);
    };

this.updateOptions = function(options) {
        $.extend(settings, options);

var newRedrawInterval = 1000 / settings.frameRate;
        if (redrawInterval != newRedrawInterval) {
            if (timer)
                this.stopAnimation();

redrawInterval = newRedrawInterval;
            this.startAnimation();
        }

cosVisualFieldDiv2 = Math.cos(settings.visualField / 2);
        visualRangeSqr = settings.visualRange * settings.visualRange;

while (boids.length < settings.numBoids)
      boids.push(new Boid(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * Math.PI * 2, settings.minSpeed + Math.random(settings.maxSpeed - settings.minSpeed)));

while (boids.length > settings.numBoids)
            boids.pop();
    };

this.updateOptions(defaults);
    this.updateOptions(options);
}

function Boid(x, y, θ, speed) {
  this.x = x;
  this.y = y;
  this.θ = θ;
  this.speed = speed;

this.updatePosition = function() {
    this.x += this.vx * this.speed;
    this.y += this.vy * this.speed;
  };

this.updateVelocity = function() {
    this.vx = Math.cos(this.θ);
    this.vy = Math.sin(this.θ);
  };

this.updateVelocity();
}
  
// Code by Richard Poole: http://sycora.com/
// Licence for this file: http://creativecommons.org/licenses/MIT/

$(document).ready(function() {
  var canvas = document.getElementById('canvas');
    var controller = new FlockController(canvas);
    canvas.addEventListener('mousemove', function(e) {
        var offsetX = e.offsetX;
        var offsetY = e.offsetY;
        if (!offsetX || !offsetY) {
            offsetX = e.layerX - $(e.target).position().left;
            offsetY = e.layerY - $(e.target).position().top;
        }

controller.setTarget(offsetX, offsetY);
    }, false);

$('#numBoids').slider({
        range: 'min',
        value: 30,
        min: 5,
        max: 100,
        step: 5,
        slide: function(e, ui) { $('#numBoidsValue').text(ui.value); controller.updateOptions({numBoids: ui.value}); }
    });
    
    $('#frameRate').slider({
        range: 'min',
        value: 60,
        min: 5,
        max: 100,
        step: 5,
        slide: function(e, ui) { $('#frameRateValue').text(ui.value); controller.updateOptions({frameRate: ui.value}); }
    });
    
    $('#separationDistance').slider({
        range: 'min',
        value: 20,
        min: 0,
        max: 100,
        step: 10,
        slide: function(e, ui) { $('#separationDistanceValue').text(ui.value); controller.updateOptions({separationDistance: ui.value}); }
    });
    
    $('#separationPriority').slider({
        range: 'min',
        value: 5,
        min: 0,
        max: 5,
        step: 1,
        slide: function(e, ui) { $('#separationPriorityValue').text(ui.value); controller.updateOptions({separationPriority: ui.value}); }
    });

$('#alignmentPriority').slider({
        range: 'min',
        value: 2,
        min: 0,
        max: 5,
        step: 1,
        slide: function(e, ui) { $('#alignmentPriorityValue').text(ui.value); controller.updateOptions({alignmentPriority: ui.value}); }
    });

$('#cohesionPriority').slider({
        range: 'min',
        value: 1,
        min: 0,
        max: 5,
        step: 1,
        slide: function(e, ui) { $('#cohesionPriorityValue').text(ui.value); controller.updateOptions({cohesionPriority: ui.value}); }
    });

$('#targetPriority').slider({
        range: 'min',
        value: 3,
        min: 0,
        max: 5,
        step: 1,
        slide: function(e, ui) { $('#targetPriorityValue').text(ui.value); controller.updateOptions({targetPriority: ui.value}); }
    });

$('#visualRange').slider({
        range: 'min',
        value: 50,
        min: 0,
        max: 200,
        step: 25,
        slide: function(e, ui) { $('#visualRangeValue').text(ui.value); controller.updateOptions({visualRange: ui.value}); }
    });
    
    $('#visualField').slider({
        range: 'min',
        value: 270,
        min: 90,
        max: 360,
        step: 90,
        slide: function(e, ui) { $('#visualFieldValue').text(ui.value + '°'); controller.updateOptions({visualField: ui.value}); }
    });
    
    $('#twitter').button();
});

<!DOCTYPE html> 
<html> 
  <head>
    <title>Flocking simulation with HTML5 canvas | Sycora</title> 
    <meta charset="utf-8"> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <div id="page"> 
      <h1>Flocking simulation with HTML5 canvas</h1> 
      <canvas height="490" id="canvas" width="690"> 
        <h2>Oh no!</h2> 
        <p>Your browser doesn't support the <canvas> tag. Sucks to be you. Why not <a href="http://www.browserchoice.eu/">get a new one</a>?</p> 
      </canvas> 
      <section class="options"> 
        <section> 
          <h2>General</h2> 
          <label for="numBoids"># boids: <span id="numBoidsValue">30</span></label> 
          <div class="slider" id="numBoids"></div> 
          <label for="numBoids">Frame rate: <span id="frameRateValue">60</span></label> 
          <div class="slider" id="frameRate"></div> 
        </section> 
        <section> 
          <h2>Behaviour</h2> 
          <label for="separationDistance">Separation distance: <span id="separationDistanceValue">20</span></label> 
          <div class="slider" id="separationDistance"></div> 
          <label for="separationPriority">Separation priority: <span id="separationPriorityValue">5</span></label> 
          <div class="slider" id="separationPriority"></div> 
          <label for="alignmentPriority">Alignment priority: <span id="alignmentPriorityValue">2</span></label> 
          <div class="slider" id="alignmentPriority"></div> 
          <label for="cohesionPriority">Cohesion priority: <span id="cohesionPriorityValue">1</span></label> 
          <div class="slider" id="cohesionPriority"></div> 
          <label for="targetPriority">Target priority: <span id="targetPriorityValue">3</span></label> 
          <div class="slider" id="targetPriority"></div> 
        </section> 
        <section> 
          <h2>Eyesight</h2> 
          <label for="visualRange">Visual range: <span id="visualRangeValue">50</span></label> 
          <div class="slider" id="visualRange"></div> 
          <label for="visualField">Visual field: <span id="visualFieldValue">270°</span></label> 
          <div class="slider" id="visualField"></div> 
        </section> 
        <section> 
          <p>For a description of these settings, see <a href="http://www.red3d.com/cwr/boids/">Craig Reynolds' original article</a> and <a href="http://vimeo.com/13481264">Rob Hawkes' boids video</a>.</p> 
        </section> 
      </section>

</div>

</body> 
</html>