Назад
Isopolis перетворив Сан-Франциско на гігантську ізометричну піксельну карту
SiTech Team2 წთ. საკითხავი

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.

SSiTech

SiTech — веброзробка з підтримкою AI

Створюємо швидкі та сучасні сайти й інтегруємо AI у бізнес-процеси. Маєте проєкт чи запитання? Із задоволенням допоможемо.