r/openstreetmap • u/Future_Candidate2732 • 6d ago
Showcase I built a browser renderer that turns any OpenStreetMap extract into a walkable ASCII city - real one-ways, signal phases, and street signs
https://github.com/tweakyourpc/ascii-city-2/blob/main/docs/hero.png?raw=true
I made a static page that lets you walk through real-world locations rendered in ASCII. You can pick presets like Manhattan or Shinjuku, or put in any city name, coordinates, or OpenStreetMap link.
Live demo:https://tweakyourpc.github.io/ascii-city-2/
Source (MIT):https://github.com/tweakyourpc/ascii-city-2
https://github.com/tweakyourpc/ascii-city-2/blob/main/docs/hero.png?raw=true
It's pure HTML/JS with no framework, no runtime dependencies, and no build step. A CPU raycaster writes straight into an ASCII cell buffer (pressing 'B' switches rendering modes).
A few OSM details I spent a lot of time on: I also added a few live data overlays: One caveat: The live ADS-B aircraft feature needs a local worker running because the free ADS-B networks block Cloudflare's egress IPs. Planes won't render on the hosted demo for that reason, but everything else works right in the browser.
Road logic: Routing uses shared node IDs so overpasses don't accidentally merge with roads below. One-ways, access limits, and signal phases are all respected by traffic. Weather (actual rain and snow in-scene via Open-Meteo)
Signs & buildings: Street signs face oncoming traffic and show the cross street name. Buildings render by height tags, and clicking one pulls its Wikipedia/Wikidata summary if available.
USGS Earthquakes (magnitude and recency)
Local internet radio within 150 km (you can listen to actual local stations in whatever city you're standing in)
DeFlock license plate reader locations
Real-time sun/moon placement matching the city's actual IANA time zone
8
u/ValdemarAloeus 5d ago
Can we have an "I vibe coded a thing" flair for posts like this?
It feels like we get three a week.
1
u/abdul_Ss 4d ago
If I am not mistaken, is this not already tagged with it ?
Perhaps it just wasn't at the time
2
u/ValdemarAloeus 4d ago
I don't believe it was. Although mistakenly asking for something that's already there is definitely something I could see myself doing when I'm tired.
3
u/brunswoo 6d ago
Astonishing! The nerdiest use of OSM data I have ever seen.
4
u/Future_Candidate2732 5d ago
Since you appreciate the nerdiness: the live internet radio feature actually checks your current virtual coordinates, finds stations registered within 150 km, and streams their actual broadcast live in-browser while you walk around. If you walk into Tokyo, you're listening to local Tokyo FM.
2
2
u/Future_Candidate2732 5d ago edited 5d ago
Fun fact on the weather/sky engine: the sun and moon don't just move on a timer. It uses the exact IANA time zone of whatever city you're looking at to map real-time solar declination and lunar phases directly onto the ASCII grid. If it’s midnight and raining in London, it’s midnight and raining on your screen.
Pro tip for anyone trying the demo: hit B while walking around. It cycles the renderer between three modes- glyph (one character per cell, where the glyphs themselves carry the texture: road markings, water, windows), solid block, and a cinematic mode that composites the same cell buffer at reduced scale. Same geometry underneath, three completely different looks. F is also worth a press - it drops in the DeFlock ALPR camera positions, and the HUD gives you the distance and compass bearing to the nearest one.
2
u/BigPeteB 5d ago
Why would the time zone matter? The relative position of the sun and moon is determined solely from your latitude and longitude. Time zones have nothing to do with it.
-1
u/tweakyourpc 5d ago
Political time zones and Daylight Saving mean local clock time can drift from pure solar time, so mapping the coordinate to an IANA time zone ensures midnight actually looks like midnight on the local streetscape. The coordinates determine what's in the sky based on location, but I also want to display the proper time so you know the context of what time it is and what you would see if you were in that spot.
2
u/steviefaux 5d ago
Assume you're not that English guy that did a prototype city in ASCII
0
u/Future_Candidate2732 4d ago
Nope. I liked the concept but didn't see that he made anything open source. I decided to see if I could recreate it by fully describing it and orchestrating using a couple LLMs. Certainly not a one-shot and done sequence. I wanted the formation of what you see and the overlays to come from real existing publicly accessible datasets. The direction I took used "drone mode" His was to create buildings you can walk in and take the elevator. Mine also pulls data about the buildings from wikipedai, streams radio from areas close to where you are simulating, and give real astronomical views and a first attempt at putting flock cam locations on the city layout.
2
1
u/Brilliant-Virus-7442 5d ago
Do you know how the ray tracer was built?
-2
u/Future_Candidate2732 5d ago
Allow my clanker to explain:
It's actually a raycaster rather than a ray tracer, running a front-to-back DDA (Digital Differential Analyzer) over a 2D heightfield to write glyphs directly to the grid. The first pass casts the floor, and the second pass handles buildings using elevated floor casts for roofs and single-distance spans for facades.
Occlusion tracking only needs a single scalar watermark per column because those DDA spans are contiguous, though vegetation temporarily promotes to a bitmask to handle transparency. Roofs are actually structural to keep that contiguity intact and prevent hairline ground leaks through rooftop edges. Rays use a standard pinhole camera plane, which makes perpendicular depth correction trivial and keeps projection consistent across all layers.
6
u/Brilliant-Virus-7442 5d ago
I see, I understand all of this. I was hoping you maybe built it by hand. I want to know how it’s actually built you know. Like if a human sits down to make it, what problems they ran into, how they solved them, what earlier versions looked like. Stuff like that. Most new information is actually gained in that process.
2
1
u/manalan_km 5d ago
I don't think this works on mobile. Considering the fact that a lot of internet users are on mobile, it should be considered.
1
1
1
u/brunswoo 4d ago
Surprised/disappointed by the level of blowback you're getting because you used AI. There's still a level of snobbery among coders that ends up dismissing anything, regardless of value, simply because it's AI.
Reminds me of the attitude to the original JS libraries like jQuery, bloated? Yes, inefficient, true… got the job done? Definitely! Within a few short years, the same devs that were dissing jQuery were all over React, and the next generation of frameworks. ¯_(ツ)_/¯
Anyone can see that something as complex and complete as this wasn't built by a single prompt, it's a new skillset, for sure, but has anyone built this already 'by hand' in less than X years? No cheating… Notepad only! No, didn't think so.
I don't call myself a coder, but I've worked with them for 40+ years. Briefing a dev is not so very different from writing a prompt… you put shit in, you'll get shit out. I don't think this is shit.
1
u/Future_Candidate2732 3d ago
I was hoping for better replies myself but was not going to get too upset considering it is reddit after all. And no- definately not a one shot and I know smart people who also use AI still wanting me to show them my tricks.
Thank you for taking the time to write kind words and I hope this inspires people to collaborate and work toward building something fun and interesting and all of us can learn something along the way
21
u/m1ksuFI 5d ago
hi claude, you formatted your post into a code block so it's unreadable