Disclaimer: For better experience use Desktop, in Google Chrome, as we did not provide responsive support for mobile devices.

Introduction

We are a group of undergraduate students in Computer Engineering and Computer Science with distinct abilities such as Machine Learning, competitive programming, and game development that decided to create a creative educational website, as a chance to learn new things and put to the best use of our programming skills! Our aim in this project was to create a unique experience for the user, teaching by creating storytelling in an engaging way and using various resources such as games, 3D models, images and graphics.

You are presented with the opportunity to do the whole journey, or a reduced one, which will skip most of the text.

Greetings from Earth!

Our journey starts with a transmission from Earth that will guide us in a story about our oceans. In this sense, the user is placed in the role of a alien making contact with humanity.

We chose the destinatary as an hypotetical civilization living in the TRAPPIST-1's planetary system, as this is one of the most promissing places for finding alien life - as it has many Earth-like planets in the star's habitable zone.

The idea of the project is to have a website that represents a linear journey that will teach the user various concepts, showing their correlation and their importance for life. One of our main concerns was to create animated and interactive pages, leveraging our programming knowledge to make the user experience more engaging and enjoyable.

The journey starts by introducing our planet Earth, and the exciting beauty of our oceans.

Then we talk about oxygen, a primal chemical element for life on earth, and how the phytoplanktons play a key role in oxygen generation. In most of the text screens the background contains images of the beautiful ocean gardens. All of those images were taken by NASA satellites, and we got them from the Ocean Color Gallery.

Interactive 3D graphics on Chlorophyll Concentration, Water Temperature and Photosynthetically Available Radiation

To enhance user engagement and comprehension, interactive 3D graphics are introduced. These graphics enable users to explore data related to chlorophyll concentration, water temperature, and photosynthetically available radiation, fostering an understanding of the intricate relationships among these variables. The data utilized for these visualizations is sourced from the NASA Moderate Resolution Imaging Spectroradiometer (MODIS).

Phytoplankton varieties, importance and impact

There are various types of phytoplankton, in different shapes and sizes. To explain more about that, we first introduce them, with a series of microscope pictures and comparisons for the viewer to understand their small scale. We talk about their impact on earth's oxygen production and carbon fixation and conclude with a reflection about how earth would be without them.

We continue this section with a series of slides, with the background of more satellite pictures from our ocean gardens, in which we talk about how the world would be without Phytoplankton. We conclude that they are crucial for life as it is, and therefore they need to be preserved.

Ocean Preservation

In the concluding chapter of our tale, we shed light on the immense significance of preserving our oceans and how we can play a part in their protection. We address major concerns like global warming, the pervasive problem of plastic pollution in our oceans, and the harmful activities of mining and fishing that disrupt marine ecosystems.

Moreover, we offer actionable suggestions for viewers. These include opting for cleaner energy sources, becoming a recycling enthusiast, and actively spreading awareness. By collaborating collectively, we have the power to effect substantial change and ensure the flourishing of our oceans for generations to come.

Quiz Game

Finally, there is a Quiz Game with all the art and features made exclusively by our team. In this game, you need to answer the questions correctly so the ocean gardener moves upwards and gets to the surface. If you answer incorrectly, the gardener goes down. All the questions were made with the concepts taught throughout this journey, so the user can fixate what he learned.

Conclusion and Future

This project aspires to serve as an engaging and informative platform, fostering a deeper understanding of the oceans' significance and the critical role played by phytoplankton in maintaining the balance of our planet's ecosystems. Furthermore, it seeks to raise awareness of the actions associated with ocean preservation, inspiring proactive individual and collective efforts toward the safeguarding of our oceans and, by extension, the preservation of life as we know it on Earth.

Our project is also very scalable. Experiences that bring together art, design and education in an entertaining way is something that the entire group is passionate about and can easily be used to promote knowledge and science through the entire world.

For the next steps, we would like to provide support to mobile devices by making the project more responsive. We decided not to do this in the current project and instead focused on the desktop version due to time constraints. However, we recognize the importance of such a feature.

Technologies

We used React.js, HTML, CSS to build interactive and creative web pages. We also used some available open-source libraries such as globe.gl (which uses ThreeJS), react-material-ui, react-howler. We also used python Plotly for interactive graphics.

We created the game with Unity and exported it as a WebGL project, then used React Unity WebGL to embed the project with our React Application. We used LibreSprite for the game art and animations.

Extra features

Throughout the whole experience, we added several interactive features, such as animations when passing through pages, a ripple effect in the main screen, a carousel of microscope images, an animation on the decoding of the alien message, sound effects and more!

Source code: https://github.com/OceanGardens/oceangardens.github.io

Space Apps 2023

Greetings from Earth!!