Menu
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!