Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Evolution Simulation</title> | |
| <script src="https://cdn.babylonjs.com/babylon.js"></script> | |
| <style> | |
| body, html { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| #roundDisplay { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| color: white; | |
| font-family: Arial, sans-serif; | |
| font-size: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="renderCanvas"></canvas> | |
| <div id="roundDisplay">Round: 0</div> | |
| <script> | |
| const canvas = document.getElementById("renderCanvas"); | |
| const engine = new BABYLON.Engine(canvas, true); | |
| const roundDisplay = document.getElementById("roundDisplay"); | |
| let round = 0; | |
| // Set canvas size to match window size | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| const createScene = function () { | |
| const scene = new BABYLON.Scene(engine); | |
| const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene); | |
| camera.attachControl(canvas, true); | |
| const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene); | |
| light.intensity = 0.7; | |
| // Ground | |
| const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene); | |
| // Boundary | |
| const boundary = { | |
| minX: -5, | |
| maxX: 5, | |
| minZ: -5, | |
| maxZ: 5, | |
| minY: 0, | |
| maxY: 2 // Ceiling height | |
| }; | |
| // Walls | |
| const wallHeight = 2; | |
| const wallThickness = 0.1; | |
| const walls = []; | |
| // Left wall | |
| const leftWall = BABYLON.MeshBuilder.CreateBox("leftWall", {width: wallThickness, height: wallHeight, depth: boundary.maxZ - boundary.minZ}, scene); | |
| leftWall.position.x = boundary.minX - wallThickness / 2; | |
| leftWall.position.y = wallHeight / 2; | |
| leftWall.position.z = (boundary.maxZ + boundary.minZ) / 2; | |
| walls.push(leftWall); | |
| // Right wall | |
| const rightWall = BABYLON.MeshBuilder.CreateBox("rightWall", {width: wallThickness, height: wallHeight, depth: boundary.maxZ - boundary.minZ}, scene); | |
| rightWall.position.x = boundary.maxX + wallThickness / 2; | |
| rightWall.position.y = wallHeight / 2; | |
| rightWall.position.z = (boundary.maxZ + boundary.minZ) / 2; | |
| walls.push(rightWall); | |
| // Front wall | |
| const frontWall = BABYLON.MeshBuilder.CreateBox("frontWall", {width: boundary.maxX - boundary.minX, height: wallHeight, depth: wallThickness}, scene); | |
| frontWall.position.x = (boundary.maxX + boundary.minX) / 2; | |
| frontWall.position.y = wallHeight / 2; | |
| frontWall.position.z = boundary.minZ - wallThickness / 2; | |
| walls.push(frontWall); | |
| // Back wall | |
| const backWall = BABYLON.MeshBuilder.CreateBox("backWall", {width: boundary.maxX - boundary.minX, height: wallHeight, depth: wallThickness}, scene); | |
| backWall.position.x = (boundary.maxX + boundary.minX) / 2; | |
| backWall.position.y = wallHeight / 2; | |
| backWall.position.z = boundary.maxZ + wallThickness / 2; | |
| walls.push(backWall); | |
| // Ceiling | |
| const ceiling = BABYLON.MeshBuilder.CreatePlane("ceiling", {width: boundary.maxX - boundary.minX, height: boundary.maxZ - boundary.minZ}, scene); | |
| ceiling.position.x = (boundary.maxX + boundary.minX) / 2; | |
| ceiling.position.y = boundary.maxY; | |
| ceiling.position.z = (boundary.maxZ + boundary.minZ) / 2; | |
| ceiling.rotation.x = Math.PI / 2; | |
| const ceilingMaterial = new BABYLON.StandardMaterial("ceilingMat", scene); | |
| ceilingMaterial.alpha = 0.5; // Transparency | |
| ceiling.material = ceilingMaterial; | |
| // Elephants | |
| let elephants = []; | |
| for (let i = 0; i < 5; i++) { | |
| const elephant = BABYLON.MeshBuilder.CreateSphere("elephant", {diameter: 0.5}, scene); | |
| elephant.position.y = 0.5; | |
| elephant.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| elephant.position.z = 0; // Fixed Z position | |
| elephant.behavior = { | |
| speed: Math.random() * 0.02, | |
| direction: new BABYLON.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0).normalize(), | |
| size: 0.5, | |
| color: new BABYLON.Color3(Math.random(), Math.random(), Math.random()) | |
| }; | |
| elephant.material = new BABYLON.StandardMaterial("elephantMat", scene); | |
| elephant.material.diffuseColor = elephant.behavior.color; | |
| elephants.push(elephant); | |
| } | |
| // Prey | |
| let prey = []; | |
| for (let i = 0; i < 10; i++) { | |
| const p = BABYLON.MeshBuilder.CreateSphere("prey", {diameter: 0.3}, scene); | |
| p.position.y = 0.3; | |
| p.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| p.position.z = 0; // Fixed Z position | |
| p.material = new BABYLON.StandardMaterial("preyMat", scene); | |
| p.material.diffuseColor = new BABYLON.Color3(1, 0, 0); // Red color | |
| p.behavior = { | |
| speed: Math.random() * 0.02, | |
| direction: new BABYLON.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0).normalize(), | |
| size: 0.3, | |
| color: new BABYLON.Color3(Math.random(), Math.random(), Math.random()) | |
| }; | |
| p.material = new BABYLON.StandardMaterial("preyMat", scene); | |
| p.material.diffuseColor = p.behavior.color; | |
| prey.push(p); | |
| } | |
| // Grass | |
| const grass = []; | |
| for (let i = 0; i < 20; i++) { | |
| const g = BABYLON.MeshBuilder.CreateBox("grass", {size: 0.2}, scene); | |
| g.position.y = 0.1; | |
| g.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| g.position.z = 0; // Fixed Z position | |
| g.material = new BABYLON.StandardMaterial("grassMat", scene); | |
| g.material.diffuseColor = new BABYLON.Color3(0, 1, 0); // Green color | |
| grass.push(g); | |
| } | |
| // Elephant behavior | |
| scene.registerBeforeRender(function () { | |
| elephants.forEach(elephant => { | |
| const nearestPrey = prey.reduce((nearest, p) => { | |
| return BABYLON.Vector3.Distance(elephant.position, p.position) < BABYLON.Vector3.Distance(elephant.position, nearest.position) ? p : nearest; | |
| }, prey[0]); | |
| const direction = nearestPrey.position.subtract(elephant.position); | |
| direction.normalize(); | |
| elephant.behavior.direction = direction; | |
| elephant.position.addInPlace(elephant.behavior.direction.scale(elephant.behavior.speed)); | |
| // Boundary check | |
| if (elephant.position.x < boundary.minX) elephant.position.x = boundary.minX; | |
| if (elephant.position.x > boundary.maxX) elephant.position.x = boundary.maxX; | |
| if (elephant.position.y < boundary.minY) elephant.position.y = boundary.minY; | |
| if (elephant.position.y > boundary.maxY) elephant.position.y = boundary.maxY; | |
| // Collision detection with walls | |
| walls.forEach(wall => { | |
| const boundingBox = wall.getBoundingInfo().boundingBox; | |
| if (boundingBox.intersectsPoint(elephant.position)) { | |
| // Adjust position to avoid clipping | |
| if (wall === leftWall) elephant.position.x = boundary.minX + wallThickness / 2; | |
| if (wall === rightWall) elephant.position.x = boundary.maxX - wallThickness / 2; | |
| if (wall === frontWall) elephant.position.z = boundary.minZ + wallThickness / 2; | |
| if (wall === backWall) elephant.position.z = boundary.maxZ - wallThickness / 2; | |
| } | |
| }); | |
| if (BABYLON.Vector3.Distance(elephant.position, nearestPrey.position) < 0.5) { | |
| // Prey is eaten | |
| nearestPrey.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| nearestPrey.position.y = Math.random() * (boundary.maxY - boundary.minY) + boundary.minY; | |
| } | |
| }); | |
| }); | |
| // Prey behavior | |
| scene.registerBeforeRender(function () { | |
| prey.forEach(p => { | |
| const nearestElephant = elephants.reduce((nearest, e) => { | |
| return BABYLON.Vector3.Distance(p.position, e.position) < BABYLON.Vector3.Distance(p.position, nearest.position) ? e : nearest; | |
| }, elephants[0]); | |
| const direction = p.position.subtract(nearestElephant.position); | |
| direction.normalize(); | |
| p.behavior.direction = direction; | |
| p.position.addInPlace(p.behavior.direction.scale(p.behavior.speed)); | |
| // Boundary check | |
| if (p.position.x < boundary.minX) p.position.x = boundary.minX; | |
| if (p.position.x > boundary.maxX) p.position.x = boundary.maxX; | |
| if (p.position.y < boundary.minY) p.position.y = boundary.minY; | |
| if (p.position.y > boundary.maxY) p.position.y = boundary.maxY; | |
| // Collision detection with walls | |
| walls.forEach(wall => { | |
| const boundingBox = wall.getBoundingInfo().boundingBox; | |
| if (boundingBox.intersectsPoint(p.position)) { | |
| // Adjust position to avoid clipping | |
| if (wall === leftWall) p.position.x = boundary.minX + wallThickness / 2; | |
| if (wall === rightWall) p.position.x = boundary.maxX - wallThickness / 2; | |
| if (wall === frontWall) p.position.z = boundary.minZ + wallThickness / 2; | |
| if (wall === backWall) p.position.z = boundary.maxZ - wallThickness / 2; | |
| } | |
| }); | |
| // Prey eats grass | |
| const nearestGrass = grass.reduce((nearest, g) => { | |
| return BABYLON.Vector3.Distance(p.position, g.position) < BABYLON.Vector3.Distance(p.position, nearest.position) ? g : nearest; | |
| }, grass[0]); | |
| if (BABYLON.Vector3.Distance(p.position, nearestGrass.position) < 0.3) { | |
| // Grass is eaten | |
| nearestGrass.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| nearestGrass.position.y = Math.random() * (boundary.maxY - boundary.minY) + boundary.minY; | |
| } | |
| }); | |
| }); | |
| // Grass regeneration | |
| let grassTimer = 0; | |
| scene.registerBeforeRender(function () { | |
| grassTimer += scene.getEngine().getDeltaTime(); | |
| if (grassTimer > 1000) { | |
| grassTimer = 0; | |
| grass.forEach(g => { | |
| g.scaling.addInPlace(new BABYLON.Vector3(0.1, 0.1, 0.1)); | |
| }); | |
| } | |
| }); | |
| // Evolution mechanics | |
| let elephantFitness = Array(elephants.length).fill(0); | |
| let preyFitness = Array(prey.length).fill(0); | |
| scene.registerBeforeRender(function () { | |
| elephants.forEach((elephant, i) => { | |
| const nearestPrey = prey.reduce((nearest, p) => { | |
| return BABYLON.Vector3.Distance(elephant.position, p.position) < BABYLON.Vector3.Distance(elephant.position, nearest.position) ? p : nearest; | |
| }, prey[0]); | |
| if (BABYLON.Vector3.Distance(elephant.position, nearestPrey.position) < 0.5) { | |
| elephantFitness[i] += 1; | |
| preyFitness[prey.indexOf(nearestPrey)] -= 1; | |
| } else { | |
| preyFitness[prey.indexOf(nearestPrey)] += 0.1; | |
| } | |
| // Mutation | |
| if (elephantFitness[i] > 10) { | |
| elephantFitness[i] = 0; | |
| elephant.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| elephant.position.y = Math.random() * (boundary.maxY - boundary.minY) + boundary.minY; | |
| elephant.behavior.speed = Math.random() * 0.02; | |
| elephant.behavior.size = Math.random() * 0.5 + 0.1; | |
| elephant.behavior.color = new BABYLON.Color3(Math.random(), Math.random(), Math.random()); | |
| elephant.material.diffuseColor = elephant.behavior.color; | |
| elephant.scaling.setAll(elephant.behavior.size); | |
| } | |
| }); | |
| prey.forEach((p, i) => { | |
| if (preyFitness[i] < -10) { | |
| preyFitness[i] = 0; | |
| p.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| p.position.y = Math.random() * (boundary.maxY - boundary.minY) + boundary.minY; | |
| p.behavior.speed = Math.random() * 0.02; | |
| p.behavior.size = Math.random() * 0.3 + 0.1; | |
| p.behavior.color = new BABYLON.Color3(Math.random(), Math.random(), Math.random()); | |
| p.material.diffuseColor = p.behavior.color; | |
| p.scaling.setAll(p.behavior.size); | |
| } | |
| }); | |
| // Adjust number of elephants and prey based on performance | |
| if (round % 10 === 0) { | |
| const totalElephantFitness = elephantFitness.reduce((a, b) => a + b, 0); | |
| const totalPreyFitness = preyFitness.reduce((a, b) => a + b, 0); | |
| if (totalElephantFitness > 50) { | |
| // Elephants are doing well, create more | |
| for (let i = 0; i < 2; i++) { | |
| const newElephant = BABYLON.MeshBuilder.CreateSphere("elephant", {diameter: 0.5}, scene); | |
| newElephant.position.y = 0.5; | |
| newElephant.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| newElephant.position.z = 0; // Fixed Z position | |
| newElephant.behavior = { | |
| speed: Math.random() * 0.02, | |
| direction: new BABYLON.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0).normalize(), | |
| size: 0.5, | |
| color: new BABYLON.Color3(Math.random(), Math.random(), Math.random()) | |
| }; | |
| newElephant.material = new BABYLON.StandardMaterial("elephantMat", scene); | |
| newElephant.material.diffuseColor = newElephant.behavior.color; | |
| elephants.push(newElephant); | |
| elephantFitness.push(0); | |
| } | |
| } else if (totalPreyFitness < -50) { | |
| // Prey are doing poorly, create more | |
| for (let i = 0; i < 2; i++) { | |
| const newPrey = BABYLON.MeshBuilder.CreateSphere("prey", {diameter: 0.3}, scene); | |
| newPrey.position.y = 0.3; | |
| newPrey.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX; | |
| newPrey.position.z = 0; // Fixed Z position | |
| newPrey.material = new BABYLON.StandardMaterial("preyMat", scene); | |
| newPrey.material.diffuseColor = new BABYLON.Color3(1, 0, 0); // Red color | |
| newPrey.behavior = { | |
| speed: Math.random() * 0.02, | |
| direction: new BABYLON.Vector3(Math.random() - 0.5, Math.random() - 0.5, 0).normalize(), | |
| size: 0.3, | |
| color: new BABYLON.Color3(Math.random(), Math.random(), Math.random()) | |
| }; | |
| newPrey.material = new BABYLON.StandardMaterial("preyMat", scene); | |
| newPrey.material.diffuseColor = newPrey.behavior.color; | |
| prey.push(newPrey); | |
| preyFitness.push(0); | |
| } | |
| } | |
| } | |
| round++; | |
| roundDisplay.textContent = `Round: ${round}`; | |
| }); | |
| return scene; | |
| }; | |
| const scene = createScene(); | |
| engine.runRenderLoop(function () { | |
| scene.render(); | |
| }); | |
| window.addEventListener("resize", function () { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| engine.resize(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |