index.haml

!!!5
%head
  %title HTML5 Boids - Bird flocks simulation
  %link{"rel" => "stylesheet", "href" => "style.css", "type" => "text/css"}
  %link{"rel" => "stylesheet", "href" => "jquery-ui-custom.css", "type" => "text/css"}

  %script{"src" => "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", "type" => "text/javascript"}
  %script{"src" => "kd-tree.js", "type" => "text/javascript"}
  %script{"src" => "heap.js", "type" => "text/javascript"}
  %script{"src" => "jquery-ui-custom.js", "type" => "text/javascript"}
  %script{"src" => "vector2.js", "type" => "text/javascript"}
  %script{"src" => "boids2d_renderer.js", "type" => "text/javascript"}
  %script{"src" => "boids.js", "type" => "text/javascript"}
  %script{"src" => "app.js", "type" => "text/javascript"}

  %script{"src" => "ga.js", "type" => "text/javascript"}
%body
  #ui
    #options
      %h2 Options

      #controls
        #simulation-controls.slider-group
          .slider-box.option#boidsNumber
            .slider
            .value
            %label Number of boids
          .slider-box.option#simulationSpeed
            .slider
            .value
            %label Simulation speed
          .slider-box.option#acceleration
            .slider
            .value
            %label Acceleration factor
          .slider-box.option#flockSize
            .slider
            .value
            %label Flock size

        #behavior-controls.slider-group
          .slider-box.option#perceivedCenterWeight
            .slider
            .value
            %label Average position importance
          .slider-box.option#perceivedVelocityWeight
            .slider
            .value
            %label Average velocity importance
          .slider-box.option#collisionAvoidanceWeight
            .slider
            .value
            %label Collision avoidance importance
          .slider-box.option#stayInBoundsWeight
            .slider
            .value
            %label Stay in screen importance

      %p Click anywhere in the canvas to set a goal, click again to unset.
      #checkboxes
        .checkbox#showAveragePosition
          %input{type: "checkbox"}
          %label Show average position
        .checkbox#showVelocityVectors
          %input{type: "checkbox"}
          %label Show velocity vectors

      #buttons.btn-group
        .btn#play.active <img src='img/play.png'/> 
        .btn#pause <img src='img/pause.png'/>
        .btn#stop <img src='img/stop.png'/>
    #info
      #about
        :markdown
          ## HTML5 Boids
          <p class='center'>HTML5 implementation of the <a href='http://www.red3d.com/cwr/boids/'>boids model</a> of coordinated animal motion.</p>

          ### The model
          *Boids* is a computer model of *coordinated animal motion* such as bird flocks and fish schools. The model consists of three simple rules that describe how an individual boid moves based on the positions and velocities of its nearby boids:

          1. **Collision avoidance**: point away from the k nearest boids.
          2. **Flock centering**: point towards the perceived center of mass of the k nearest boids.
          3. **Velocity matching**: update velocity to the average of the k nearest boids.

          Note that this implementation is a little different from the [original model](http://www.red3d.com/cwr/boids/), and doesn't aim to recreate the exact same behavior. This aims to be an HTML5 visualization of the model that is configurable and performs well with as many boids as possible. The code is [open-source](https://github.com/tech_no_crat/boids) and hopefully, easy to read and tweak.

          The original model was developed by [Craig Reynolds](http://www.red3d.com/cwr/index.html).

          ### The implementation
          It's all written in [coffeescript](http://coffeescript.org/), a language that compiles into javascript. To improve performance, I used a kd-tree for answering queries of the type "what are the K nearest points to point P". The kd-tree and the binary heap it requires are also written in coffeescript. The code is on [github](https://github.com/tech_no_crat/boids).

          ### Tweaking
          You can configure the simulation to some extend without touching the code or leaving your browser. Click on the option button to the right and you will be presented with certain configuration options that can significantly alter the boids' behavior. Here's a more detailed explanation of the sliders:

          - **Number of boids**: The number of boids on the screen. Decreasing this can improve performance significantly.
          - **Simulation speed**: Increasing this value too much will result in decreased accuracy.
          - **Acceleration factor**: How fast the boids can accelerate. A high value will make the boids behave more like fish.
          - **Flock size**: The number of neighboors boids will consider to calculate the center of mass and flock velocity.
          - **Importance factors**: Each of the four rules (three from the model, and an additional rule to keep the boids in the screen) has an associated weight. The higher the weight, the more important the rule is considered.

    #overhead
      #options-button <img src='img/options.png'/>
      %header
        %h1 Boids
        %p#desc HTML5 Bird Flocks Simulation
        %p#instruction Click for more info

  %canvas#sim