Inspiration-
This whole project started because we kept seeing scary ocean pollution facts everywhere, but none of it really felt real. It’s easy to read something like 8 million tons of plastic per year and just move on with your day. We wanted to make something that actually shows what pollution does something you can click, watch, and react to. That idea turned into our little simulator.
What it does -A little animated ocean world where users can see how pollution spreads and affects marine life. It turns a big environmental problem into something visual and interactive.
Fish swim around the ocean The canvas draws multiple fish that move across the screen. They bounce off the top and bottom and loop around the sides, so the ocean always feels alive.
Pollution falls into the water When the user clicks anywhere on the canvas, a new piece of pollution appears and slowly sinks toward the ocean floor. -Even though it’s a small simulation, it shows a real idea:Pollution spreads fast, and once it’s in the ocean, it’s hard to remove.
How we built it-
1.Set up the webpage — Home, Mission, and Simulator sections. 2.Styled everything with ocean colors so it felt friendly and clean. 3.Created the simulator using JavaScript and the element. 4.Added fish that swim around randomly. 5.Added pollution that falls when you click. 6.Connected it all together so the animation runs smoothly. 7.It wasn’t fancy at first, but it slowly came together.
Challenges we ran into-We definitely hit some bumps along the way.
A broken tag like Simulator messed up the whole page until we found it. When the was missing, the JavaScript crashed with "Cannot read properties of null" which took us a minute to understand. Getting the fish to move smoothly took some trial and error. Pollution originally filled the screen way too fast, so we had to adjust the speeds. Every problem taught us something new.
Log in or sign up for Devpost to join the conversation.