Nautilus Navigation Chart

Nautilus Navigation Chart

Description

A nautical-themed interactive web application featuring:

• ocean depth chart
• vessel log page
• clickable compass

Demo

Try it live: Here

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 on Project Gutenberg for free.

License

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