Ecosystem Simulation

Ecosystem Simulation

Statistics

Controls

Variables

import Ecosystem from './modules/Ecosystem.js'; import Renderer from './modules/Renderer.js'; import StatsDisplay from './modules/StatsDisplay.js'; import Controls from './modules/Controls.js'; const canvas = document.getElementById('ecosystemCanvas'); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 600; const populationStatsDisplay = document.getElementById('populationStats'); const environmentalStatsDisplay = document.getElementById('environmentalStats'); const resetButton = document.getElementById('resetButton'); const addHerbivoreButton = document.getElementById('addHerbivoreButton'); const addCarnivoreButton = document.getElementById('addCarnivoreButton'); const addPlantButton = document.getElementById('addPlantButton'); const naturalDisasterButton = document.getElementById('naturalDisasterButton'); const newSpeciesButton = document.getElementById('newSpeciesButton'); const geneticMutationButton = document.getElementById('geneticMutationButton'); const ecosystem = new Ecosystem(canvas.width, canvas.height); const renderer = new Renderer(ctx); const statsDisplay = new StatsDisplay(populationStatsDisplay, environmentalStatsDisplay); const controls = new Controls(ecosystem, renderer, statsDisplay, resetButton, addHerbivoreButton, addCarnivoreButton, addPlantButton, naturalDisasterButton, newSpeciesButton, geneticMutationButton); function gameLoop() { ecosystem.update(); renderer.render(ecosystem); statsDisplay.update(ecosystem); requestAnimationFrame(gameLoop); } gameLoop(); body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #e8f0f8; /* Light background */ } .container { display: flex; flex-direction: column; width: 95vw; max-width: 1400px; /* Wider container */ background-color: #fff; border-radius: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Stronger shadow */ padding: 25px; } h1 { text-align: center; color: #333; /* Darker heading text */ margin-bottom: 20px; } .simulation-area { display: flex; border-radius: 8px; overflow: hidden; /* Clip corners for canvas and UI */ } canvas { display: block; background-color: #d0e7f5; border: 1px solid #c0d6e4; /* Lighter border for canvas */ border-right: none; /* Remove border between canvas and UI */ flex: 2; /* Canvas takes more space */ } .ui-side-panel { flex: 1; display: flex; flex-direction: column; background-color: #f9f9f9; /* Light UI panel background */ padding: 20px; border-left: 1px solid #c0d6e4; /* Border to separate canvas and UI */ } #stats, #controls { padding: 15px; border-radius: 8px; background-color: #fff; /* White panels inside UI */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle panel shadow */ margin-bottom: 15px; } #stats:last-child, #controls:last-child { margin-bottom: 0; /* No margin for the last panel */ } #stats h2, #controls h2, #variableControls h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.1em; /* Slightly smaller headings */ color: #555; /* Grey headings */ } #populationStats, #environmentalStats { margin-bottom: 8px; font-size: 0.9em; color: #666; /* Dark grey text */ } #controls button, #variableControls button { padding: 8px 12px; margin: 5px 5px 5px 0; cursor: pointer; font-size: 0.85em; background-color: #e0f7fa; /* Light blue button background */ color: #333; border: 1px solid #b2ebf2; /* Button border */ border-radius: 5px; transition: background-color 0.3s ease; } #controls button:hover, #variableControls button:hover { background-color: #b2ebf2; /* Darker blue on hover */ } #variableControls { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd; /* Light separator */ } #variableControls h3 { font-size: 1em; margin-bottom: 8px; color: #555; } import Plant from './Plant.js'; import Herbivore from './Herbivore.js'; import Carnivore from './Carnivore.js'; import Weather from './Weather.js'; class Ecosystem { constructor(width, height) { this.width = width; this.height = height; this.entities = []; this.plants = []; this.herbivores = []; this.carnivores = []; this.weather = new Weather(); this.time = 0; this.plantSpawnRate = 0.01; this.initialPlantCount = 200; this.initialHerbivoreCount = 50; this.initialCarnivoreCount = 10; this.initializeEcosystem(); } initializeEcosystem() { for (let i = 0; i < this.initialPlantCount; i++) { this.addPlant(); } for (let i = 0; i < this.initialHerbivoreCount; i++) { this.addHerbivore(); } for (let i = 0; i < this.initialCarnivoreCount; i++) { this.addCarnivore(); } } reset() { this.entities = []; this.plants = []; this.herbivores = []; this.carnivores = []; this.time = 0; this.initializeEcosystem(); } addPlant(x, y) { const plant = new Plant( x || Math.random() * this.width, y || Math.random() * this.height ); this.plants.push(plant); this.entities.push(plant); } addHerbivore(x, y) { const herbivore = new Herbivore( x || Math.random() * this.width, y || Math.random() * this.height, this ); this.herbivores.push(herbivore); this.entities.push(herbivore); } addCarnivore(x, y) { const carnivore = new Carnivore( x || Math.random() * this.width, y || Math.random() * this.height, this ); this.carnivores.push(carnivore); this.entities.push(carnivore); } update() { this.time++; this.weather.update(this.time); this.updatePlants(); this.updateHerbivores(); this.updateCarnivores(); } updatePlants() { if (Math.random() < this.plantSpawnRate) { this.addPlant(); } this.plants.forEach((plant, index) => { plant.update(this.weather); if (!plant.isAlive()) { this.plants.splice(index, 1); this.entities.splice(this.entities.indexOf(plant), 1); } }); } updateHerbivores() { this.herbivores.forEach((herbivore, index) => { herbivore.update(this); if (!herbivore.isAlive()) { this.herbivores.splice(index, 1); this.entities.splice(this.entities.indexOf(herbivore), 1); } }); } updateCarnivores() { this.carnivores.forEach((carnivore, index) => { carnivore.update(this); if (!carnivore.isAlive()) { this.carnivores.splice(index, 1); this.entities.splice(this.entities.indexOf(carnivore), 1); } }); } getPopulationStats() { return { plants: this.plants.length, herbivores: this.herbivores.length, carnivores: this.carnivores.length, }; } getEnvironmentalStats() { return { weather: this.weather.currentWeather, time: this.time, }; } introduceNaturalDisaster() { this.plants.forEach((plant) => { if (Math.random() < 0.5) { plant.health -= 50; // Example impact } }); this.herbivores.forEach((herbivore) => { if (Math.random() < 0.3) { herbivore.health -= 30; // Example impact } }); this.carnivores.forEach((carnivore) => { if (Math.random() < 0.2) { carnivore.health -= 20; // Example impact } }); } introduceNewSpecies(speciesType) { if (speciesType === 'herbivore') { this.addHerbivore(); } else if (speciesType === 'carnivore') { this.addCarnivore(); } else if (speciesType === 'plant') { this.addPlant(); } } introduceGeneticMutation() { if (this.herbivores.length > 0) { const randomHerbivore = this.herbivores[Math.floor(Math.random() * this.herbivores.length)]; randomHerbivore.mutate(); // Example mutation function } else if (this.carnivores.length > 0) { const randomCarnivore = this.carnivores[Math.floor(Math.random() * this.carnivores.length)]; randomCarnivore.mutate(); // Example mutation function } } } export default Ecosystem; class Renderer { constructor(ctx) { this.ctx = ctx; } render(ecosystem) { this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); this.renderPlants(ecosystem.plants); this.renderHerbivores(ecosystem.herbivores); this.renderCarnivores(ecosystem.carnivores); } renderPlants(plants) { plants.forEach(plant => { this.drawCircle(plant.x, plant.y, plant.size, 'green'); }); } renderHerbivores(herbivores) { herbivores.forEach(herbivore => { this.drawCircle(herbivore.x, herbivore.y, herbivore.size, 'blue'); if (herbivore.isEating) { this.drawEatingIndicator(herbivore); } }); } renderCarnivores(carnivores) { carnivores.forEach(carnivore => { this.drawTriangle(carnivore.x, carnivore.y, carnivore.size, 'red', carnivore.rotation); if (carnivore.isHunting) { this.drawHuntingIndicator(carnivore); } }); } drawCircle(x, y, radius, color) { this.ctx.beginPath(); this.ctx.arc(x, y, radius, 0, Math.PI * 2); this.ctx.fillStyle = color; this.ctx.fill(); } drawTriangle(x, y, size, color, rotation) { this.ctx.beginPath(); const points = [ [0, -size], [size, size], [-size, size] ]; this.ctx.translate(x, y); this.ctx.rotate(rotation); this.ctx.moveTo(points[0][0], points[0][1]); for (let i = 1; i < points.length; i++) { this.ctx.lineTo(points[i][0], points[i][1]); } this.ctx.closePath(); this.ctx.fillStyle = color; this.ctx.fill(); this.ctx.rotate(-rotation); this.ctx.translate(-x, -y); } drawEatingIndicator(herbivore) { this.ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; this.ctx.fillRect(herbivore.x - herbivore.size, herbivore.y - herbivore.size - 5, herbivore.size * 2, 3); } drawHuntingIndicator(carnivore) { this.ctx.strokeStyle = 'rgba(255, 0, 0, 0.8)'; this.ctx.lineWidth = 2; this.ctx.beginPath(); const indicatorSize = carnivore.size * 2; this.ctx.arc(carnivore.x, carnivore.y, indicatorSize, 0, Math.PI * 2); this.ctx.stroke(); } } export default Renderer; class StatsDisplay { constructor(populationStatsElement, environmentalStatsElement) { this.populationStatsElement = populationStatsElement; this.environmentalStatsElement = environmentalStatsElement; } update(ecosystem) { this.updatePopulationStats(ecosystem.getPopulationStats()); this.updateEnvironmentalStats(ecosystem.getEnvironmentalStats()); } updatePopulationStats(stats) { this.populationStatsElement.innerHTML = `

Plants: ${stats.plants}

Herbivores: ${stats.herbivores}

Carnivores: ${stats.carnivores}

`; } updateEnvironmentalStats(stats) { this.environmentalStatsElement.innerHTML = `

Weather: ${stats.weather}

Time: ${stats.time}

`; } } export default StatsDisplay; class Controls { constructor(ecosystem, renderer, statsDisplay, resetButton, addHerbivoreButton, addCarnivoreButton, addPlantButton, naturalDisasterButton, newSpeciesButton, geneticMutationButton) { this.ecosystem = ecosystem; this.renderer = renderer; this.statsDisplay = statsDisplay; this.resetButton = resetButton; this.addHerbivoreButton = addHerbivoreButton; this.addCarnivoreButton = addCarnivoreButton; this.addPlantButton = addPlantButton; this.naturalDisasterButton = naturalDisasterButton; this.newSpeciesButton = newSpeciesButton; this.geneticMutationButton = geneticMutationButton; this.setupEventListeners(); } setupEventListeners() { this.resetButton.addEventListener('click', () => { this.ecosystem.reset(); }); this.addHerbivoreButton.addEventListener('click', () => { this.ecosystem.addHerbivore(); }); this.addCarnivoreButton.addEventListener('click', () => { this.ecosystem.addCarnivore(); }); this.addPlantButton.addEventListener('click', () => { this.ecosystem.addPlant(); }); this.naturalDisasterButton.addEventListener('click', () => { this.ecosystem.introduceNaturalDisaster(); }); this.newSpeciesButton.addEventListener('click', () => { const speciesType = prompt("Enter new species type (herbivore, carnivore, plant):"); if (speciesType) { this.ecosystem.introduceNewSpecies(speciesType.toLowerCase()); } }); this.geneticMutationButton.addEventListener('click', () => { this.ecosystem.introduceGeneticMutation(); }); } } export default Controls; import Plant from './Plant.js'; import Herbivore from './Herbivore.js'; import Carnivore from './Carnivore.js'; import Weather from './Weather.js'; class Plant { constructor(x, y) { this.x = x; this.y = y; this.size = 5; this.health = 100; this.maxHealth = 100; this.growthRate = 0.1; this.maxSize = 7; } update(weather) { this.grow(weather); this.checkHealth(); } grow(weather) { let growthFactor = this.growthRate; if (weather.currentWeather === 'Sunny') { growthFactor *= 1.2; } else if (weather.currentWeather === 'Rainy') { growthFactor *= 0.8; } this.health = Math.min(this.maxHealth, this.health + growthFactor); this.size = Math.min(this.maxSize, this.size + growthFactor * 0.1); // Size grows slower } checkHealth() { if (this.health <= 0) { this.health = 0; } } isAlive() { return this.health > 0; } } export default Plant; import { distance, getRandomDirection } from './utils.js'; class Herbivore { constructor(x, y, ecosystem) { this.x = x; this.y = y; this.size = 8; this.speed = 1; this.health = 100; this.maxHealth = 100; this.energy = 100; this.maxEnergy = 100; this.hungerThreshold = 50; this.eatingRadius = 10; this.viewRadius = 100; this.ecosystem = ecosystem; this.isEating = false; this.direction = getRandomDirection(); this.mutationRate = 0.05; this.metabolismRate = 0.1; // Energy consumption per update this.reproductionThreshold = 150; // Energy needed to reproduce this.reproductionRate = 0.005; // Chance to reproduce per update when above threshold this.maxSpeed = 1.5; this.minSpeed = 0.5; } update() { this.energy -= this.metabolismRate; if (this.energy <= 0) { this.health -= 1; // Lose health if energy is depleted if (this.health < 0) this.health = 0; // Prevent negative health } else if (this.energy < this.hungerThreshold) { this.eat(); if (!this.isEating) { this.moveTowardsFood(); } } else { this.wander(); if (this.energy > this.reproductionThreshold && Math.random() < this.reproductionRate) { this.reproduce(); } } this.checkHealth(); } eat() { this.isEating = false; const nearbyPlants = this.ecosystem.plants.filter(plant => distance(this.x, this.y, plant.x, plant.y) < this.eatingRadius && plant.isAlive()); if (nearbyPlants.length > 0) { this.isEating = true; const plantToEat = nearbyPlants[0]; // Eat the first available plant plantToEat.health -= 20; // Reduce plant health when eaten this.energy = Math.min(this.maxEnergy, this.energy + 50); // Gain energy from eating } } moveTowardsFood() { const closestPlant = this.findClosestPlant(); if (closestPlant) { const angle = Math.atan2(closestPlant.y - this.y, closestPlant.x - this.x); this.direction = angle; this.x += Math.cos(angle) * this.speed; this.y += Math.sin(angle) * this.speed; } else { this.wander(); // Wander if no plants are found } this.constrainPosition(); } findClosestPlant() { let closestPlant = null; let minDistance = Infinity; for (const plant of this.ecosystem.plants) { if (plant.isAlive()) { const dist = distance(this.x, this.y, plant.x, plant.y); if (dist < minDistance && dist < this.viewRadius) { minDistance = dist; closestPlant = plant; } } } return closestPlant; } wander() { if (Math.random() < 0.01) { this.direction = getRandomDirection(); // Change direction occasionally } this.x += Math.cos(this.direction) * this.speed; this.y += Math.sin(this.direction) * this.speed; this.constrainPosition(); } constrainPosition() { if (this.x < 0) this.x = 0; if (this.x > this.ecosystem.width) this.x = this.ecosystem.width; if (this.y < 0) this.y = 0; if (this.y > this.ecosystem.height) this.y = this.ecosystem.height; } checkHealth() { if (this.health <= 0) { this.health = 0; } } isAlive() { return this.health > 0; } reproduce() { if (this.energy >= this.reproductionThreshold) { this.energy /= 2; // Cost of reproduction const child = new Herbivore(this.x + Math.random() * 20 - 10, this.y + Math.random() * 20 - 10, this.ecosystem); this.ecosystem.herbivores.push(child); this.ecosystem.entities.push(child); this.mutate(child); // Apply potential mutation to child } } mutate(child) { if (Math.random() < this.mutationRate) { child.speed = Math.max(this.minSpeed, Math.min(this.maxSpeed, child.speed + (Math.random() - 0.5))); // Mutate speed slightly child.size = Math.max(5, Math.min(12, child.size + (Math.random() - 0.5))); // Mutate size slightly console.log("Mutation occurred in herbivore: Speed=", child.speed.toFixed(2), "Size=", child.size.toFixed(2)); } } } export default Herbivore; import { distance, getRandomDirection } from './utils.js'; class Carnivore { constructor(x, y, ecosystem) { this.x = x; this.y = y; this.size = 10; this.speed = 1.2; this.health = 100; this.maxHealth = 100; this.energy = 100; this.maxEnergy = 100; this.hungerThreshold = 50; this.huntingRadius = 15; this.viewRadius = 150; this.ecosystem = ecosystem; this.isHunting = false; this.targetHerbivore = null; this.direction = getRandomDirection(); this.rotation = 0; this.mutationRate = 0.05; this.metabolismRate = 0.2; // Higher metabolism than herbivores this.attackDamage = 10; this.reproductionThreshold = 200; this.reproductionRate = 0.003; this.maxSpeed = 1.8; this.minSpeed = 0.6; } update() { this.energy -= this.metabolismRate; if (this.energy <= 0) { this.health -= 1.5; // Lose health faster than herbivores when energy is depleted if (this.health < 0) this.health = 0; } else if (this.energy < this.hungerThreshold) { this.hunt(); if (!this.isHunting) { this.moveToPrey(); } } else { this.wander(); if (this.energy > this.reproductionThreshold && Math.random() < this.reproductionRate) { this.reproduce(); } } this.checkHealth(); this.rotation = this.direction; // Update rotation to direction } hunt() { this.isHunting = false; if (this.targetHerbivore) { if (!this.targetHerbivore.isAlive() || distance(this.x, this.y, this.targetHerbivore.x, this.targetHerbivore.y) > this.huntingRadius * 2) { this.targetHerbivore = null; // Reset target if it's dead or too far } } if (!this.targetHerbivore) { this.findPrey(); } if (this.targetHerbivore) { if (distance(this.x, this.y, this.targetHerbivore.x, this.targetHerbivore.y) < this.huntingRadius) { this.isHunting = true; this.attack(); } else { this.isHunting = false; // Not in hunting range anymore } } } findPrey() { let closestPrey = null; let minDistance = Infinity; for (const herbivore of this.ecosystem.herbivores) { if (herbivore.isAlive()) { const dist = distance(this.x, this.y, herbivore.x, herbivore.y); if (dist < minDistance && dist < this.viewRadius) { minDistance = dist; closestPrey = herbivore; } } } this.targetHerbivore = closestPrey; } moveToPrey() { if (this.targetHerbivore) { const angle = Math.atan2(this.targetHerbivore.y - this.y, this.targetHerbivore.x - this.x); this.direction = angle; this.x += Math.cos(angle) * this.speed; this.y += Math.sin(angle) * this.speed; } else { this.wander(); // Wander if no prey is targeted } this.constrainPosition(); } attack() { if (this.targetHerbivore && this.targetHerbivore.isAlive()) { this.targetHerbivore.health -= this.attackDamage; this.energy = Math.min(this.maxEnergy, this.energy + 70); // Gain more energy from carnivore meat } } wander() { if (Math.random() < 0.01) { this.direction = getRandomDirection(); } this.x += Math.cos(this.direction) * this.speed; this.y += Math.sin(this.direction) * this.speed; this.constrainPosition(); } constrainPosition() { if (this.x < 0) this.x = 0; if (this.x > this.ecosystem.width) this.x = this.ecosystem.width; if (this.y < 0) this.y = 0; if (this.y > this.ecosystem.height) this.y = this.ecosystem.height; } checkHealth() { if (this.health <= 0) { this.health = 0; } } isAlive() { return this.health > 0; } reproduce() { if (this.energy >= this.reproductionThreshold) { this.energy /= 2; // Cost of reproduction const child = new Carnivore(this.x + Math.random() * 20 - 10, this.y + Math.random() * 20 - 10, this.ecosystem); this.ecosystem.carnivores.push(child); this.ecosystem.entities.push(child); this.mutate(child); // Potential mutation } } mutate(child) { if (Math.random() < this.mutationRate) { child.speed = Math.max(this.minSpeed, Math.min(this.maxSpeed, child.speed + (Math.random() - 0.5))); // Mutate speed child.size = Math.max(7, Math.min(15, child.size + (Math.random() - 0.5))); // Mutate size child.attackDamage += (Math.random() - 0.5) * 2; // Mutate attackDamage child.attackDamage = Math.max(5, child.attackDamage); // Ensure attackDamage is not too low console.log("Mutation occurred in carnivore: Speed=", child.speed.toFixed(2), "Size=", child.size.toFixed(2), "Attack=", child.attackDamage.toFixed(2)); } } } export default Carnivore; class Weather { constructor() { this.weatherPatterns = ['Sunny', 'Rainy', 'Cloudy']; this.currentWeather = this.getRandomWeather(); this.weatherDuration = 300; // Weather lasts for 300 updates (adjust as needed) this.weatherTimer = 0; } update(time) { if (time % this.weatherDuration === 0) { this.currentWeather = this.getRandomWeather(); this.weatherTimer = 0; } else { this.weatherTimer++; } } getRandomWeather() { return this.weatherPatterns[Math.floor(Math.random() * this.weatherPatterns.length)]; } } export default Weather; export function distance(x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; return Math.sqrt(dx * dx + dy * dy); } export function getRandomDirection() { return Math.random() * Math.PI * 2; }