This is a submission for Weekend Challenge: Earth Day Edition 🌍

What I Built

I built the Earth Condition Simulator — an interactive, browser-based climate model that puts the fate of our planet directly in your hands.

You control six critical environmental parameters — Temperature, Sea Level, Forest Cover, Pollution, Ice Caps, and Clean Energy — and watch Earth respond in real time. The globe visually reacts to every change: ice caps melt, toxic smog rolls in, forests burn, and oceans turn murky. Make things good enough and the planet thrives; push things too far and you're staring at near-extinction.

The core idea was to make climate data feel visceral rather than abstract. Instead of graphs and tables, you get a living, breathing globe that screams back at you when things go wrong.

Demo

🔗 Live Demo → rohan-shridhar.github.io/earth

Features at a Glance

• 
  🌍 Animated SVG Globe — Custom-built with organic Bezier-path continents, real-time ocean color shifting, smog overlays, fire particles, cloud layers, and polar ice caps — all reacting live to your slider input


• 
  6 Environmental Sliders — Temperature (−2°C to +10°C), Sea Level, Forest Cover, Pollution, Ice Caps, and Clean Energy


• 
  Earth Health Score — A unified 0–1000 vitality meter with reactive color-coded status labels (from Thriving Paradise to Near Extinction)


• 
  Real-time Population Ticker — A frame-by-frame world population counter (8.2B baseline) that ticks up or down based on current planetary health


• 
  Event Feed — Contextual alerts that surface climate events based on your settings ("Coral reefs fully bleached worldwide", "Low-lying island nations submerged", etc.)


• 
  10-Year Simulation Engine — A projection model that calculates year-by-year population impact based on all six variables combined, with animated reveal and a color-coded survival verdict


• 
  Zero Dependencies — Pure Vanilla HTML5, CSS3, and JS. No frameworks, no libraries, no build step.

How I Built It

This was built using Antigravity — a vibe coding tool powered by Google Gemini 2.0 Pro — with a deliberate "Single File → Split Architecture" workflow. I started with a single monolithic prototype to get the logic right, then refactored into index.html / style.css / script.js for maintainability.

The Globe Rendering Pipeline

The globe is a pure SVG with layered groups for ocean, land, clouds, ice caps, smog, and fire. Each frame (via requestAnimationFrame), the renderer:

1. Recomputes ocean color based on temperature + pollution (deep blue → murky brown)


2. Shifts the atmosphere stroke hue reactively


3. Translates continent and cloud positions to simulate rotation


4. Calculates biome visibility (forest → desert → jungle) based on sliders


5. Renders fire particle ellipses when temp > 5 and forest < 55%
   

The Simulation Math

The 10-year engine runs a loop calculating annual population growth starting from 8.2B, applying weighted penalties per variable:

let growth = 80; // Base +80M/yr

growth -= (temp / 10) * 200;

growth -= (poll / 100) * 150;

growth -= (1 - forest / 100) * 100;

growth -= (sea / 10) * 80;

growth -= (1 - energy / 100) * 60;

growth -= (1 - ice / 100) * 40;

Getting the weights to feel scientifically plausible and emotionally impactful — without being either too forgiving or instantly catastrophic — took the most tuning.

The UI

Orbitron + Space Mono for that command-center sci-fi feel. Glassmorphism-lite with a deep space background, CSS starfield, and reactive glow shadows on the globe (drop-shadow that intensifies as Earth Health drops). All slider tracks fill with the current condition color dynamically via inline background updates.

Challenges

SVG Realism — Making the globe look like an actual planet using only paths, gradients, and ellipses was harder than expected. Organic-looking continents required a lot of manual Bezier tuning. The rotation effect is a fake — two copies of the continent group translate infinitely and wrap around — but it sells the illusion.

Balancing the Math — The simulation needed to feel consequential. Too lenient and players don't feel the stakes; too brutal and it's demoralizing. The current formula was iterated ~8 times.

Single-File Performance — Keeping everything smooth at 60fps without any external state management or virtual DOM meant being careful about what gets recomputed each frame vs. what's event-driven.

Prize Categories

🏆 Best Use of Google Gemini — Built using Antigravity, which is powered by Google Gemini 2.0 Pro as its underlying model for code generation and iteration.