I remember seeing some buzz about water vapor venting from Jupiter's moon Europa, which is apparently a strong indicator for habitability. Europa is a really interesting moon. It has a rocky mantle with possible geothermal vents, surrounded by a massive amount of water, twice the volume of Earth's oceans. Europa is an ocean world.
I was looking for a new project and drew inspiration from Europa to rebuild my personal website with an underwater theme.
I really wanted to communicate the feeling of being under water. While the website loads I show a short animation of my name in bubbles. When the loading is done the bubbles pop.
The scene transitions to just below the surface of an ocean. The waves on the surface of the water came from a shader I found that emulated subsurface water distortion. The 3D scene was composited on top of the 2D scene to create a depth effect.
I used a particle swarm algorithm to animate a school of fish, and changed the intensity of their behavior based on mouse movements and user actions. There was an interesting case where if you resized the page to be smaller, the bounding box used in the solver forced the fish into a tinier area. To preserve the distribution I made the container a fixed size so some fish would travel off screen on mobile devices.
You could “go deeper” and see more content by clicking an action button that had an anchor and wheel attached. The wheel would spin, lowering the anchor into the ocean depths a little at a time. The wheel was affected by a Verlet physics engine so you could play around with it as if it had weight. I adjusted the engine settings so that objects behaved as if you were underwater.
The scene transitioned to the ocean floor. I wanted the scene to feel like you were exploring the bottom so I created procedural mountains with SVGs. The jellyfish moved using the same swarming algorithm as the fish, and their tentacles bobbed using the same Verlet physics engine as the anchor.
I added some particles to look like ocean floor debris with movement based on the Maxwell-Boltzmann Distribution function. This also had the same bounding box edge case of the fish, but decided to leave it because I enjoyed how it looked, even with denser particle matter.
This project wasn’t complicated and it didn't take long to build, but I really enjoyed how everything came together artistically. There is something fun in how every piece is designed, from navigation to content consumption.
I didn’t really have a design worked out on paper before I built it. I tried discovering the design organically by building one piece at a time and thinking about how I could best compliment it artistically with the next one.