www.webdeveloper.com
Results 1 to 2 of 2

Thread: Craig Reynolds' Boids algorithm- simulation of flocking behaviour using HTML5 and JS

  1. #1
    Join Date
    Apr 2012
    Posts
    16

    Craig Reynolds' Boids algorithm- simulation of flocking behaviour using HTML5 and JS

    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 : )

    2. 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.

  2. #2
    Join Date
    Apr 2012
    Posts
    55
    The reason for the second error is most likely because of the first. The Start function is never loaded because of the syntax error, so when Start is called onload it results in "Start is not defined".

    The reason for the first is because you are trying to declare boid as a GameObject and JavaScript is loosely typed -- you can't declare a variable as a type. just remove the ": GameObject" part and it should fix that error (or comment it out like you commented out the others).

    However, then you're going to get errors on other lines, like these:

    Code:
    var Controller : GameObject;
    
    private var inited = false;
    private var minVelocity : float;
    private var maxVelocity : float;
    private var randomness : float;
    private var chasee : GameObject;
    You need to take out those type declarations and the private keywords. That looks more like ActionScript. JavaScript doesn't do that.
    Last edited by nathanwall; 04-30-2012 at 08:29 AM.
    joi JavaScript Framework - the sunnier side of JavaScript.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles