https://github.com/edisedis777/nautilus-chart

Nautilus Navigation Chart: A nautical-themed interactive web application featuring ocean depth chart, vessel log page, and a clickable compass
https://github.com/edisedis777/nautilus-chart

chart jules-verne map nautilus navigation procedural-generation

Last synced: 3 months ago
JSON representation

Nautilus Navigation Chart: A nautical-themed interactive web application featuring ocean depth chart, vessel log page, and a clickable compass

• Host: GitHub
• URL: https://github.com/edisedis777/nautilus-chart
• Owner: edisedis777
• License: agpl-3.0
• Created: 2025-02-26T08:33:51.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-05-02T06:17:29.000Z (5 months ago)
• Last Synced: 2025-05-02T07:26:36.259Z (5 months ago)
• Topics: chart, jules-verne, map, nautilus, navigation, procedural-generation
• Language: HTML
• Homepage: https://edisedis777.github.io/Nautilus-Chart/
• Size: 209 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Nautilus Navigation Chart

[![Visual Studio Code](https://custom-icon-badges.demolab.com/badge/Visual%20Studio%20Code-0078d7.svg?logo=vsc&logoColor=white)](#)

[![HTML](https://img.shields.io/badge/HTML-%23E34F26.svg?logo=html5&logoColor=white)](#)

[![CSS](https://img.shields.io/badge/CSS-1572B6?logo=css3&logoColor=fff)](#)

[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000)](#)

![p5js](https://img.shields.io/badge/p5.js-ED225D?style=for-the-badge&logo=p5.js&logoColor=FFFFFF)

![Chroma.js](https://img.shields.io/badge/Chroma.js-Color%20Manipulation-F92A82?logo=javascript&logoColor=white)

[![Markdown](https://img.shields.io/badge/Markdown-%23000000.svg?logo=markdown&logoColor=white)](#)



## Demo

Try it live: [Here](https://edisedis777.github.io/Nautilus-Chart/)

## Description

A nautical-themed interactive web application featuring:

* ocean depth chart

* vessel log page

* clickable compass.

## Features

* Interactive Compass: Click to randomly rotate the compass needle, centered perfectly within its rose.

* Depth Map: Visualizes underwater terrain with depth markings in fathoms, styled like an aged nautical chart.

* Responsive Design: Adapts seamlessly to different screen sizes with a mobile-friendly layout.

## Technologies

* HTML/CSS/JavaScript: Core structure.

* p5.js: Canvas rendering for the depth map.

* Chroma.js: Smooth color transitions in the terrain.

## Usage

* Click the compass to see it spin to a random direction.

* Refresh the page to load a randomly generated map. 

* Click on the **View Vessel Log** to see a Nautilus Log entry. 

## Credits

* Twenty Thousand Leagues under the Sea by Jules Verne. Read it [here](https://www.gutenberg.org/ebooks/164) on Project Gutenberg for free. 

## License

* Distributed under the GNU Affero General Public License v3.0 License. See `LICENSE` for more information.