By name: madrid-3pixel description: "Madrid 3Pixel — visor isométrico de Madrid en píxel art con sistema de tiles, 7 fases día/noche, efecto nieve/lluvia/niebla, y edificios 3D de Madrid. Aurora v5.1 CSS." version: 0.1.0 author: Ntizar tags: [madrid, isometric, pixel-art, map, visualization, aurora]
Madrid 3Pixel
Repo
Ntizar/Madrid3Pixel → ntizar.github.io/Madrid3Pixel/
Stack
- Visor: Canvas 2D vanilla JS (image-rendering: pixelated)
- Proyección: Isométrica con rotación configurable
- CSS: Aurora v5.1 (azul #2563eb + naranja #f97316, liquid glass)
- Tiles: Sistema procedural con tipado (ground/building/park/water)
- Efectos: Partículas en canvas overlay (nieve, lluvia, niebla)
- Deploy: GitHub Pages via Actions
Estructura
Madrid3Pixel/
├── index.html # HTML con UI Aurora + controles
├── src/css/style.css # Sistema de diseño Aurora
├── src/js/main.js # Motor: proyección, tiles, render, partículas
├── src/js/tiles.js # Generador de tiles placeholder SVG
├── .github/workflows/deploy.yml # CI/CD GitHub Pages
└── README.md
Funcionalidades clave
- 7 fases de iluminación: night, dawn, morning, midday, afternoon, sunset, dusk
- Edificios 3D: generación procedural con landmarks de Madrid (Sol, Gran Vía, Retiro, Debod...)
- Río Manzanares: curva animada con shimmer
- Metro de Madrid: 6 líneas coloreadas (L1-L6 circular)
- Controles: hora del día, efectos clima (nieve/lluvia/niebla), estilo visual, capas, rotación
- Respnsive: soporte táctil (pinch zoom + drag)
Cómo se usa
npx serve . -l 3000 # Dev local
python3 -m http.server 8080 # Alternativa
GitHub Pages se deploya automáticamente al hacer push a main.
Referencia
Inspirado en isometric.nyc por cannoneyed.