import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Create population bar const populationBar = document.createElement('div'); populationBar.id = 'populationBar'; populationBar.style.position = 'absolute'; populationBar.style.top = '10px'; populationBar.style.left = '10px'; populationBar.style.padding = '10px'; populationBar.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; populationBar.style.color = 'white'; populationBar.style.fontFamily = 'Arial, sans-serif'; populationBar.style.fontSize = '14px'; populationBar.style.borderRadius = '5px'; populationBar.style.zIndex = '1000'; parentDiv.appendChild(populationBar); // Create natural ball count bar const naturalBallBar = document.createElement('div'); naturalBallBar.id = 'naturalBallBar'; naturalBallBar.style.position = 'absolute'; naturalBallBar.style.bottom = '10px'; naturalBallBar.style.left = '10px'; naturalBallBar.style.padding = '10px'; naturalBallBar.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; naturalBallBar.style.color = 'white'; naturalBallBar.style.fontFamily = 'Arial, sans-serif'; naturalBallBar.style.fontSize = '14px'; naturalBallBar.style.borderRadius = '5px'; naturalBallBar.style.zIndex = '1000'; parentDiv.appendChild(naturalBallBar); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -20, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); // Define physics material for the ball const ballPhysMaterial = new CANNON.Material('ballMaterial'); // Create contact material between ball and ground const ballGroundContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, groundPhysMaterial, { friction: 0.05, // Lower friction for smoother rolling restitution: 0.3 // Reduced restitution for less bouncy balls } ); world.addContactMaterial(ballGroundContactMaterial); // Create contact material between balls const ballBallContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, ballPhysMaterial, { friction: 0.05, // Lower friction between balls for easier pushing restitution: 0.4 // Reduced restitution for less bouncy collisions } ); world.addContactMaterial(ballBallContactMaterial); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position to be more zoomed out camera.position.set(0, 60, 120); // Increased height and distance camera.lookAt(0, 0, 0); // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFFFFF); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; // Adjusted damping factor controls.screenSpacePanning = false; controls.maxPolarAngle = Math.PI / 2; // Create flat terrain function createTerrain() { const size = 400; // Increased from 200 to 400 // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04.png?MBRT'); const normalMap = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04_Nrm.png?BQVT'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // Create initial scene const terrain = createTerrain(); /** * Variables for ball and creature spawning */ const ballSpawnInterval = 0.2; // seconds between ball spawns (doubled spawn rate) let timeSinceLastBall = 0; const balls = []; const creatures = []; const maxBalls = 40; // Doubled limit for the number of balls const creatureSpawnChance = 0.1; // 10% chance to spawn a creature instead of a regular ball const redCreatureSpawnChance = 0.05; // 5% chance to spawn a red creature class StripedBall { constructor(x, y, z) { this.size = 2; this.type = 'striped'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.lastEatTime = Date.now(); this.isDead = false; } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const texture = textureLoader.load('https://play.rosebud.ai/assets/a ball with blue and orange stripes.png?YHX7'); const material = new THREE.MeshStandardMaterial({ map: texture }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update(creatures) { if (this.isDead) return; // Find the nearest creature let nearestCreature = null; let nearestDistance = Infinity; for (const creature of creatures) { const distance = this.body.position.distanceTo(creature.body.position); if (distance < nearestDistance) { nearestCreature = creature; nearestDistance = distance; } } // Chase the nearest creature if (nearestCreature) { const direction = new CANNON.Vec3().copy(nearestCreature.body.position).vsub(this.body.position); direction.normalize(); direction.scale(10, direction); this.body.applyForce(direction, this.body.position); // Check if the striped ball touched the creature if (nearestDistance < this.size + nearestCreature.size) { this.eat(nearestCreature); } } // Update mesh position and rotation this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } eat(creature) { // Remove the eaten creature const index = creatures.indexOf(creature); if (index > -1) { creatures.splice(index, 1); scene.remove(creature.mesh); world.removeBody(creature.body); } // 40% chance to reproduce if (Math.random() < 0.4) { this.reproduce(); } } reproduce() { const offset = 3; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + 5; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; const newStripedBall = new StripedBall(x, y, z); creatures.push(newStripedBall); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class BlueBallCreature { constructor(x, y, z) { this.size = 2.2; this.type = 'blue'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.lastEatTime = Date.now(); this.isDead = false; } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x0000FF }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update(creatures, balls) { if (this.isDead) return; if (Date.now() - this.lastEatTime > 6000) { this.die(); return; } let nearestTarget = null; let nearestDistance = Infinity; for (const ball of balls) { if (ball.type === 'pollen') { const distance = this.body.position.distanceTo(ball.body.position); if (distance < nearestDistance) { nearestTarget = ball; nearestDistance = distance; } } } for (const creature of creatures) { if (creature.type === 'yellowDot' || creature.type === 'red') { const distance = this.body.position.distanceTo(creature.body.position); if (distance < nearestDistance) { nearestTarget = creature; nearestDistance = distance; } } } if (nearestTarget) { const direction = new CANNON.Vec3().copy(nearestTarget.body.position).vsub(this.body.position); direction.normalize(); direction.scale(11, direction); this.body.applyForce(direction, this.body.position); if (nearestDistance < this.size + nearestTarget.size) { this.eat(nearestTarget); } } this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } eat(target) { if (target.type === 'pollen') { const index = balls.indexOf(target); if (index > -1) { balls.splice(index, 1); scene.remove(target.mesh); world.removeBody(target.body); } // 20% chance to die when eating pollen if (Math.random() < 0.2) { this.die(); return; } } else if (target.type === 'yellowDot' || target.type === 'red') { const index = creatures.indexOf(target); if (index > -1) { creatures.splice(index, 1); scene.remove(target.mesh); world.removeBody(target.body); } // Always reproduce when eating a red creature if (target.type === 'red') { this.reproduce(); this.reproduceCreature(); } } this.lastEatTime = Date.now(); } eat(pollen) { // Remove the eaten pollen ball const index = balls.indexOf(pollen); if (index > -1) { balls.splice(index, 1); scene.remove(pollen.mesh); world.removeBody(pollen.body); } // Reset the last eat time this.lastEatTime = Date.now(); // Reproduce this.reproduce(); // Also create a new blue creature this.reproduceCreature(); } reproduce() { const offset = 3; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + 5; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; spawnBall(x, y, z); } reproduceCreature() { const offset = 3; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + 5; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; const newBlueBall = new BlueBallCreature(x, y, z); creatures.push(newBlueBall); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class Creature { constructor(x, y, z, traits = {}) { this.size = 2; this.type = 'yellow'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.lastEatTime = Date.now(); this.isDead = false; this.traits = traits; this.applyTraits(); } applyTraits() { this.speed = 10 + (this.traits.speed || 0); this.maxLifespan = 10000 + (this.traits.lifespan || 0) * 1000; } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0xffff00 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 // Add this line to set restitution directly on the body }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update(balls, creatures) { if (this.isDead) return; // Check if the creature should die if (Date.now() - this.lastEatTime > this.maxLifespan) { this.die(); return; } // Find the nearest apple, ball, or dark green creature let nearestTarget = null; let nearestDistance = Infinity; for (const creature of creatures) { if (creature.type === 'apple' || creature.type === 'parasiticApple' || creature.type === 'darkGreen') { const distance = this.body.position.distanceTo(creature.body.position); if (distance < nearestDistance) { nearestTarget = creature; nearestDistance = distance; } } } // If no apple or dark green creature is found, look for regular balls if (!nearestTarget) { for (const ball of balls) { const distance = this.body.position.distanceTo(ball.body.position); if (distance < nearestDistance) { nearestTarget = ball; nearestDistance = distance; } } } // Chase the nearest target if (nearestTarget) { const direction = new CANNON.Vec3().copy(nearestTarget.body.position).vsub(this.body.position); direction.normalize(); direction.scale(this.speed, direction); // Use the creature's speed this.body.applyForce(direction, this.body.position); // Check if the creature touched the target if (nearestDistance < this.size + (nearestTarget.size || nearestTarget.body.shapes[0].radius)) { this.eat(nearestTarget); } } // Update mesh position and rotation this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } eat(target) { if (target.type === 'apple' || target.type === 'parasiticApple') { const index = creatures.indexOf(target); if (index > -1) { if (target.type === 'parasiticApple') { target.eat(); // This will spawn green creatures and remove the parasitic apple this.transformToDarkGreen(); return; } else { creatures.splice(index, 1); scene.remove(target.mesh); world.removeBody(target.body); } } } else { const index = balls.indexOf(target); if (index > -1) { balls.splice(index, 1); scene.remove(target.mesh); world.removeBody(target.body); } } this.lastEatTime = Date.now(); this.reproduce(); this.reproduceCreature(); if (Math.random() < 0.01) { const stripedBall = new StripedBall( this.body.position.x, this.body.position.y, this.body.position.z ); creatures.push(stripedBall); } } transformToDarkGreen() { const darkGreenCreature = new DarkGreenCreature( this.body.position.x, this.body.position.y, this.body.position.z ); const index = creatures.indexOf(this); if (index > -1) { creatures.splice(index, 1, darkGreenCreature); scene.remove(this.mesh); world.removeBody(this.body); } } reproduce() { const offset = 3; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + 5; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; spawnBall(x, y, z); } reproduceCreature() { const offset = 3; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + 5; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; let offspringTraits = {}; if (Math.random() < 0.02) { // 2% chance to mutate offspringTraits = { speed: 2, lifespan: 2 }; } else { // 98% chance to inherit parent's traits offspringTraits = { ...this.traits }; } const newCreature = new Creature(x, y, z, offspringTraits); creatures.push(newCreature); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class RedCreature { constructor(x, y, z) { this.size = 2.5; this.type = 'red'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.lastEatTime = Date.now(); this.isDead = false; this.hasEatenYellow = false; } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0xff0000 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 // Add this line to set restitution directly on the body }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update(creatures) { if (this.isDead) return; if (Date.now() - this.lastEatTime > 10000) { this.die(); return; } let nearestTarget = null; let nearestDistance = Infinity; for (const creature of creatures) { if (creature.type === 'apple' || creature.type === 'yellow') { const distance = this.body.position.distanceTo(creature.body.position); if (distance < nearestDistance) { nearestTarget = creature; nearestDistance = distance; } } } if (nearestTarget) { const direction = new CANNON.Vec3().copy(nearestTarget.body.position).vsub(this.body.position); direction.normalize(); direction.scale(12, direction); this.body.applyForce(direction, this.body.position); if (nearestDistance < this.size + nearestTarget.size) { this.eat(nearestTarget); } } this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } eat(target) { const index = creatures.indexOf(target); if (index > -1) { if (target.type === 'parasiticApple') { target.eat(); // This will spawn green creatures and remove the parasitic apple this.transformToDarkGreen(); return; } else { creatures.splice(index, 1); scene.remove(target.mesh); world.removeBody(target.body); } } // Reset the last eat time this.lastEatTime = Date.now(); if (target.type === 'yellow') { this.hasEatenYellow = true; // Reproduce only if it has eaten a yellow ball this.reproduce(); this.reproduceCreature(); } else if (target.type === 'apple') { // Eating an apple extends the red creature's lifespan this.lastEatTime = Date.now(); } } transformToDarkGreen() { const darkGreenCreature = new DarkGreenCreature( this.body.position.x, this.body.position.y, this.body.position.z ); const index = creatures.indexOf(this); if (index > -1) { creatures.splice(index, 1, darkGreenCreature); scene.remove(this.mesh); world.removeBody(this.body); } } reproduce() { const offset = 3; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + 5; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; spawnBall(x, y, z); } reproduceCreature() { const offset = 3; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + 5; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; const newRedCreature = new RedCreature(x, y, z); creatures.push(newRedCreature); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class GreenBallCreature { constructor(x, y, z) { this.size = 2.7; this.type = 'green'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.lastEatTime = Date.now(); this.isDead = false; this.lifespan = 6000; // 6 seconds lifespan (increased by 2 seconds) } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x00FF00 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update(creatures) { if (this.isDead) return; if (Date.now() - this.lastEatTime > this.lifespan) { this.die(); return; } let nearestCreature = null; let nearestDistance = Infinity; for (const creature of creatures) { if (creature.type === 'yellow' || creature.type === 'red') { const distance = this.body.position.distanceTo(creature.body.position); if (distance < nearestDistance) { nearestCreature = creature; nearestDistance = distance; } } } if (nearestCreature) { const direction = new CANNON.Vec3().copy(nearestCreature.body.position).vsub(this.body.position); direction.normalize(); direction.scale(15, direction); // Faster than other creatures this.body.applyForce(direction, this.body.position); if (nearestDistance < this.size + nearestCreature.size) { this.eat(nearestCreature); } } this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } eat(creature) { const index = creatures.indexOf(creature); if (index > -1) { creatures.splice(index, 1); scene.remove(creature.mesh); world.removeBody(creature.body); } this.lastEatTime = Date.now(); if (Math.random() < 1 / 3) { // 1/3 chance (approximately 33.33%) to reproduce this.reproduce(); } // 10% chance to spawn a TreeCreature if (Math.random() < 0.10) { const mapSize = 400; const treeX = Math.random() * mapSize - mapSize / 2; const treeY = 0; // Place on the ground const treeZ = Math.random() * mapSize - mapSize / 2; const tree = new TreeCreature(treeX, treeY, treeZ); creatures.push(tree); } // 16% chance to spawn a Bush else if (Math.random() < 0.16 && (creature.type === 'yellow' || creature.type === 'red')) { const mapSize = 400; const bushX = Math.random() * mapSize - mapSize / 2; const bushY = 0; // Place on the ground const bushZ = Math.random() * mapSize - mapSize / 2; const bush = new Bush(bushX, bushY, bushZ); creatures.push(bush); } } reproduce() { const mapSize = 400; // Make sure this matches your terrain size const x = Math.random() * mapSize - mapSize / 2; const y = 10; // Spawn slightly above the ground const z = Math.random() * mapSize - mapSize / 2; const newGreenBall = new GreenBallCreature(x, y, z); creatures.push(newGreenBall); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class TreeCreature { constructor(x, y, z) { this.size = { width: 4, height: 8, depth: 4 }; this.type = 'tree'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.spawnTime = Date.now(); this.lastAppleSpawnTime = Date.now(); this.isDead = false; this.lifespan = 20000; // 20 seconds lifespan this.appleSpawnInterval = 2500; // 2.5 seconds between apple spawns } createMesh(x, y, z) { const geometry = new THREE.BoxGeometry(this.size.width, this.size.height, this.size.depth); const material = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); // Brown color const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y + this.size.height / 2, z); // Adjust y to place bottom on ground mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Box(new CANNON.Vec3(this.size.width / 2, this.size.height / 2, this.size.depth / 2)); const body = new CANNON.Body({ mass: 0, // Static body shape: shape, position: new CANNON.Vec3(x, y + this.size.height / 2, z), }); world.addBody(body); return body; } update() { if (this.isDead) return; // Check if the tree should die if (Date.now() - this.spawnTime > this.lifespan) { this.die(); return; } // Spawn apples if (Date.now() - this.lastAppleSpawnTime > this.appleSpawnInterval) { this.spawnApple(); this.lastAppleSpawnTime = Date.now(); } } spawnApple() { const offset = this.size.width / 2 + 1; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + this.size.height / 2; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; const apple = new Apple(x, y, z); creatures.push(apple); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class Apple { constructor(x, y, z) { this.size = 2; // Same size as yellow creatures this.type = 'apple'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.isDead = false; this.spawnTime = Date.now(); this.lifespan = 30000; // 30 seconds in milliseconds } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0xCD5C5C }); // Even lighter shade of red (Indian Red) const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update() { if (this.isDead) return; // Check if the apple should despawn if (Date.now() - this.spawnTime > this.lifespan) { this.die(); return; } this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class ElderTreeCreature { constructor(x, y, z) { this.size = { width: 6, height: 12, depth: 6 }; // Larger than regular trees this.type = 'elderTree'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.lastAppleSpawnTime = Date.now(); this.isDead = false; this.appleSpawnInterval = 2000; // 2 seconds between apple spawns (faster than regular trees) } createMesh(x, y, z) { const geometry = new THREE.BoxGeometry(this.size.width, this.size.height, this.size.depth); const material = new THREE.MeshStandardMaterial({ color: 0x4B3621 }); // Darker brown color const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y + this.size.height / 2, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Box(new CANNON.Vec3(this.size.width / 2, this.size.height / 2, this.size.depth / 2)); const body = new CANNON.Body({ mass: 0, // Static body shape: shape, position: new CANNON.Vec3(x, y + this.size.height / 2, z), }); world.addBody(body); return body; } update() { if (this.isDead) return; // Spawn apples if (Date.now() - this.lastAppleSpawnTime > this.appleSpawnInterval) { this.spawnApple(); this.lastAppleSpawnTime = Date.now(); } } spawnApple() { const offset = this.size.width / 2 + 1; const x = this.body.position.x + (Math.random() * 2 - 1) * offset; const y = this.body.position.y + this.size.height / 2; const z = this.body.position.z + (Math.random() * 2 - 1) * offset; const apple = new Apple(x, y, z); creatures.push(apple); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } /** * Function to spawn a new bouncy ball or creature */ function spawnBall(x, y, z) { // If no position is provided, generate random position if (x === undefined || y === undefined || z === undefined) { const mapSize = 400; // Increased from 200 to 400 const safeArea = 20; // Increased from 10 to 20 x = Math.random() * (mapSize - 2 * safeArea) - (mapSize / 2 - safeArea); y = randomBetween(10, 50); // Increased upper bound from 30 to 50 z = Math.random() * (mapSize - 2 * safeArea) - (mapSize / 2 - safeArea); } // Decide what to spawn const randomValue = Math.random(); const greenCreatureSpawnChance = 0.04; // 4% chance to spawn green creature if (randomValue < greenCreatureSpawnChance) { const greenCreature = new GreenBallCreature(x, y, z); creatures.push(greenCreature); } else if (randomValue < greenCreatureSpawnChance + redCreatureSpawnChance) { const redCreature = new RedCreature(x, y, z); creatures.push(redCreature); } else if (randomValue < greenCreatureSpawnChance + redCreatureSpawnChance + creatureSpawnChance) { const yellowCreature = new Creature(x, y, z, {}); creatures.push(yellowCreature); } else { // Remove oldest ball if we have reached maxBalls if (balls.length >= maxBalls) { const oldestBall = balls.shift(); scene.remove(oldestBall.mesh); world.removeBody(oldestBall.body); } // Set ball size (radius) const ballSize = randomBetween(1, 3); // Random ball size // Create a sphere geometry with the specified size const radius = ballSize; const widthSegments = 32; const heightSegments = 32; const ballGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments); // Create a material with a random color const randomColor = new THREE.Color(Math.random(), Math.random(), Math.random()); const ballMaterial = new THREE.MeshStandardMaterial({ color: randomColor }); const ballMesh = new THREE.Mesh(ballGeometry, ballMaterial); ballMesh.castShadow = true; ballMesh.receiveShadow = true; // Initialize `userData` before using it ballMesh.userData = {}; // Set initial position - spawn randomly around the map const mapSize = 400; // Increased from 200 to 400 const x = Math.random() * mapSize - mapSize / 2; // Random x position const y = randomBetween(10, 50); // Increased upper bound from 30 to 50 const z = Math.random() * mapSize - mapSize / 2; // Random z position ballMesh.position.set(x, y, z); scene.add(ballMesh); // Create physics body with the same size const ballShape = new CANNON.Sphere(radius); // Set light mass but keep dynamic behavior const mass = 1; // Adjusted mass for light but dynamic balls const ballBody = new CANNON.Body({ mass: mass, shape: ballShape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 // Add this line to set restitution directly on the body }); // Apply a small random initial velocity const velocity = new CANNON.Vec3( randomBetween(-5, 5), randomBetween(-2, 2), randomBetween(-5, 5) ); ballBody.velocity.copy(velocity); ballBody.type = CANNON.Body.DYNAMIC; // Reduce linear damping for more rolling effect ballBody.linearDamping = 0.01; ballBody.angularDamping = 0.01; // Initialize `userData` before using it ballBody.userData = {}; // Link mesh and physics body ballMesh.userData.physicsBody = ballBody; ballBody.userData.mesh = ballMesh; // Add ball body to the world world.addBody(ballBody); // Store the balls in an array balls.push({ mesh: ballMesh, body: ballBody }); } } function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { world.step(deltaTime); /** * Spawn balls every few seconds */ timeSinceLastBall += deltaTime; if (timeSinceLastBall >= ballSpawnInterval) { spawnBall(); timeSinceLastBall = 0; } // Update balls positions and reposition those that fall off for (let i = 0; i < balls.length; i++) { const ball = balls[i]; // Update mesh position and rotation ball.mesh.position.copy(ball.body.position); ball.mesh.quaternion.copy(ball.body.quaternion); // Check if the ball has fallen below a certain Y position if (ball.body.position.y < -10) { // Reposition the ball to the top of the scene const mapSize = 400; const x = Math.random() * mapSize - mapSize / 2; const y = randomBetween(50, 100); // Spawn higher to give more fall time const z = Math.random() * mapSize - mapSize / 2; ball.body.position.set(x, y, z); ball.body.velocity.set(0, 0, 0); // Reset velocity ball.body.angularVelocity.set(0, 0, 0); // Reset angular velocity } } // Update creatures and balls for (let i = creatures.length - 1; i >= 0; i--) { const creature = creatures[i]; if (creature.type === 'yellow') { creature.update(balls, creatures); } else if (creature.type === 'red') { creature.update(creatures); } else if (creature.type === 'striped') { creature.update(creatures); } else if (creature.type === 'green') { creature.update(creatures); } else if (creature.type === 'tree') { creature.update(); } else if (creature.type === 'elderTree') { creature.update(); } else if (creature.type === 'apple') { creature.update(); } else if (creature.type === 'bush') { creature.update(); } else if (creature.type === 'darkGreen') { creature.update(creatures); } else if (creature.type === 'parasiticApple') { creature.update(); } // Remove dead creatures if (creature.isDead) { creatures.splice(i, 1); } } controls.update(); // Update population bar updatePopulationBar(); } composer.render(); } // Function to update population counts function updatePopulationBar() { const yellowCount = creatures.filter(c => c.type === 'yellow').length; const redCount = creatures.filter(c => c.type === 'red').length; const greenCount = creatures.filter(c => c.type === 'green').length; const treeCount = creatures.filter(c => c.type === 'tree').length; const elderTreeCount = creatures.filter(c => c.type === 'elderTree').length; const bushCount = creatures.filter(c => c.type === 'bush').length; populationBar.innerHTML = ` Yellow Creatures: ${yellowCount}
Red Creatures: ${redCount}
Green Creatures: ${greenCount}
Tree Creatures: ${treeCount}
Elder Tree Creatures: ${elderTreeCount}
Bush Creatures: ${bushCount} `; // Update natural ball count const naturalBallCount = balls.length; naturalBallBar.innerHTML = `Natural Balls: ${naturalBallCount}`; // Add event listeners to spawn buttons document.getElementById('spawnYellow').addEventListener('click', () => spawnCreature('yellow')); document.getElementById('spawnRed').addEventListener('click', () => spawnCreature('red')); document.getElementById('spawnGreen').addEventListener('click', () => spawnCreature('green')); document.getElementById('spawnTree').addEventListener('click', () => spawnCreature('tree')); document.getElementById('spawnElderTree').addEventListener('click', () => spawnCreature('elderTree')); document.getElementById('spawnBush').addEventListener('click', () => spawnCreature('bush')); } // Add event listener for keydown events document.addEventListener('keydown', (event) => { switch (event.key) { case '1': spawnCreature('yellow'); break; case '2': spawnCreature('red'); break; case '3': spawnCreature('green'); break; case '4': spawnCreature('tree'); break; case '5': spawnCreature('elderTree'); break; case 'b': case 'B': spawnCreature('bush'); break; case 'p': case 'P': spawnCreature('darkGreen'); break; } }); function spawnCreature(type) { const mapSize = 400; const x = Math.random() * mapSize - mapSize / 2; const y = 10; // Spawn slightly above the ground const z = Math.random() * mapSize - mapSize / 2; let creature; switch (type) { case 'yellow': creature = new Creature(x, y, z, {}); break; case 'red': creature = new RedCreature(x, y, z); break; case 'green': creature = new GreenBallCreature(x, y, z); break; case 'tree': creature = new TreeCreature(x, 0, z); // Trees spawn on the ground break; case 'elderTree': creature = new ElderTreeCreature(x, 0, z); // Elder Trees spawn on the ground break; case 'bush': creature = new Bush(x, 0, z); // Bushes spawn on the ground break; case 'darkGreen': creature = new DarkGreenCreature(x, y, z); break; } creatures.push(creature); updatePopulationBar(); // Update the population bar immediately after spawning } class Bush { constructor(x, y, z) { this.size = { width: 8, height: 4, depth: 6 }; this.type = 'bush'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.isDead = false; this.spawnTime = Date.now(); this.lifespan = 60000; // 1 minute in milliseconds } createMesh(x, y, z) { const geometry = new THREE.BoxGeometry(this.size.width, this.size.height, this.size.depth); const material = new THREE.MeshStandardMaterial({ color: 0x006400 }); // Dark green color const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y + this.size.height / 2, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Box(new CANNON.Vec3(this.size.width / 2, this.size.height / 2, this.size.depth / 2)); const body = new CANNON.Body({ mass: 0, // Static body shape: shape, position: new CANNON.Vec3(x, y + this.size.height / 2, z), }); world.addBody(body); return body; } update() { if (this.isDead) return; // Check if the bush should die if (Date.now() - this.spawnTime > this.lifespan) { this.die(); } } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class DarkGreenCreature { constructor(x, y, z) { this.size = 2.5; this.type = 'darkGreen'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.isDead = false; this.spawnTime = Date.now(); this.lifespan = 5000; // 5 seconds in milliseconds } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x006400 }); // Dark green color const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update(creatures) { if (this.isDead) return; if (Date.now() - this.spawnTime > this.lifespan) { this.die(); return; } let nearestApple = null; let nearestDistance = Infinity; for (const creature of creatures) { if (creature.type === 'apple') { const distance = this.body.position.distanceTo(creature.body.position); if (distance < nearestDistance) { nearestApple = creature; nearestDistance = distance; } } } if (nearestApple) { const direction = new CANNON.Vec3().copy(nearestApple.body.position).vsub(this.body.position); direction.normalize(); direction.scale(15, direction); this.body.applyForce(direction, this.body.position); if (nearestDistance < this.size + nearestApple.size) { this.transformApple(nearestApple); } } this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } transformApple(apple) { const index = creatures.indexOf(apple); if (index > -1) { const parasiteApple = new ParasiticApple(apple.body.position.x, apple.body.position.y, apple.body.position.z); creatures.splice(index, 1, parasiteApple); scene.remove(apple.mesh); world.removeBody(apple.body); } this.die(); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } } class ParasiticApple { constructor(x, y, z) { this.size = 2; this.type = 'parasiticApple'; this.mesh = this.createMesh(x, y, z); this.body = this.createBody(x, y, z); this.isDead = false; this.spawnTime = Date.now(); this.lifespan = 30000; // 30 seconds in milliseconds } createMesh(x, y, z) { const geometry = new THREE.SphereGeometry(this.size, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x8B0000 }); // Darker red color const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); return mesh; } createBody(x, y, z) { const shape = new CANNON.Sphere(this.size); const body = new CANNON.Body({ mass: 1, shape: shape, material: ballPhysMaterial, position: new CANNON.Vec3(x, y, z), restitution: 0.3 }); body.linearDamping = 0.01; body.angularDamping = 0.01; world.addBody(body); return body; } update() { if (this.isDead) return; // Check if the parasitic apple should despawn if (Date.now() - this.spawnTime > this.lifespan) { this.die(); return; } this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } die() { this.isDead = true; scene.remove(this.mesh); world.removeBody(this.body); } eat() { // Spawn two DarkGreenCreatures const offset = 3; const positions = [{ x: this.body.position.x - offset, y: this.body.position.y, z: this.body.position.z }, { x: this.body.position.x + offset, y: this.body.position.y, z: this.body.position.z }]; for (const pos of positions) { const darkGreenCreature = new DarkGreenCreature(pos.x, pos.y, pos.z); creatures.push(darkGreenCreature); } this.die(); } } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate();