If you want to get into fixed-width character art, I highly recommend doing it in the browser like OP did rather than trying to old school it in the terminal. I have done a little ascii[0] and unicode[1] graphics, and the browser is such a better tool. You can set fonts and proportions and know exactly how things will render for the user. Mouse input, performance profiling and a bunch of other things are just better in the browser. Both of my projects work in the terminal but were browser first.
It is kind of shocking to me how TUIs are enjoying a bit of dev tool renaissance right now when the browser is such a capable platform.
A couple of years ago I wrote extensive benchmarks on three browser-based rendering techniques: text in the DOM, 2D canvas, and WebGL canvas.
The DOM approach is the purest, as it uses a font, and it can achieve very good performance. The only noticeable slowdown at 60 FPS occurs when the character color changes frequently within each line: each new character needs to be wrapped in a span. 2D canvas is a bit more flexible but not necessarily faster.
WebGL is obviously the fastest, at 1000+ FPS, and pixel fonts can be rendered ultra-crisp as well.
Below is the DOM test for frequent vertical color changes.
Press and hold the cursor over the ASCII output to change the orientation (notice the FPS drop at the top left).
I suspect DOM is probably fast enough for most usecases. For me, DOM only started chugging because every tile (2 half-width characters in hexwalker) was a react element and those would get garbage collected en-masse and cause studder.
> It is kind of shocking to me how TUIs are enjoying a bit of dev tool renaissance right now when the browser is such a capable platform.
Command line tools (and by extension TUIs) can be used over SSH and don't require messing around with HTTPS certificates. They also have the benefit of having the context of your CWD.
In hexwalker, what does the AU/A0 button do? Also is there anything to "do" or is it more of a wanderlust simulator? I found a cave with a coffin but so far no items underfoot to use.
AU/AO are auto explore underworld and overworld and A0 is to stop auto explore. You can click on them in the top menu.
> Also is there anything to "do" or is it more of a wanderlust simulator?
It is mostly just a technology demonstrator for having a hexagonal grid map in the terminal. There is nothing to do. I am prototyping some gameplay features around interacting with the environment, but I expect the end result will be very light weight gameplay that more "A Short Hike" than nethack.
> It is kind of shocking to me how TUIs are enjoying a bit of dev tool renaissance right now
For me, it's because I can SSH from my wimpy laptop to systems with hundreds of CPU cores and TBs of RAM - and use the same tools and workflows that I am used to.
It looks really good in the video uploaded, but when I tried it myself it didn't look the same and was hard to tell what was going on. Not sure what the issue is.
Same here. The video looks cool, but what I see is much messier and hard to identify shapes and objects. Tried on latest Brave and Firefox on Arch Linux.
I bought the game so I could study the code. Unfortunately it is wasm & obfuscated. I'm gonna see what my handy dandy big giant brain buddies can do with it.
This makes me deeply nostalgic. Starlight Zone from Sonic the Hedgehog is my favorite game level of all time and the aesthetic of this city is basically like stepping into the background of Starlight Zone.
Wouldn't it be better to use blocks (219 in ASCII) as the main paint unit and use some other half-block and "hashed" characters (ASCII 220, 223, 176-178) to implement dithering?
There are multiple extensions to ASCII. "Extended ASCII" isn't a single thing, but a category of single-byte character encodings which are supersets of ASCII.
“I wanted to build a city that feels alive, but is made entirely from ASCII characters.
This is a small custom engine built with JavaScript and Canvas — no Unity, Unreal, 3D models, textures, or shaders. The world is a grid-based city with roads, buildings, trees, cars, and pedestrians.
Every frame, the engine raycasts from the camera to work out perspective, depth, collisions, and what should be visible, then draws it all using letters, numbers, and symbols.
In other words: it’s a tiny 3D city made from blocks, viewed through a screen of ASCII characters.
Still a work in progress, but I’m going to keep pushing the atmosphere, detail, and interaction further.”
If you want to get into fixed-width character art, I highly recommend doing it in the browser like OP did rather than trying to old school it in the terminal. I have done a little ascii[0] and unicode[1] graphics, and the browser is such a better tool. You can set fonts and proportions and know exactly how things will render for the user. Mouse input, performance profiling and a bunch of other things are just better in the browser. Both of my projects work in the terminal but were browser first.
It is kind of shocking to me how TUIs are enjoying a bit of dev tool renaissance right now when the browser is such a capable platform.
[0] https://aleyan.com/projects/ascii-side-of-the-moon/ [1] https://ytirnity.com/play/hexwalker
A couple of years ago I wrote extensive benchmarks on three browser-based rendering techniques: text in the DOM, 2D canvas, and WebGL canvas. The DOM approach is the purest, as it uses a font, and it can achieve very good performance. The only noticeable slowdown at 60 FPS occurs when the character color changes frequently within each line: each new character needs to be wrapped in a span. 2D canvas is a bit more flexible but not necessarily faster. WebGL is obviously the fastest, at 1000+ FPS, and pixel fonts can be rendered ultra-crisp as well.
Below is the DOM test for frequent vertical color changes. Press and hold the cursor over the ASCII output to change the orientation (notice the FPS drop at the top left).
https://play.ertdfgcvb.xyz/#/src/basics/performance_test
I suspect DOM is probably fast enough for most usecases. For me, DOM only started chugging because every tile (2 half-width characters in hexwalker) was a react element and those would get garbage collected en-masse and cause studder.
> It is kind of shocking to me how TUIs are enjoying a bit of dev tool renaissance right now when the browser is such a capable platform.
Command line tools (and by extension TUIs) can be used over SSH and don't require messing around with HTTPS certificates. They also have the benefit of having the context of your CWD.
Popping into a TUI from an existing terminal session to quickly do something without lifting my hand is the only reason I use and prefer a TUI.
If I have to open a browser which has, frankly mediocre, kb nav, then I'd rather it just be a GUI.
I guess I'm a browser detractor, though, because unless its a webserver used for quick configs then I dread using them.
>when the browser is such a capable platform
Seriously? Why would you want to open a memory heavy browser tab to run a TUI? This attitude is how we got Electron.
Browser as an app platform, should be used as a last resort.
In hexwalker, what does the AU/A0 button do? Also is there anything to "do" or is it more of a wanderlust simulator? I found a cave with a coffin but so far no items underfoot to use.
AU/AO are auto explore underworld and overworld and A0 is to stop auto explore. You can click on them in the top menu.
> Also is there anything to "do" or is it more of a wanderlust simulator? It is mostly just a technology demonstrator for having a hexagonal grid map in the terminal. There is nothing to do. I am prototyping some gameplay features around interacting with the environment, but I expect the end result will be very light weight gameplay that more "A Short Hike" than nethack.
> It is kind of shocking to me how TUIs are enjoying a bit of dev tool renaissance right now
For me, it's because I can SSH from my wimpy laptop to systems with hundreds of CPU cores and TBs of RAM - and use the same tools and workflows that I am used to.
It looks really good in the video uploaded, but when I tried it myself it didn't look the same and was hard to tell what was going on. Not sure what the issue is.
The poster has conflated two different projects with a similar goal I believe.
The videos seem to come from a closed source project made by an outlet called Grow Now Games.
https://ko-fi.com/grownowgames/
https://www.grownowgames.com/
Yikes that would be my mistake - I was merging several submissions and thought it was the same project. Sorry!
The other links were:
https://cybercity.carino.systems/
https://github.com/MiguelCarino/CyberCity
Same here. The video looks cool, but what I see is much messier and hard to identify shapes and objects. Tried on latest Brave and Firefox on Arch Linux.
The video showcases his new version. The live version is his old version.
It's beautiful, but when I went to try it out myself it seems it's pay to play?
https://ko-fi.com/s/e1e0f91951
Note that's "Prototype 1", and I gather the more developed v2 (featured in the update video) isn't available yet.
I bought the game so I could study the code. Unfortunately it is wasm & obfuscated. I'm gonna see what my handy dandy big giant brain buddies can do with it.
Reminds me of old MUDs, but elevated with a proper walkable city. Super clever use of pure HTML for this whole experience.
Seriously impressive browser tech pushing what's possible in one HTML file. The ASCII art and walking mechanic are brilliant.
Reminds me of classic DOS text adventures, but with a modern cyberpunk twist. Love the aesthetic and the clever single-file packaging.
This makes me deeply nostalgic. Starlight Zone from Sonic the Hedgehog is my favorite game level of all time and the aesthetic of this city is basically like stepping into the background of Starlight Zone.
https://youtube.com/watch?v=ZHR5OKDL81g
Wouldn't it be better to use blocks (219 in ASCII) as the main paint unit and use some other half-block and "hashed" characters (ASCII 220, 223, 176-178) to implement dithering?
By leveraging characters, you can actually do a form of dithring! See this great interactive blog post: https://alexharri.com/blog/ascii-rendering
That was a really, really cool read!
Everything above 127 would be extended ASCII instead of strict ASCII, if that matters.
There are multiple extensions to ASCII. "Extended ASCII" isn't a single thing, but a category of single-byte character encodings which are supersets of ASCII.
Is the GitHub project the same as the videos? Seems like no.
[dupe] https://news.ycombinator.com/item?id=49310003
I posted this 15 days ago - https://news.ycombinator.com/item?id=49314380
Glad to see HN visitors finally see it on the front page :)
Welcome. Not a dupe if no discussion after a period of time. Sometimes things just don't get traction. Resubmit is ok.
> Sometimes things just don't get traction. Resubmit is ok.
More like it was resubmitted a hundred times already.
Wow, that's interesting. It's a good start, and it would be interesting to see how the project develops.
love it. It has a mood
From the video description:
“I wanted to build a city that feels alive, but is made entirely from ASCII characters.
This is a small custom engine built with JavaScript and Canvas — no Unity, Unreal, 3D models, textures, or shaders. The world is a grid-based city with roads, buildings, trees, cars, and pedestrians.
Every frame, the engine raycasts from the camera to work out perspective, depth, collisions, and what should be visible, then draws it all using letters, numbers, and symbols.
In other words: it’s a tiny 3D city made from blocks, viewed through a screen of ASCII characters.
Still a work in progress, but I’m going to keep pushing the atmosphere, detail, and interaction further.”
This is really nice! is it accessible somewhere to play with?
The OP's first link is a demo, their second link is the source.