www.webdeveloper.com
Results 1 to 4 of 4

Thread: Reynolds' Boids algorithm

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    16

    Reynolds' Boids algorithm

    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!

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    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.

  3. #3
    Join Date
    Mar 2012
    Posts
    202
    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.

  4. #4
    Join Date
    Mar 2012
    Posts
    202
    For example, this returns 2

    Code:
    var string = "100x200";
    var string1 = string.split("x")[0];
    var string2 = string.split("x")[1];
    alert(string2/string1);
    and this returns NAN

    Code:
    var string = "1oox2oo";
    var string1 = string.split("x")[0];
    var string2 = string.split("x")[1];
    alert(string2/string1);
    None return errors

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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