Isopolis перетворив Сан-Франциско на гігантську ізометричну піксельну карту
Новий вебпроєкт перемальовує реальну 3D-геометрію Сан-Франциско як одну величезну ізометричну піксельну картину. Можна рухатися містом, проходити екскурсії, слухати вбудоване радіо та надсилати листівку.
Вебпроєкт Isopolis (sf.isopolis.city) показує Сан-Франциско як одну ізометричну піксельну картину на весь екран браузера. Карту побудовано з реальної 3D-геометрії міста: вулиці та хмарочоси перемальовані тайл за тайлом спеціально донавченою моделлю зображень, тож вони повторюють справжнє планування міста, а не уяву художника.
Як влаштована карта
Проєкт нарізає місто на квадратні тайли по 512 пікселів, збережені у форматі WebP, і подає їх через низку рівнів масштабування — цього досить, щоб перейти від панорами всього півострова до окремих кварталів. Публічний маніфест тайлів налічує 2 630 вихідних блоків. Географічний контекст походить із даних OpenStreetMap (через CARTO), а межі районів — із набору даних, опублікованого DataSF, відкритим порталом даних міста.
Вигляд навмисно ретро: інтерфейс використовує піксельні шрифти Press Start 2P і VT323, а всі написи, талісмани та пам'ятки намальовані грубою піксельною графікою. У титрах застосунку вказано «nuwandavek».
Екскурсії, радіо та листівки
Окрім переміщення та масштабування, Isopolis поводиться як маленька гра. Екскурсії ведуть від зупинки до зупинки, кожна зі своїм талісманом, а на екрані огляду можна покрутити інтерактивну 3D-модель талісмана туру. Вбудоване радіо грає музику, поки ви досліджуєте місто, а пошукове поле приймає як назву місця, так і короткий тег — «corp» (компанія), «lmrk» (пам'ятка) чи «evnt» (подія).
Натискання на позначене місце відкриває картку з координатами й деталями. З будь-якої точки кнопка листівки малює піксельну листівку поточного вигляду просто в браузері та зберігає її як PNG, названий на честь місця, де ви стоїте; нею можна поділитися в X або передати застосунку Instagram. Позаяк позиція, вибране місце й активна екскурсія зберігаються у фрагменті URL, скопійоване посилання відновлює той самий вигляд.
Чому це важливо
Isopolis нагадує, що міські дані можуть бути більшим, ніж утиліта: покладене на реальні геодані, піксельне мистецтво перетворює знайомий силует на щось варте поступового дослідження. Карта працює в браузері без встановлення — sf.isopolis.city.
SiTech — веброзробка з підтримкою AI
Створюємо швидкі та сучасні сайти й інтегруємо AI у бізнес-процеси. Маєте проєкт чи запитання? Із задоволенням допоможемо.