Menu
Hi,
I have a simple web page that is displaying a blank HTML5 canvas.
In the web page, I have some JavaScript code that I want to use to display a simulation of Craig Reynolds’ Boids algorithm on the canvas.
The code for my page is below:
[CODE]
<html>
<head>
<title>Boids Flocking Simulation</title>
<section hidden>
<img id=”boid” src=”v.gif” alt=”bird” width=”5″ height=”5″/>
</section>
</head>
<body onLoad = “Start()”>
<h1>Boids 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>
/*Make a JavaScript variable to hold the canvas, and all other global variables that will be needed */
var boidsCanvas = document.getElementById(“BoidsCanvas”);
var context = boidsCanvas.getContext(“2d”);
var boidImage = new Image();
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;
/*This is the function that will be used to draw the boids */
function drawBoid(){
boidImage.onload = function(){
context.drawImage(boidImage, 350, 150);
};
boidImage.src=”v.gif”;
}
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>
For some reason, when I view the page in the browser, the webpage displays, but the HTML5 canvas is completely blank.
In the firebug console, I have two error messages:
1.
missing ; after for loop initialiser (line 66, column 18)
for (var boid : GameObject in boids) (there is an arrow on this line pointing to the : )
Start is not defined (onload (line2))
onload()
event = load
Start();
I was just wondering if someone could point out what I’m doing wrong, and how I can correct it?
Thanks.