Reynolds' Boids algorithm

Hi,

I am attempting to use HTML 5 and JavaScript to display a simulation of Reynolds' Boids algorithm on a webpage.

The algorithm simulates the flocking behaviour of birds while they're in flight.

I have tried writing the webpage, using a canvas to display the simulation, but for some reason, when I view the page in a web browser, I just get a blank canvas, and no simulation is displayed.

I was wondering if someone could point me in the right direction?

The HTML and JavaScript I have written is below:

Code:
```<!DOCTYPE html>
<html>

<title>Boids Flocking Simulation</title>

<body>
<h1>Boyds Flocking Algorithm example</h1>
<p>The simulation below shows a simple example of Craig Reynolds' Boids algorithm which simulates
the flocking behaviour of brids.</p>

<canvas id="BoidsCanvas" width="700" height="300" style="border:1px dotted" onClick="stop_game()"></canvas>

<script>
var minVelocity : float     = 5;
var maxVelocity : float     = 20;
var randomness : float      = 1;
var flockSize : int     = 20;
var prefab : GameObject;
var chasee : GameObject;

var flockCenter : Vector3;
var flockVelocity : Vector3;

private var boids;

function Start() {
boids = new Array(flockSize);
for (var i=0; i<flockSize; i++) {
var position = Vector3(
Random.value*collider.bounds.size.x,
Random.value*collider.bounds.size.y,
Random.value*collider.bounds.size.z
) - collider.bounds.extents;

var boid = Instantiate(prefab, transform.position, transform.rotation);
boid.transform.parent = transform;
boid.transform.localPosition = position;
boid.GetComponent("Boid Flocking").setController(gameObject);
boids[i] = boid;
}
}

function Update () {
var theCenter = Vector3.zero;
var theVelocity = Vector3.zero;

for (var boid : GameObject in boids) {
theCenter       = theCenter + boid.transform.localPosition;
theVelocity     = theVelocity + boid.rigidbody.velocity;
}

flockCenter = theCenter/(flockSize);
flockVelocity = theVelocity/(flockSize);
}
var Controller : GameObject;

private var inited = false;
private var minVelocity : float;
private var maxVelocity : float;
private var randomness : float;
private var chasee : GameObject;

function Start () {
StartCoroutine("boidSteering");
}

function boidSteering () {
while(true) {
if (inited) {
rigidbody.velocity = rigidbody.velocity + calc() * Time.deltaTime;

// enforce minimum and maximum speeds for the boids
var speed = rigidbody.velocity.magnitude;
if (speed > maxVelocity) {
rigidbody.velocity = rigidbody.velocity.normalized * maxVelocity;
} else if (speed < minVelocity) {
rigidbody.velocity = rigidbody.velocity.normalized * minVelocity;
}
}
waitTime = Random.Range(0.3, 0.5);
yield WaitForSeconds(waitTime);
}
}

function calc () {
var randomize   = Vector3((Random.value *2) -1, (Random.value * 2) -1, (Random.value * 2) -1);

randomize.Normalize();

flockCenter = Controller.GetComponent("Boid Controller").flockCenter;
flockVelocity = Controller.GetComponent("Boid Controller").flockVelocity;

flockCenter = flockCenter - transform.localPosition;
flockVelocity = flockVelocity - rigidbody.velocity;

return (flockCenter + flockVelocity + follow*2 + randomize*randomness);
}

function setController (theController : GameObject) {
Controller  = theController;
minVelocity = Controller.GetComponent("Boid Controller").minVelocity;
maxVelocity = Controller.GetComponent("Boid Controller").maxVelocity;
randomness  = Controller.GetComponent("Boid Controller").randomness;
chasee      = Controller.GetComponent("Boid Controller").chasee;
inited      = true;
}
var boidController : Transform;

function LateUpdate () {
if (boidController) {
var watchPoint : Vector3 = boidController.GetComponent("Boid Controller").flockCenter;
transform.LookAt(watchPoint+boidController.transform.position);
}
}
</script>

</body>

</html>```
Thanks!