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>

	<head>
		<title>Boids Flocking Simulation</title>
	</head>

	<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;
				follow = chasee.transform.localPosition;
   
				flockCenter = flockCenter - transform.localPosition;
				flockVelocity = flockVelocity - rigidbody.velocity;
				follow = follow - transform.localPosition;
       
				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!