NEAT-Template-JavaScript/index.html at master · VTUL/NEAT-Template-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <script language="javascript" src="libraries/p5.dom.js"></script>
  <script language="javascript" src="libraries/p5.sound.js"></script>
  <script language="javascript" src="libraries/Box2d.js"></script>
  <script language="javascript" src="libraries/Crypto.json"></script>

  <script language="javascript" type="text/javascript" src="MapData.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <script language="javascript" type="text/javascript" src="ConnectionGene.js"></script>
  <script language="javascript" type="text/javascript" src="ConnectionHistory.js"></script>
  <script language="javascript" type="text/javascript" src="Node.js"></script>
  <script language="javascript" type="text/javascript" src="Player.js"></script>
  <script language="javascript" type="text/javascript" src="Treat.js"></script>
  <script language="javascript" type="text/javascript" src="Anti.js"></script>
  <script language="javascript" type="text/javascript" src="World.js"></script>
  <script language="javascript" type="text/javascript" src="DogBed.js"></script>
  <script language="javascript" type="text/javascript" src="Enemy.js"></script>
  <script language="javascript" type="text/javascript" src="TennisBall.js"></script>
  <script language="javascript" type="text/javascript" src="Wall.js"></script>
  <script language="javascript" type="text/javascript" src="Block.js"></script>
  <script language="javascript" type="text/javascript" src="Sprite.js"></script>
  <script language="javascript" type="text/javascript" src="PeanutButter.js"></script>
  <script language="javascript" type="text/javascript" src="Population.js"></script>
  <script language="javascript" type="text/javascript" src="Species.js"></script>
  <script language="javascript" type="text/javascript" src="Genome.js"></script>
  <title>NEAT Therapy Dogs</title>
</head>
<body>
  <style>
    * {
      margin: 0px;
      padding: 10px;
      box-sizing: border-box;
    }

   body {
      background-color: #fff2d1;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: 0;
    }

    h2 {
      text-align: center;
      font-family: sans-serif;
      font-size: 32px;
      color: #ff9a4d;
    }

    canvas {
      display: block;
      margin: 5px auto;
    }

    #gameInfo {
      color: #8c7b6d;
      font-size: 25px;
      background-color: #f8f8f8;
      padding: 10px;
      border-top: 2px solid #ffd58e;
      margin: 5px auto;
      width: fit-content;
      text-align: left;
      font-family: monospace;
    }

    h3 {
      text-align: center;
      font-family: sans-serif;
      font-size: 25px;
      color: #ff9a4d;
    }

    #textInfo {
      color: #8c7b6d;
      font-size: 20px;
      background-color: #f8f8f8;
      padding: 10px;
      border-top: 2px solid #ffd58e;
      margin: 10px auto;
      width: fit-content;
      text-align: left;
      font-family: monospace;
    }

    #neatInfo {
      color: #8c7b6d;
      font-size: 20px;
      background-color: #f8f8f8;
      padding: 10px;
      border-top: 2px solid #ffd58e;
      margin: 10px auto;
      line-height: 1.5;
      width: fit-content;
      text-align: left;
      font-family: monospace;
    }

  </style>
  <main>
    <div class="title">
      <h2>Watch an AI learn to play a video game in real time!</h2>
    </div>
    <div id="canvasContainer"></div>
    <div id="gameInfo"></div>
    <h3>Game Explanation</h3>
    <div id="textInfo">
        <p>Looks strange, doesn't it? Why are there so many dogs on screen? That's because there are actually 500 versions of the AI with slightly different brains playing the game at one time, each trying to get the highest score they can. The ones that do get to move on to the next round of training.</p>
        <p>So what's this game? This is a custom video game made in-house that features the VT Therapy Dogs. You play as Epcot, Derek, or Josie as they explore the library, looking for treats and toys while avoiding getting distracted by one of the many sneaky squirrels on campus. The squirrels drop things like chocolate that the dogs need to avoid in order to get a high score, and if the dog runs into a squirrel, they lose focus and the game. The dogs can also get tired from all that running around, so there are also dog beds they can find to recharge. What do you do to recharge when your energy is feeling low? Rest is an important part of keeping your mind sharp and healthy.</p>
    </div>
    <h3>NEAT Explanation</h3>
    <div id="neatInfo">
      <p>How does this whole training thing work? Well, this AI uses a Neuroevolution of augmenting topologies algorithm, or NEAT for short. It sounds complicated, but it is really just an algorithm for mimicking the real-world process of Natural Selection. We give the AI a brain in the form of a matrix, which you might remember from algebra as a grid of numbers. A very simplified example might look like this:  </p>
        <pre>
                                              4 | 8 | 0
                                              5 | 3 | 8
                                              7 | 3 | 2
        </pre>
      <p>At first the matrix is random, and each version of the AI gets a different brain.
      <p>The AI also gets access to inputs and outputs. Inputs are things it knows about the world. Our AI knows how far away a treat is, how far away an enemy is, and whether they are about to run into a wall. Outputs are things it can do. For a game, these are essentially the buttons it can press on a controller. Our AI can move up, down, left, right, and hold down a "sprint" button to temporarily run faster.</p>
      <p>All of the inputs are numbers, and 30 times a second we feed the numbers into the matrix, where the algorithm does some math and passes a value out the other side for each of the possible outputs. The output with the highest value is the action we take, and we sprint if the value for sprinting is above a certain threshold, or "confidence."</p>
      <p>We throw a whole bunch of versions of our AI with different brains (500 per generation for our game) into the game world to see how they do. The ones that do the best by getting the highest scores, we make a copy of their brains and create slight, random adjustments to the numbers in the matrix, then send out a new generation of 500 to see how they do. Then we repeat the process over and over.</p>
      <p>At first, they all move around randomly and are really bad at the game. But eventually some of them get lucky. One of their brains will have a tendency to take the input number for the distance to a treat and want to make that number as low as possible by taking the action that lowers that number (so move right if the treat is to the right to make the distance less). Then, because that individual version of the AI did well and scored points by collecting a treat, its brain goes on and is copied and serves as the basis for the next generation. So the next generation of brains is more likely to want to do the same thing, and over time, the AI gets better and better at the game.</p>
      <p>The visualization below is an attempt to show how this brain functions, and it represents the brain of the AI that has the highest score this generation.</p>
    </div>
    <h3>Controller Explanation</h3>
    <div id="textInfo">
      <p>Think you can do better? Probably. If you want to try your hand at the game and see how your score stacks up against the best the AI can muster right now, grab the controller and hit "A" to start playing the game. Once you're done, compare your score to the top score the AI has gotten? How close were you?</p>
      <p>But the AI will continue to improve over time, and if you come back tomorrow, you might not be able to beat it anymore. AI often eventually surpasses human capabilities at specialized tasks like this, so challenge it again in the future to see how you stack up then.</p>
    </div>
  </main>
</body>
</html>