Weekend Challenge: Earth Day Edition

This is a submission for Weekend Challenge: Earth Day Edition
What I Built
For this Earth Day–themed challenge, I set out to build a small but meaningful project that highlights how technology can help us better understand our planet. My goal was to create something simple, accessible, and visually engaging—something that encourages curiosity about the natural world rather than overwhelming users with data.

The result is an interactive Klein Bottle–inspired 3D visualization, rendered in the browser using HTML, CSS, and JavaScript. While a Klein Bottle is a mathematical object rather than an ecological one, its structure—continuous, boundary‑less, looping back into itself—felt like a poetic metaphor for Earth’s ecosystems. Everything on our planet is interconnected. Every action loops back. Every system touches another.

The visualization is designed to be lightweight and educational. Users can rotate, zoom, and explore the shape, while the interface overlays short Earth‑Day‑themed facts about sustainability, biodiversity, and climate systems. The intention is to pair mathematical beauty with environmental awareness, showing that even abstract concepts can inspire reflection about the real world.

At its core, the project is about interconnection—between math and nature, between humans and the environment, and between curiosity and responsibility.

Demo
You can explore the live demo here:

🔗 Live Demo: [Insert your deployed link or CodePen URL]

The demo loads instantly in the browser and requires no installation. It includes:

A fully interactive 3D Klein Bottle

Smooth rotation and zoom controls

Ambient color transitions inspired by natural biomes

Floating Earth‑Day facts that fade in and out as the model moves

A minimal UI designed to keep the focus on exploration

If you prefer a quick preview, here’s a short walkthrough video:

🎥 Video Demo: [Insert link to your video demo]

Code
The full source code is available on GitHub:

📦 GitHub Repository: [Insert your GitHub repo link]

The project is intentionally simple and easy to fork. It uses:

HTML5 Canvas for rendering

Vanilla JavaScript for animation and interaction

CSS variables for dynamic color themes

A lightweight parametric function to generate the Klein Bottle geometry

Here’s a small excerpt from the rendering logic:

js
function kleinBottle(u, v) {
u *= Math.PI * 2;
v *= Math.PI * 2;

let x, y, z;
if (u < Math.PI) {
x = 3 * Math.cos(u) * (1 + Math.sin(u)) +
(2 * (1 - Math.cos(u) / 2)) * Math.cos(u) * Math.cos(v);
z = -8 * Math.sin(u) -
(2 * (1 - Math.cos(u) / 2)) * Math.sin(u) * Math.cos(v);
} else {
x = 3 * Math.cos(u) * (1 + Math.sin(u)) +
(2 * (1 - Math.cos(u) / 2)) * Math.cos(v + Math.PI);
z = -8 * Math.sin(u);
}
y = -2 * (1 - Math.cos(u) / 2) * Math.sin(v);

return { x, y, z };
}
The rest of the repository includes:

A modular animation loop

A simple camera system

A fact‑rotation engine that cycles through environmental messages

A responsive layout that works on both desktop and mobile

Final Thoughts
Earth Day is a reminder that even small acts of creativity can spark awareness. This project doesn’t attempt to model climate data or simulate ecosystems. Instead, it uses mathematical art to encourage reflection on the interconnectedness of our world.

If someone walks away thinking, “That’s beautiful—and so is the planet we’re trying to protect,” then the project has done its job.

If you’d like to build on it, remix it, or adapt it for your own Earth Day ideas, feel free to fork the repo. I’d love to see what others create.