MapGenerator

MapGenerator is a full-stack procedural world generator that transforms a single seed into a fully-realized fantasy map. A Spring Boot backend produces deterministic terrain using FastNoiseLite and streams it to a Vue 3 + TypeScript client that renders the entire world on an HTML5 Canvas.

The goal of the project is to combine the reproducibility of seed-based generation with the visual richness of hand-crafted maps — stylized water, soft topology shadows, and procedurally-placed cities — while keeping rendering smooth on the client.

Core Features

• Interactive Viewport: Google Maps-style pan and zoom inside a fixed 800x600 viewport, backed by a virtual canvas so only what's visible is drawn each frame.
• Stylized Water Animation: Procedural wave patterns inspired by games like Don't Starve, with dynamic transparency and subtle shoreline ripples.
• Procedural Terrain Textures: Grain, tufts, ridges and ripples are generated client-side in real time so terrain stays crisp at every zoom level.
• Topology & Shadows: Height-gradient shading provides a 3D feel without leaving the 2D rendering pipeline.
• Procedural Cities: Each settlement is rendered with uniquely generated houses and skyscrapers, so no two cities look the same.

Architecture

The system is split into a deterministic generation backend and a presentation-focused frontend, connected by a streaming API.

      
[ Seed ] --> [ Spring Boot + FastNoiseLite ] --> [ Streaming API ]
                                                       ↓
                                           [ Vue 3 / TS / Canvas ]
                                                       ↓
                                          [ Virtual Canvas Renderer ]
      
    

• Backend: Spring Boot, Spring Data JPA, Hibernate, PostgreSQL and FastNoiseLite for noise-based terrain generation.
• Frontend: Vue 3 Composition API, TypeScript, Vite and Axios, rendering directly to HTML5 Canvas.
• Infrastructure: Docker and Docker Compose for one-command local setup of the full stack.

Performance

The renderer uses a virtual canvas hybrid approach: static terrain is pre-rendered into offscreen layers and only animated elements (water, shadows, building details) are redrawn each frame. This keeps the experience smooth even on large worlds while preserving the procedural look at every zoom level.