Wave Dynamics

Interactive web app using authentic ocean data for realistic wave simulation, offering an immersive experience with wave behaviors, and providing an educational and immersive experience

Comment

Product Brief:

Wave Dynamics is a cutting-edge web application designed to simulate and visualize realistic ocean wave behaviors. Utilizing authentic real-world data, it offers a comprehensive platform for understanding, predicting, and experiencing oceanic waves in an immersive digital environment.

Inspiration

  1. Realistic Wave Simulation: High-fidelity representation of ocean waves based on actual data, providing an authentic experience for users.

  2. Interactive Controls: Intuitive controls enable users to manipulate wave parameters, such as height, speed, and frequency, allowing for a customizable simulation experience.

  3. Educational Tool: Ideal for students, researchers, and educators to comprehend wave dynamics, coastal processes, and marine ecosystems through a visually engaging platform.

  4. Predictive Capabilities: Aids in understanding and predicting wave behaviors, facilitating better decision-making for coastal planning, maritime operations, and climate change studies.

  5. Safety and Risk Assessment: Allows assessment of risks for maritime activities, coastal infrastructure, and natural disasters, aiding in preparedness and safety measures.

  6. Engineering and Innovation: Enables testing and development of new technologies and infrastructure for coastal regions and marine operations.

  7. Public Engagement: Promotes awareness and interest in ocean sciences, contributing to public engagement and understanding of marine-related issues.

Target Audience:

  • Researchers and oceanographers
  • Educational institutions (students and educators)
  • Environmental and coastal planners
  • Maritime and offshore industry professionals
  • Engineering and technology development sectors
  • General public interested in oceanic sciences and recreation

Tech Stack:

  • Front End - Web GL-based library - Three js, Vue js + vite, JavaScript and CPP
  • Back End - Node js, Express js
  • Tools - Google Cloud Platform, Github Repos

Road to development

Frontend:

Phase 1 - Plan the app and setup the codebase

  • Phase 1.1 - Vue + Vite Init codebase with vue-routing.

  • Phase 1.2 - Research on buoyancy and waves API availability.

  • Phase 1.3 - Research around how simulations can be rendered using WebGL.

Phase 2 - Implement the core functionality of the simulation

  • Phase 2.1 - Implement simulation page using ThreeJS.

  • Phase 2.2 - Add boxes with buoyancy simulation.

  • Phase 2.3 - Implement Classic Ocean Shader Example with Gerstner Waves

  • Phase 2.4 - Use The Gerstner wave function on boxes and simulate the movement.

  • Phase 2.5 - Further add two models(BOAT and BLUE WHALE) to showcase the relativity of the waves.

Phase 3 - Plan the landing and form page

  • Phase 3.1 - Implement the landing page with a minimalistic design.

  • Phase 3.2 - Form page implemented.

  • Phase 3.3 - Code cleanup and refactor.

Backend:

Roadmap to Development:

Phase 1 - Plan the app and setup the codebase

  • Phase 1.1 - Node Js + Express JS code initialization.

  • Phase 1.2 - Research on real-time Weather API.

  • Phase 1.3 - Research around how to perform calculations.

Phase 2 - Implement the core functionality of the simulation

  • Phase 2.1 - Implement APIs using node and express.

  • Phase 2.2 - Perform calculations based on research.

  • Phase 2.3 - Implementation of robust error handling.

  • Phase 2.4 - Create instances on Google Cloud and an SQL database on Google Cloud.

  • Phase 2.5 - Efficient usage of Google Cloud SQL storage by caching the response from API.

Phase 3 - Plan the landing and form page

  • Phase 3.1 - API testing with different metrics and inputs

  • Phase 3.2 - Code cleanup and refactor.

How does the app work?

  • Run the app on your local machine and start the server
  • Test the APIs using POSTMAN or any REST Client

How does the app work?

  • Get started by entering the lat and lng values of the region which you want to simulate.

  • With the help of API we retrieve all the important pinpoints that are needed for simulation.

  • And hence render the simulation for the same data.

Challenges we ran into

  • Integrating CPP code into JavaScript as ThreeJS needs shaders
  • Rendering ocean waves and simulating buoyancy for each wave across 3 vertices.

What's next for Wave Dynamics

  • Integration of AI for more accurate predictive modeling
  • User-generated content sharing and collaboration
  • Expansion into mobile platforms for accessibility
  • Collaborations with marine conservation and research organizations
  • Enhanced virtual reality experiences for more immersive simulations
+ 2 more
Share this project:

Updates