Update index.html

index.html

@@ -31,6 +31,10 @@
 
         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);
@@ -41,13 +45,74 @@
             // 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() * 10 - 5;
-                elephant.position.z = Math.random() * 10 - 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);
             }
 
@@ -56,8 +121,18 @@
             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() * 10 - 5;
-                p.position.z = Math.random() * 10 - 5;
+                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);
             }
 
@@ -66,8 +141,8 @@
             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() * 10 - 5;
-                g.position.z = Math.random() * 10 - 5;
+                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);
@@ -82,12 +157,31 @@
 
                     const direction = nearestPrey.position.subtract(elephant.position);
                     direction.normalize();
-                    elephant.position.addInPlace(direction.scale(0.01));
+                    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() * 10 - 5;
-                        nearestPrey.position.z = Math.random() * 10 - 5;
+                        nearestPrey.position.x = Math.random() * (boundary.maxX - boundary.minX) + boundary.minX;
+                        nearestPrey.position.y = Math.random() * (boundary.maxY - boundary.minY) + boundary.minY;
                     }
                 });
             });
@@ -95,8 +189,43 @@
             // Prey behavior
             scene.registerBeforeRender(function () {
                 prey.forEach(p => {
-                    const randomDirection = new BABYLON.Vector3(Math.random() - 0.5, 0, Math.random() - 0.5);
-                    p.position.addInPlace(randomDirection.scale(0.01));
+                    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;
+                    }
                 });
             });
 
@@ -132,16 +261,26 @@
                     // Mutation
                     if (elephantFitness[i] > 10) {
                         elephantFitness[i] = 0;
-                        elephant.position.x = Math.random() * 10 - 5;
-                        elephant.position.z = Math.random() * 10 - 5;
+                        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() * 10 - 5;
-                        p.position.z = Math.random() * 10 - 5;
+                        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);
                     }
                 });
 
@@ -155,8 +294,16 @@
                         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() * 10 - 5;
-                            newElephant.position.z = Math.random() * 10 - 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);
                         }
@@ -165,8 +312,18 @@
                         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() * 10 - 5;
-                            newPrey.position.z = Math.random() * 10 - 5;
+                            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);
                         }
@@ -186,6 +343,8 @@
         });
 
         window.addEventListener("resize", function () {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
             engine.resize();
         });
     </script>