-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgame.html
More file actions
134 lines (124 loc) · 6.16 KB
/
Copy pathgame.html
File metadata and controls
134 lines (124 loc) · 6.16 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'">
<title>Evolution Arena — griffithee</title>
<meta name="description" content="40 agents learn to navigate using neural networks and a genetic algorithm. Runs entirely in your browser — no API, no server.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="game-page">
<nav>
<div class="nav-inner">
<a href="index.html" class="nav-logo">griffith<span>ee</span></a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="experiments.html">Experiments</a></li>
<li><a href="game.html">Game</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</nav>
<main>
<div class="container">
<header class="page-header game-header">
<div class="page-header-eyebrow">AI experiment · neuroevolution</div>
<h1 class="page-header-title">40 agents. One goal. No instructions.</h1>
<p class="page-header-desc">
Each agent has a tiny neural network for a brain. None of them know what
food is. Watch them figure it out — one generation at a time.
</p>
</header>
<section class="game-layout">
<div class="game-stage-card">
<div class="game-topbar">
<div class="game-pill"><span>Gen</span><strong id="hud-gen">1</strong></div>
<div class="game-pill"><span>Best this gen</span><strong id="hud-best">0</strong></div>
<div class="game-pill"><span>All-time best</span><strong id="hud-best-ever">0</strong></div>
<div class="game-pill"><span>Next gen in</span><strong id="hud-timer">12.0s</strong></div>
<button class="game-pill game-pill-button speed-btn active" type="button" data-speed="0">1×</button>
<button class="game-pill game-pill-button speed-btn" type="button" data-speed="1">5×</button>
<button class="game-pill game-pill-button speed-btn" type="button" data-speed="2">20×</button>
<button class="game-pill game-pill-button" type="button" id="btn-pause">Pause</button>
</div>
<div class="game-canvas-shell">
<canvas id="game-canvas" aria-label="Neuroevolution arena: 40 agents navigating toward food"></canvas>
</div>
</div>
<aside class="game-sidebar">
<div class="game-note">
<div class="game-note-title">What you're watching</div>
<p>
40 triangles, each controlled by a neural network with 8 inputs and 8 hidden nodes.
The inputs are wall proximity sensors and the direction and distance to the nearest
food pellet. The outputs are turn rate and thrust.
</p>
<p>
No agent is told what food is, or that it should move toward it. That behavior
has to emerge from selection pressure alone.
</p>
</div>
<div class="game-note">
<div class="game-note-title">How it evolves</div>
<div class="game-list">
<div class="game-list-item">
<span class="game-key">Score</span>
<p>Food eaten × 200. Time alive is a tie-breaker.</p>
</div>
<div class="game-list-item">
<span class="game-key">Select</span>
<p>Top 30% become parents. Bottom 70% are replaced each generation.</p>
</div>
<div class="game-list-item">
<span class="game-key">Crossover</span>
<p>Each child's 90 weights are drawn randomly from two parents.</p>
</div>
<div class="game-list-item">
<span class="game-key">Mutate</span>
<p>12% of weights get a random nudge. Top 2 carry over unchanged.</p>
</div>
</div>
</div>
<div class="game-note">
<div class="game-note-title">What to watch for</div>
<p><strong style="color:var(--text-primary)">Gen 1–5:</strong> Random wandering. Food is eaten by accident.</p>
<p><strong style="color:var(--text-primary)">Gen 10–20:</strong> The blue leader starts orienting toward food. Others follow.</p>
<p style="margin-bottom:0"><strong style="color:var(--text-primary)">Gen 30+:</strong> Efficient navigation. Watch the trails curve toward pellets.</p>
</div>
<div class="game-note">
<div class="game-note-title">Colors</div>
<p>
<span style="color:#58a6ff">Blue</span> — current leader (highest score this generation).<br>
<span style="color:#39d353">Green</span> — top quarter.<br>
<span style="color:#8b949e">Gray</span> — middle.<br>
<span style="color:#484f58">Dim</span> — bottom quarter.
</p>
<p style="margin-bottom:0">
<strong style="color:var(--text-primary)">Click anywhere on the arena</strong> to drop a food pellet.
Cluster them in one corner and watch the agents learn to find it.
Hit <strong>20×</strong> to skip ahead — the interesting jumps happen fast.
</p>
</div>
</aside>
</section>
</div>
</main>
<footer>
<div class="footer-inner">
<span class="footer-text">griffithee · neuroevolution in vanilla JS</span>
<div class="footer-links">
<a href="index.html">Home</a>
<a href="experiments.html">Experiments</a>
</div>
</div>
</footer>
<script src="js/nav.js"></script>
<script src="js/evolution.js"></script>
</body>
</html>