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>
Firstly, use the Error Console in Firefox, or Firebug extension for Firefox, or the equivalents in any other browser.
Secondly, learn JavaScript syntax, as I have no idea where "var minVelocity : float = 5;" came from! For example, JavaScript variable declarations looks like:
Code:
var minVelocity = 5;
In fact, most of the code is not JavaScript at all.
Great wit and madness are near allied, and fine a line their bounds divide.
Yes, JavaScript has dynamic variables that don't and will never need type declarations! Because JS is an uncompiled language it knows what type the variable is automatically depending on how it is used at any given point in time. The compiler does all of the work for you in realtime.
Reply With Quote
Bookmarks