index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>HTML5 Genetic Algorithm 2D Car Thingy - Chrome recommended</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" />
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div class="clearfix">
    <div class="float-left">

      <canvas id="mainbox" width="800" height="400"></canvas>

      <div class="clearfix">
        <div class="float-left">

          <div id="graphholder">
            <canvas id="graphcanvas" width="400" height="250"></canvas>
            <div class="scale" id="s100">250</div>
            <div class="scale" id="s75">187</div>
            <div class="scale" id="s50">125</div>
            <div class="scale" id="s25">62</div>
            <div class="scale" id="s0">0</div>
          </div>

        </div>
        <div class="float-left">

          <div id="topscoreholder">
            <input id="toggle-ghost" type="button" value="View top replay" /><br />
            <div id="topscores"></div>
          </div>

        </div>
      </div>

      <div id="minimapholder">
        <!--<img src="reddot.png" id="minimapmarker" />-->
        <div id="minimapfog"></div>
        <canvas id="minimap" width="800" height="200"></canvas>
        <div id="minimapcamera"></div>
      </div>

      <div id="debug"></div>

    </div>

    <div class="float-left">

      <div id="data">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="X8VB9NDYWQDPE">
          <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit"
            alt="PayPal - The safer, easier way to pay online!">
          <img alt="" border="0" src="https://www.paypalobjects.com/pt_BR/i/scr/pixel.gif" width="1" height="1">
        </form>
        <br />

        <div class="buttons">
          <input id="save-progress" type="button" value="Save Population" />
          <input id="restore-progress" type="button" value="Restore Saved Population" />
          <input id="toggle-display" type="button" value="Surprise!" />
          <input id="new-population" type="button" value="New Population" />
          <input id="fast-forward" type="button" value="Fast Forward" />
        </div>

        <div>
          <label>Create new world with seed</label><br>
          <input type="text" placeholder="Enter any string" id="newseed" />
          <input id="confirm-reset" type="button" value="Go!" />
        </div>

        <table>
          <tr>
            <td>Generation</td>
            <td>
              <div id="generation"></div>
            </td>
          </tr>
          <tr>
            <td>Cars alive</td>
            <td>
              <div id="population"></div>
            </td>
          </tr>
          <tr>
            <td>Distance</td>
            <td>
              <div id="distancemeter"></div>
            </td>
          </tr>
          <tr>
            <td>Height</td>
            <td>
              <div id="heightmeter"></div>
            </td>
          </tr>
          <tr>
            <td>Mutation rate:</td>
            <td>
              <select id="mutationrate">
                <option value="0">0%</option>
                <option value="0.01">1%</option>
                <option value="0.02">2%</option>
                <option value="0.03">3%</option>
                <option value="0.04">4%</option>
                <option value="0.05" selected="selected">5%</option>
                <option value="0.1">10%</option>
                <option value="0.2">20%</option>
                <option value="0.3">30%</option>
                <option value="0.4">40%</option>
                <option value="0.5">50%</option>
                <option value="0.75">75%</option>
                <option value="1.0">100%</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Mutation size:</td>
            <td>
              <select id="mutationsize">
                <option value="0">0%</option>
                <option value="0.01">1%</option>
                <option value="0.02">2%</option>
                <option value="0.03">3%</option>
                <option value="0.04">4%</option>
                <option value="0.05">5%</option>
                <option value="0.1">10%</option>
                <option value="0.2">20%</option>
                <option value="0.3">30%</option>
                <option value="0.4">40%</option>
                <option value="0.5">50%</option>
                <option value="0.75">75%</option>
                <option value="1.0" selected="selected">100%</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Floor:</td>
            <td>
              <select id="floor">
                <option value="0" selected="selected">fixed</option>
                <option value="1">mutable</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Gravity:</td>
            <td>
              <select id="gravity">
                <option value="24.8">Jupiter (24.8)</option>
                <option value="11.2">Neptune (11.2)</option>
                <option value="10.4">Saturn (10.4)</option>
                <option value="9.81" selected="selected">Earth (9.81)</option>
                <option value="8.9">Venus (8.9)</option>
                <option value="8.7">Uranus (8.7)</option>
                <option value="3.7">Mars/Mercury (3.7)</option>
                <option value="1.6">Moon (1.6)</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Elite clones:</td>
            <td>
              <select id="elitesize">
                <option value="0">0</option>
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
        </table>

        <br>

        <input type="button" value="Watch Leader" onclick="cw_setCameraTarget(-1)" />
        <div id="health"></div>
        <div id="cars"></div>
      </div>

    </div>
  </div>


  <div id="explanation">
    <h3>But what is it?</h3>
    <p>The program uses a simple genetic algorithm to evolve random two-wheeled shapes into cars over generations.
      Loosely
      based on <a href="http://boxcar2d.com/">BoxCar2D</a>, but
      written from scratch, only using the same physics engine (<a href="http://box2d.org/">box2d</a>).<br />
      seedrandom.js written by <a href="http://davidbau.com/">David Bau</a>. (thanks!)</p>

    <h3>Try the brick version</h3>
    <p><a href="https://rednuht.org/genetic_brick_cars/">Genetic Brick Cars</a> evolves cars from real LEGO® bricks,
      plates, axles and wheels in 3D: they snap together stud by stud, roll down a bumpy ramp, and break apart when
      they crash.</p>


    <h3>Controls</h3>
    <table>
      <tr>
        <th>Save Population</th>
        <td>Saves current population locally.</td>
      </tr>
      <tr>
        <th>Restore Saved Population</th>
        <td>Restore a previously saved population.</td>
      </tr>
      <tr>
        <th>Suprise</th>
        <td>Toggles drawing, makes the simulation faster.</td>
      </tr>
      <tr>
        <th>New Population</th>
        <td>Keeps the generated track and restarts the whole car population.</td>
      </tr>
      <tr>
        <th>Create new world with seed</th>
        <td>The same seed always creates the same track, so you can agree on a seed with your friends
          and compete. :)
        </td>
      </tr>
      <tr>
        <th>Mutation rate</th>
        <td>The chance that each gene in each individual will mutate to a random value when a new generation is
          born.
        </td>
      </tr>
      <tr>
        <th>Mutation size</th>
        <td>The range each gene can mutate into. Lower numbers mean the gene will have values closer to the
          original.
        </td>
      </tr>
      <tr>
        <th>Elite clones</th>
        <td>The top n cars that will be copied over to the next generation.</td>
      </tr>
      <tr>
        <th>View top replay</th>
        <td>Pause the current simulation and show the top performing car. Click a second time to resume
          simulation.
        </td>
      </tr>
    </table>

    <h3>Graph</h3>
    <table>
      <tr>
        <th>Red</th>
        <td>Top score in each generation</td>
      </tr>
      <tr>
        <th>Green</th>
        <td>Average of the top 10 cars in each generation</td>
      </tr>
      <tr>
        <th>Blue</th>
        <td>Average of the entire generation</td>
      </tr>
    </table>

    <h3>Genome</h3>
    <p>
      The genome consists of:
    </p>
    <ul>
      <li>Shape (8 genes, 1 per vertex)</li>
      <li>Wheel size (2 genes, 1 per wheel)</li>
      <li>Wheel position (2 genes, 1 per wheel)</li>
      <li>Wheel density (2 genes, 1 per wheel) darker wheels mean denser wheels</li>
      <li>Chassis density (1 gene) darker body means denser chassis</li>
    </ul>

    <h3>Blurb</h3>
    <p>This is not as deterministic as it should be, so your best car may not perform as well as it once did. The
      terrain
      gets more complex with distance.<br />
      I'm not in the mood to deal with checking if all scripts have loaded before running, so refresh the page if things
      seem whack.</p>

    <h3>GitHub</h3>
    <p>The code is now on a <a href="https://github.com/red42/HTML5_Genetic_Cars">GitHub repository</a>. Feel free to
      contribute!</p>

    <p>Originally written by <a href="http://rednuht.org">this guy</a>, now with contributions from patient people at
      GitHub.</p>
  </div>

  <div name="minimapmarker" class="minimapmarker"></div>

  <div name="healthbar" class="healthbar" onclick="cw_setCameraTarget(this.car_index)">
    <div name="health" class="health"></div>
    <div name="healthtext" class="healthtext"></div>
  </div>

  <script src="lib/seedrandom.js"></script>
  <script src="lib/box2d.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
  <script src="src/app.js"></script>

</body>

</html>