<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Creative-Coding on Home</title><link>https://glsngr.xyz/tags/creative-coding/</link><description>Recent content in Creative-Coding on Home</description><generator>Hugo -- gohugo.io</generator><language>en-US</language><lastBuildDate>Sun, 20 Sep 2026 12:00:00 -0400</lastBuildDate><atom:link href="https://glsngr.xyz/tags/creative-coding/index.xml" rel="self" type="application/rss+xml"/><item><title>ASCII Walk: Turning Warsaw, New York into a World of Characters</title><link>https://glsngr.xyz/posts/ascii-walk-warsaw/</link><pubDate>Sun, 20 Sep 2026 12:00:00 -0400</pubDate><guid>https://glsngr.xyz/posts/ascii-walk-warsaw/</guid><description>&lt;img src="https://glsngr.xyz/posts/ascii-walk-warsaw/downtown.png" alt="Featured image of post ASCII Walk: Turning Warsaw, New York into a World of Characters" /&gt;&lt;p&gt;I wanted to explore a real place in a world made entirely of ASCII characters. Streets, buildings, people, cars, trees: all drawn with letters, numbers, and punctuation, with enough freedom to walk around and look wherever I wanted.&lt;/p&gt;
&lt;p&gt;I had recently driven through Warsaw, New York, so it became the first test location. The question was simple: could I walk down a street in this version of Warsaw and think, &amp;ldquo;Hey, I recognize this&amp;rdquo;?&lt;/p&gt;
&lt;p&gt;That became &lt;strong&gt;ASCII Walk&lt;/strong&gt;, a browser-based exploration project built with TypeScript, Three.js, geographic data, and AI assistance from Codex.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;a class="link" href="https://mgelsinger.github.io/asciiwalk/" target="_blank" rel="noopener"
&gt;Play ASCII Walk&lt;/a&gt; · &lt;a class="link" href="https://github.com/mgelsinger/asciiwalk" target="_blank" rel="noopener"
&gt;Browse the source and README&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The demo starts facing the Civil War Monument. Use &lt;strong&gt;WASD&lt;/strong&gt; to walk, &lt;strong&gt;Q/E&lt;/strong&gt; or a mouse drag to turn, &lt;strong&gt;G&lt;/strong&gt; to jump to another Warsaw location, and &lt;strong&gt;C&lt;/strong&gt; to switch between color and monochrome. Playing requires a desktop or laptop with a keyboard and WebGL2-capable browser. If you are reading on your phone, the walkthrough below shows the experience.&lt;/p&gt;
&lt;figure&gt;
&lt;video controls playsinline preload="metadata" width="1280" height="720"
poster="/posts/ascii-walk-warsaw/monument.png"
aria-label="A 28-second silent walkthrough: the monument, Main Street shops, Village Park, and the monument in monochrome. The cuts move between separate viewpoints."
style="display:block;width:100%;height:auto;background:#101a1a;border-radius:8px"&gt;
&lt;source src="https://glsngr.xyz/posts/ascii-walk-warsaw/ascii-walk.mp4" type="video/mp4"&gt;
&lt;track kind="captions" src="https://glsngr.xyz/posts/ascii-walk-warsaw/walkthrough.vtt" srclang="en" label="Scene descriptions" default&gt;
Your browser does not support embedded video. &lt;a href="https://glsngr.xyz/posts/ascii-walk-warsaw/ascii-walk.mp4"&gt;Download the walkthrough.&lt;/a&gt;
&lt;/video&gt;
&lt;figcaption&gt;A 28-second silent walkthrough: the monument, Main Street shops, Village Park, and the monument in monochrome. The cuts move between separate viewpoints.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id="a-real-town-needs-more-than-a-street-grid"&gt;A real town needs more than a street grid
&lt;/h2&gt;&lt;p&gt;The first useful foundation was geographic: street alignments, building outlines, and changes in elevation. Those establish where you are, how roads meet, and how the landscape rises around you.&lt;/p&gt;
&lt;p&gt;But the early version did not feel recognizable enough to me. The monument, courthouse, plaza, and the Main/Buffalo intersection needed to read more clearly. It was also harder to navigate than I wanted.&lt;/p&gt;
&lt;p&gt;That feedback changed the priorities. Building silhouettes and frontage became more important. The monument needed its column and stepped base. The courthouse needed its projecting entrance and columns. Downtown needed the rhythm of connected storefronts and changing rooflines. Street names and a compass made it easier to connect the scene with a real place.&lt;/p&gt;
&lt;p&gt;I wanted those shapes to work in monochrome too. Color can help separate surfaces, but removing it is a useful way to see whether the geometry, contrast, and outlines are doing enough.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://glsngr.xyz/posts/ascii-walk-warsaw/monument.png"
width="1280"
height="720"
srcset="https://glsngr.xyz/posts/ascii-walk-warsaw/monument_hu_19b17854667f9582.png 480w, https://glsngr.xyz/posts/ascii-walk-warsaw/monument_hu_cc4f2cefce4f154.png 1024w"
loading="lazy"
alt="The Civil War Monument, with a stepped base and tall column, between the church and courthouse in colored ASCII"
class="gallery-image"
data-flex-grow="177"
data-flex-basis="426px"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://glsngr.xyz/posts/ascii-walk-warsaw/monument-mono.png"
width="1280"
height="720"
srcset="https://glsngr.xyz/posts/ascii-walk-warsaw/monument-mono_hu_802b93e3a8a312bf.png 480w, https://glsngr.xyz/posts/ascii-walk-warsaw/monument-mono_hu_134f7762b76e7e72.png 1024w"
loading="lazy"
alt="The same monument viewpoint in monochrome ASCII, showing its column, base, and neighboring buildings without color"
class="gallery-image"
data-flex-grow="177"
data-flex-basis="426px"
&gt;&lt;/p&gt;
&lt;p&gt;The result is still an interpretation. Some building heights are estimates, architectural references include older photographs, and fine details disappear at character resolution. The project records those limitations alongside its &lt;a class="link" href="https://github.com/mgelsinger/asciiwalk/blob/main/docs/RECOGNITION.md" target="_blank" rel="noopener"
&gt;recognition notes&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="how-the-world-becomes-ascii"&gt;How the world becomes ASCII
&lt;/h2&gt;&lt;p&gt;There are two main stages: preparing the geography and rendering it in the browser.&lt;/p&gt;
&lt;p&gt;The preparation tools use &lt;strong&gt;Python&lt;/strong&gt; to turn bounded source data into a world pack. OpenStreetMap supplies street and building geometry. Matched Overture building data supplements some heights. Numeric USGS elevation supplies the terrain. Authored overrides add reference-informed details to selected Warsaw buildings.&lt;/p&gt;
&lt;p&gt;The prepared world contains a manifest, feature data, and terrain grids. The browser loads those files and builds the scene using &lt;strong&gt;Three.js&lt;/strong&gt;. Streets and buildings occupy real relative positions, and the walker follows the ground while colliding with buildings, water, and selected objects.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-text" data-lang="text"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;Map geometry + heights + elevation
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; |
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; Prepared world files
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; |
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; Walkable 3D geometry
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; |
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; ASCII glyphs in the browser
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;The rendering step uses color, depth, surface information, and edges to choose a printable ASCII character for each cell. A second GPU pass draws those characters from a font atlas. The familiar dots, slashes, vertical bars, and dense symbols become pavement, rooflines, windows, foliage, and shadows.&lt;/p&gt;
&lt;p&gt;The visible world is drawn with ASCII glyphs. The surrounding buttons and menus are regular browser UI. This approach provides free movement through a 3D scene while keeping the character-based appearance consistent across the town, people, and moving objects.&lt;/p&gt;
&lt;p&gt;There is more detail in the &lt;a class="link" href="https://github.com/mgelsinger/asciiwalk/blob/main/docs/ARCHITECTURE.md" target="_blank" rel="noopener"
&gt;architecture notes&lt;/a&gt;, including terrain handling, collision, scene chunks, and the rendering passes.&lt;/p&gt;
&lt;h2 id="the-park-was-a-useful-reality-check"&gt;The park was a useful reality check
&lt;/h2&gt;&lt;p&gt;After adding a location picker, I could jump directly to the park and explore. That immediately exposed another problem: there were no basketball courts, swings, merry-go-round, or tennis courts to make it feel like the park I expected.&lt;/p&gt;
&lt;p&gt;Filling those in changed the experience. Mapped recreation areas became courts, playgrounds, pools, and ball fields. Hoops, nets, court markings, slides, climbing frames, benches, picnic tables, and other furnishings added detail at walking height.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://glsngr.xyz/posts/ascii-walk-warsaw/park.png"
width="1280"
height="720"
srcset="https://glsngr.xyz/posts/ascii-walk-warsaw/park_hu_dd60ad64ca9cf2db.png 480w, https://glsngr.xyz/posts/ascii-walk-warsaw/park_hu_fd3d1f64bebc5e02.png 1024w"
loading="lazy"
alt="Village Park in ASCII, showing playground equipment and nearby recreation facilities"
class="gallery-image"
data-flex-grow="177"
data-flex-basis="426px"
&gt;&lt;/p&gt;
&lt;p&gt;Movement helped too. Swings move, the merry-go-round turns, players use the courts, and water ripples. Nearby prompts let you interact with some equipment. A &lt;strong&gt;Still&lt;/strong&gt; setting freezes activity, and the app respects a reduced-motion preference when choosing its initial setting.&lt;/p&gt;
&lt;p&gt;The same attention then went into the other named destinations: school entrances and athletic grounds, the movie theater marquee and ticket window, shopping-center carts and parking, and details around the civic buildings and downtown shops.&lt;/p&gt;
&lt;p&gt;These additions are approximate arrangements fitted to mapped places. They give you more to notice and interact with while exploring; the &lt;a class="link" href="https://github.com/mgelsinger/asciiwalk/blob/main/docs/PARK.md" target="_blank" rel="noopener"
&gt;park source notes&lt;/a&gt; distinguish mapped facilities from inferred equipment and layouts.&lt;/p&gt;
&lt;h2 id="making-it-easy-to-try"&gt;Making it easy to try
&lt;/h2&gt;&lt;p&gt;Free walking is useful, but walking across town should not be a prerequisite for seeing the interesting places. The location picker lets you arrive outside the monument, schools, shops, theater, park, and courthouse, then explore from there. Your position and preferences are saved in your browser.&lt;/p&gt;
&lt;p&gt;Distribution also needed attention. Opening the source HTML directly in a browser did not load the app correctly, so the local version gained a launcher that starts a small server and opens the default browser. That is useful for development and for preparing new places.&lt;/p&gt;
&lt;p&gt;For sharing, the simpler route is the &lt;strong&gt;&lt;a class="link" href="https://mgelsinger.github.io/asciiwalk/" target="_blank" rel="noopener"
&gt;hosted demo&lt;/a&gt;&lt;/strong&gt;. It includes Warsaw, Perry, and a section of downtown Buffalo, with no installation, account, or map API key required. The prepared geography and bundled font are served as static files. New-area preparation remains an optional local feature using Python and public data services, currently limited to the contiguous United States.&lt;/p&gt;
&lt;p&gt;Build and unit-test checks run on Windows, macOS, and Linux. Browser checks cover walking, destination selection, saved state, interactions, and the standalone viewer. Warsaw&amp;rsquo;s retained source snapshots can also reproduce the shipped world files. Those checks help make sharing repeatable, although browser and graphics performance still vary by device.&lt;/p&gt;
&lt;h2 id="working-with-codex"&gt;Working with Codex
&lt;/h2&gt;&lt;p&gt;I used Codex to help plan and implement the project, work through the geography and rendering systems, add tests, and package the result for local use and the web.&lt;/p&gt;
&lt;p&gt;My part was defining the experience and judging what came back. I picked Warsaw, prioritized recognizable streets and buildings, asked for monochrome and free walking, and pushed on the parts that were missing or difficult to use. The feedback was concrete: the landmarks needed to be clearer; I needed bearings and street names; the park needed its facilities; the other destinations needed the same attention.&lt;/p&gt;
&lt;p&gt;That made iteration central to the work. Each playable version gave me something specific to evaluate, and those observations shaped the next changes. Getting a scene on screen was one milestone. Making it feel familiar and inviting enough to explore took repeated review.&lt;/p&gt;
&lt;h2 id="take-a-walk"&gt;Take a walk
&lt;/h2&gt;&lt;p&gt;The project is ready to try. Start at the monument, turn toward the courthouse, jump to Main Street, or spend a little time in the park. Switch off the color and see which shapes still stand out.&lt;/p&gt;
&lt;p&gt;If you know Warsaw, I would especially like to hear which places you recognize and which details are missing. Screenshots, a location name, and a description of what looks wrong are useful feedback through the &lt;a class="link" href="https://github.com/mgelsinger/asciiwalk/issues" target="_blank" rel="noopener"
&gt;issue tracker&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;a class="link" href="https://mgelsinger.github.io/asciiwalk/" target="_blank" rel="noopener"
&gt;Explore ASCII Walk&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Media in this article was captured from the running project. Geographic sources include OpenStreetMap contributors, applicable Overture and Microsoft building data, and USGS 3DEP. The place-name index uses GeoNames, and the font is IBM Plex Mono. Source attribution, reference information, and applicable licenses are retained in the project&amp;rsquo;s &lt;a class="link" href="https://github.com/mgelsinger/asciiwalk/blob/main/public/DATA_LICENSES.txt" target="_blank" rel="noopener"
&gt;data and asset notices&lt;/a&gt;. The repository includes the source for inspection and testing; an application-code reuse license has not yet been selected.&lt;/em&gt;&lt;/p&gt;</description></item></channel></rss>