Spaces:
Running
Running
Update index.html
Browse files- index.html +62 -3
index.html
CHANGED
@@ -40,6 +40,16 @@
|
|
40 |
border: 1px solid white;
|
41 |
border-radius: 5px;
|
42 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
43 |
</style>
|
44 |
</head>
|
45 |
<body>
|
@@ -49,6 +59,10 @@
|
|
49 |
<div class="sidebar" id="sidebar">
|
50 |
<h3>Population Stats</h3>
|
51 |
</div>
|
|
|
|
|
|
|
|
|
52 |
|
53 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
|
54 |
<script>
|
@@ -59,6 +73,12 @@
|
|
59 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
60 |
document.body.appendChild(renderer.domElement);
|
61 |
|
|
|
|
|
|
|
|
|
|
|
|
|
62 |
// Game board parameters
|
63 |
const boardSize = 50; // Gigantic board
|
64 |
const tileSize = 1;
|
@@ -113,6 +133,10 @@
|
|
113 |
);
|
114 |
particle.userData = {
|
115 |
direction: new THREE.Vector3(Math.random(), 0, Math.random()).normalize(),
|
|
|
|
|
|
|
|
|
116 |
stats: generateCharacter(),
|
117 |
};
|
118 |
|
@@ -171,18 +195,53 @@
|
|
171 |
function updateParticles() {
|
172 |
particleSystem.children.forEach(particle => {
|
173 |
const direction = particle.userData.direction;
|
174 |
-
particle.position
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
175 |
|
176 |
// Bounce off edges of the board
|
177 |
-
if (
|
178 |
direction.x = -direction.x;
|
179 |
}
|
180 |
-
if (
|
181 |
direction.z = -direction.z;
|
182 |
}
|
183 |
});
|
184 |
}
|
185 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
186 |
// Set camera position
|
187 |
camera.position.set(0, 50, 50);
|
188 |
camera.lookAt(0, 0, 0);
|
|
|
40 |
border: 1px solid white;
|
41 |
border-radius: 5px;
|
42 |
}
|
43 |
+
.timer {
|
44 |
+
position: absolute;
|
45 |
+
top: 10px;
|
46 |
+
right: 10px;
|
47 |
+
background: rgba(0, 0, 0, 0.5);
|
48 |
+
color: white;
|
49 |
+
padding: 10px;
|
50 |
+
border-radius: 5px;
|
51 |
+
font-family: Arial, sans-serif;
|
52 |
+
}
|
53 |
</style>
|
54 |
</head>
|
55 |
<body>
|
|
|
59 |
<div class="sidebar" id="sidebar">
|
60 |
<h3>Population Stats</h3>
|
61 |
</div>
|
62 |
+
<div class="timer" id="timer">
|
63 |
+
<p>Simulation Time: <span id="simulationTime">0</span> seconds</p>
|
64 |
+
<p>Epoch: <span id="epoch">1</span></p>
|
65 |
+
</div>
|
66 |
|
67 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
|
68 |
<script>
|
|
|
73 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
74 |
document.body.appendChild(renderer.domElement);
|
75 |
|
76 |
+
// Timer variables
|
77 |
+
let simulationTime = 0;
|
78 |
+
let epoch = 1;
|
79 |
+
const timerElement = document.getElementById('simulationTime');
|
80 |
+
const epochElement = document.getElementById('epoch');
|
81 |
+
|
82 |
// Game board parameters
|
83 |
const boardSize = 50; // Gigantic board
|
84 |
const tileSize = 1;
|
|
|
133 |
);
|
134 |
particle.userData = {
|
135 |
direction: new THREE.Vector3(Math.random(), 0, Math.random()).normalize(),
|
136 |
+
rotation: new THREE.Vector3(0, Math.random() * 2 * Math.PI, 0),
|
137 |
+
accelerate: Math.random() * 0.05 + 0.01,
|
138 |
+
brake: 0.02,
|
139 |
+
reverse: -0.02,
|
140 |
stats: generateCharacter(),
|
141 |
};
|
142 |
|
|
|
195 |
function updateParticles() {
|
196 |
particleSystem.children.forEach(particle => {
|
197 |
const direction = particle.userData.direction;
|
198 |
+
const position = particle.position;
|
199 |
+
|
200 |
+
// Move particle
|
201 |
+
position.add(direction.multiplyScalar(particle.userData.accelerate));
|
202 |
+
|
203 |
+
// Detect collisions and adjust behavior
|
204 |
+
particleSystem.children.forEach(otherParticle => {
|
205 |
+
if (particle !== otherParticle) {
|
206 |
+
const distance = position.distanceTo(otherParticle.position);
|
207 |
+
if (distance < 0.5) {
|
208 |
+
// Reverse direction on collision
|
209 |
+
direction.negate();
|
210 |
+
particle.userData.accelerate = particle.userData.reverse;
|
211 |
+
}
|
212 |
+
}
|
213 |
+
});
|
214 |
+
|
215 |
+
// Gradually brake
|
216 |
+
if (particle.userData.accelerate > 0) {
|
217 |
+
particle.userData.accelerate -= particle.userData.brake;
|
218 |
+
if (particle.userData.accelerate < 0) {
|
219 |
+
particle.userData.accelerate = 0;
|
220 |
+
}
|
221 |
+
}
|
222 |
|
223 |
// Bounce off edges of the board
|
224 |
+
if (position.x < -boardSize / 2 || position.x > boardSize / 2) {
|
225 |
direction.x = -direction.x;
|
226 |
}
|
227 |
+
if (position.z < -boardSize / 2 || position.z > boardSize / 2) {
|
228 |
direction.z = -direction.z;
|
229 |
}
|
230 |
});
|
231 |
}
|
232 |
|
233 |
+
// Timer update function
|
234 |
+
function updateTimer() {
|
235 |
+
simulationTime++;
|
236 |
+
timerElement.textContent = simulationTime;
|
237 |
+
if (simulationTime % 10 === 0) {
|
238 |
+
epoch++;
|
239 |
+
epochElement.textContent = epoch;
|
240 |
+
}
|
241 |
+
}
|
242 |
+
|
243 |
+
setInterval(updateTimer, 1000);
|
244 |
+
|
245 |
// Set camera position
|
246 |
camera.position.set(0, 50, 50);
|
247 |
camera.lookAt(0, 0, 0);
|