# Reynolds' Boids algorithm

• 04-03-2012, 05:43 AM
someone2088
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!
• 04-03-2012, 12:45 PM
Declan1991
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.
• 04-03-2012, 12:58 PM
Gray1989
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.
• 04-03-2012, 01:03 PM
Gray1989
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

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.31411 seconds
• Memory Usage 2,394KB
• Queries Executed 11 (?)
Template Usage (20):
• (4)bbcode_code_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates