HN Explorer

61 comments

[ 0.20 ms ] story [ 12.3 ms ] thread
felineflock
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?
wewtyflakes
Everything above 127 would be extended ASCII instead of strict ASCII, if that matters.
recursive
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.
Transformanshen
Wow, that's interesting. It's a good start, and it would be interesting to see how the project develops.
naet
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.
rocmcd
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.
jayturley
The video showcases his new version. The live version is his old version.
rpdillon
Rhys is the developer of the video version, a person named Miguel wrote the version that was linked with source code. The CONTRACT.md in Miguel's version suggests AI usage, as does commit history (I'm not a zealot about this, but I do note it). I think Rhys's version is more handcrafted, but also much less accessible, being pay-to-play and being delivered in obfuscated WASM.
aleyan
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

holsta
> 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.

saintfire
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.

butlike
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.
aleyan
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.

butlike
Nice, thanks for the reply. For what it's worth, I like the sparse nature of the game so far, and yeah, agree on not trying to make it into nethack.
agys
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

aleyan
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.
slowin
> 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.

echoangle
> don't require messing around with HTTPS certificates.

Which also means there’s no real defense against MITM attacks… at least I don’t think anyone seriously checks the host key on first connection.

account42
Most reasonable countries have the same defense against that as you get against someone stabbing you. I don't see many security professionals insisting that you have to walk around in plate mail for some reason.
qsera
>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.

thomasfromcdnjs
I built sshfighter.com recently and pushed terminal graphics to the limit (with no kity)

You have to zoom out to get more pixels for it to look good (and press v to switch rendering engine if it starts off poor)

> ssh sshfighter.com

And instructions on how to do it are here -> https://github.com/thomasdavis/sshfighter.com/blob/main/docs...

(the homepage is ai generated, the real work is in the ssh server)

mspreij
Uh.. that looks freakin' awesome. How?!
thomasfromcdnjs
aha i've been hacking away at the terminal graphics over ssh for ages for months, the repo is fully open source.

the sprites aren't all the same size or as good as they could be but already spent too much $$ on sprites.

the sprites are just passed through algorithms that optimize for what text characters at different aspects would make them look good.

mspreij
I was pretty proud of my Game of Life & Wireworld implementations for the terminal, with half-character resolution o.o; Guess I'll have to up my game and start work on Twin Cobra and Dune ][ clones.. now that I've seen it's possible..

Using sprites is clever :-) then I guess that's how these older games worked too.

thomasfromcdnjs
would love to see what you build. i am working a ssh mmorpg, about to start working on the lore
alchemism
I’m doing a ssh mush, vintage style.
k7peak
This is awesome. I did the same, sshwars.com [NSFW]. Mine is def not as graphic cool as yours but different game play.

OP: Amazing ascii world! I love old school terminal style everything.

larme
because modern browsers are monsters that a lot of us want to avoid
[deleted]
(comment deleted)
jeffgreco
Is the GitHub project the same as the videos? Seems like no.
edw519 

  <svg viewBox='0 0 1200 675' width=1200 height=675 style=background:lightblue>
  <defs>
  <pattern id=Lvl4wws width=12 height=12 patternUnits=userSpaceOnUse>
  <rect width=12 height=12 fill=#5f350d />
  <rect class='yel op7' x=3 y=4 width=4 height=4 />
  </pattern>
  <pattern id=Lvl3wws width=16 height=16 patternUnits=userSpaceOnUse>
  <rect width=16 height=16 fill=#a04e09 />
  <rect class='yel op6' x=3 y=3 width=3 height=8 />
  </pattern>
  <pattern id=Lvl2wws width=20 height=20 patternUnits=userSpaceOnUse>
  <rect width=20 height=20 fill=#b26a28 />
  <rect class='wh b3 op6' x=8 y=6 width=8 height=8 />
  </pattern>
  <pattern id=Lvl1wws x=-5 width=30 height=40 patternUnits=userSpaceOnUse>
  <rect width=30 height=40 fill=#ae6a2a />
  <path class='wh b3 op6' d=m15,30v-9h14v18h-14v-9h14 />
  </pattern>
  <linearGradient id=goldGradientSky x1=0% y1=0% x2=0% y2=100%>
  <stop offset=0% style=stop-color:orange />
  <stop offset=100% style=stop-color:lightyellow />
  </linearGradient>
  </defs>
  <path fill=url(#goldGradientSky) d=m0,0h2400v675h-2400 />
  <g>
  <!Lvl5><path fill=#222 d=m0,675v-206h15v-35h26v35h9v30h18v-80h30v62h15v-42h24v58h18v12h12v-34h14v-45h22v32h28v24h12v-50h18v14h8v-34h20v20h8v-34h16v50h20v-30h20v20h18v-16h14v44h16v-18h30v18h16v-30h34v32h12v-44h30v54h22v-44h20v26h16v26h10v-58h26v36h8v-22h22v16h16v-30h28v30h30v-52h26v40h10v-20h26v20h20v50h10v-40h20v-40h20v20h30v20h26v-16h20v28h14v12h16v-26h28v-50h15v38h12v30h10v-30h10v-30h14v50h12v-22h18v-58h26v72h12v-26h22v36h16v-46h30v47h16v206m0,0v-206h15v-35h26v35h9v30h18v-80h30v62h15v-42h24v58h18v12h12v-34h14v-45h22v32h28v24h12v-50h18v14h8v-34h20v20h8v-34h16v50h20v-30h20v20h18v-16h14v44h16v-18h30v18h16v-30h34v32h12v-44h30v54h22v-44h20v26h16v26h10v-58h26v36h8v-22h22v16h16v-30h28v30h30v-52h26v40h10v-20h26v20h20v50h10v-40h20v-40h20v20h30v20h26v-16h20v28h14v12h16v-26h28v-50h15v38h12v30h10v-30h10v-30h14v50h12v-22h18v-58h26v72h12v-26h22v36h16v-46h30v47h16v206 />
  <!Lvl4><path fill=url(#Lvl4wws) stroke=black stroke-width=2 d=m2400,675h-2400v-100h16v-74h35v56h21v-40h28v33h12v-25h80v-64h43v24h65v24h70v26h37v-34h35v40h46v-56h34v66h38v-64h26v62h134v-54h35v41h13v-17h80v-50h25v40h78v-40h36v34h47v32h38v-34h44v40h43v34h40h16v-74h35v56h21v-40h28v33h12v-25h80v-64h43v24h65v24h70v26h37v-34h35v40h46v-56h34v66h38v-64h26v62h134v-54h35v41h13v-17h80v-50h25v40h78v-40h36v34h47v32h38v-34h44v40h43v34h40v100 />
  <!Lvl3><path fill=url(#Lvl3wws) stroke=black stroke-width=2 d='m2400,675h-2400v-47h8v-58h15v-26h28v111h75v-154h30v44h13v14h13v-58h29v15h29v-27h9v-31h59v57h31v44h15v82h78v-154h52v128h12v-140h36v54h16v84h51v-83h16v-41h38v54h12v-28h34v43h24v58h37v-57h17v-84h26v56h28v-56h28v124h100v-84h36v30h24v68h68v-138h52v56h13v-58h35v155 h013 h8v-58h15v-26h28v111h75v-154h30v44h13v14h13v-58h29v15h29v-27h9v-31h59v57h31v44h15v82h78v-154h52v128h12v-140h36v54h16v84h51v-83h16v-41h38v54h12v-28h34v43h24v58h37v-57h17v-84h26v56h28v-56h28v124h100v-84h36v30h24v68h68v-138h52v56h13v-58h35v155 h013' />
  <!Lvl2><path fill=url(#Lvl2wws) class=b2 d=m2400,675h-2400v-94h6v36h16v18h78v-38h24v22h58v-60h22v-24h37v24h21v-41h42v98h78v-80h63v83h19v-80h57v56h21v-20h20v22h78v-24h23v25h18v20h61v-20h22v20h38v21h38v-84h62v-38h59v99h81v-96h60v98h38v-37h60h6v36h16v18h78v-38h24v22h58v-60h22v-24h37v24h21v-41h42v98h78v-80h63v83h19v-80h57v56h21v-20h20v22h78v-24h23v25h18v20h61v-20h22v20h38v21h38v-84h62v-38h59v99h81v-96h60v98h38v-37h60 />
  <!Lvl1><path fill=url(#Lvl1wws) stroke=black stroke-width=2 d=m2400,675h-2400v-109h68v83h52v-43h65v36h27v-70h118v39h30v-121h33v121h28v-41h60v40h36v40h24v-44h30v-36h32v36h33v40h28v-38h88v40h33v-43h84v35h30v-72h93v38h28v-118h64v118h29v-40h87h68v83h52v-43h65v36h27v-70h118v39h30v-121h33v121h28v-41h60v40h36v40h24v-44h30v-36h32v...
edw519
Cut & paste my caveman version below into a new .html file and check it out.

  <svg viewBox='0 0 1200 675' width=1200 height=675 style=background:lightblue>
  <defs>
  <pattern id=Lvl4wws width=12 height=12 patternUnits=userSpaceOnUse>
  <rect width=12 height=12 fill=#5f350d />
  <rect fill=yellow opacity=.7 x=3 y=4 width=4 height=4 />
  </pattern>
  <pattern id=Lvl3wws width=16 height=16 patternUnits=userSpaceOnUse>
  <rect width=16 height=16 fill=#a04e09 />
  <rect fill=yellow opacity=.6 x=3 y=3 width=3 height=8 />
  </pattern>
  <pattern id=Lvl2wws width=20 height=20 patternUnits=userSpaceOnUse>
  <rect width=20 height=20 fill=#b26a28 />
  <rect fill=white stroke=black stroke-width=3 opacity=.6 x=8 y=6 width=8 height=8 />
  </pattern>
  <pattern id=Lvl1wws x=-5 width=30 height=40 patternUnits=userSpaceOnUse>
  <rect width=30 height=40 fill=#ae6a2a />
  <path fill=white stroke=black stroke-width=3 opacity=.6 d=m15,30v-9h14v18h-14v-9h14 />
  </pattern>
  <linearGradient id=goldGradientSky x1=0% y1=0% x2=0% y2=100%>
  <stop offset=0% style=stop-color:orange />
  <stop offset=100% style=stop-color:lightyellow />
  </linearGradient>
  </defs>
  <path fill=url(#goldGradientSky) d=m0,0h2400v675h-2400 />
  <g>
  <!Lvl5><path fill=#222 d=m0,675v-206h15v-35h26v35h9v30h18v-80h30v62h15v-42h24v58h18v12h12v-34h14v-45h22v32h28v24h12v-50h18v14h8v-34h20v20h8v-34h16v50h20v-30h20v20h18v-16h14v44h16v-18h30v18h16v-30h34v32h12v-44h30v54h22v-44h20v26h16v26h10v-58h26v36h8v-22h22v16h16v-30h28v30h30v-52h26v40h10v-20h26v20h20v50h10v-40h20v-40h20v20h30v20h26v-16h20v28h14v12h16v-26h28v-50h15v38h12v30h10v-30h10v-30h14v50h12v-22h18v-58h26v72h12v-26h22v36h16v-46h30v47h16v206m0,0v-206h15v-35h26v35h9v30h18v-80h30v62h15v-42h24v58h18v12h12v-34h14v-45h22v32h28v24h12v-50h18v14h8v-34h20v20h8v-34h16v50h20v-30h20v20h18v-16h14v44h16v-18h30v18h16v-30h34v32h12v-44h30v54h22v-44h20v26h16v26h10v-58h26v36h8v-22h22v16h16v-30h28v30h30v-52h26v40h10v-20h26v20h20v50h10v-40h20v-40h20v20h30v20h26v-16h20v28h14v12h16v-26h28v-50h15v38h12v30h10v-30h10v-30h14v50h12v-22h18v-58h26v72h12v-26h22v36h16v-46h30v47h16v206 />
  <!Lvl4><path fill=url(#Lvl4wws) stroke=black stroke-width=2 d=m2400,675h-2400v-100h16v-74h35v56h21v-40h28v33h12v-25h80v-64h43v24h65v24h70v26h37v-34h35v40h46v-56h34v66h38v-64h26v62h134v-54h35v41h13v-17h80v-50h25v40h78v-40h36v34h47v32h38v-34h44v40h43v34h40h16v-74h35v56h21v-40h28v33h12v-25h80v-64h43v24h65v24h70v26h37v-34h35v40h46v-56h34v66h38v-64h26v62h134v-54h35v41h13v-17h80v-50h25v40h78v-40h36v34h47v32h38v-34h44v40h43v34h40v100 />
  <!Lvl3><path fill=url(#Lvl3wws) stroke=black stroke-width=2 d='m2400,675h-2400v-47h8v-58h15v-26h28v111h75v-154h30v44h13v14h13v-58h29v15h29v-27h9v-31h59v57h31v44h15v82h78v-154h52v128h12v-140h36v54h16v84h51v-83h16v-41h38v54h12v-28h34v43h24v58h37v-57h17v-84h26v56h28v-56h28v124h100v-84h36v30h24v68h68v-138h52v56h13v-58h35v155 h013 h8v-58h15v-26h28v111h75v-154h30v44h13v14h13v-58h29v15h29v-27h9v-31h59v57h31v44h15v82h78v-154h52v128h12v-140h36v54h16v84h51v-83h16v-41h38v54h12v-28h34v43h24v58h37v-57h17v-84h26v56h28v-56h28v124h100v-84h36v30h24v68h68v-138h52v56h13v-58h35v155 h013' />
  <!Lvl2><path fill=url(#Lvl2wws) class=b2 d=m2400,675h-2400v-94h6v36h16v18h78v-38h24v22h58v-60h22v-24h37v24h21v-41h42v98h78v-80h63v83h19v-80h57v56h21v-20h20v22h78v-24h23v25h18v20h61v-20h22v20h38v21h38v-84h62v-38h59v99h81v-96h60v98h38v-37h60h6v36h16v18h78v-38h24v22h58v-60h22v-24h37v24h21v-41h42v98h78v-80h63v83h19v-80h57v56h21v-20h20v22h78v-24h23v25h18v20h61v-20h22v20h38v21h38v-84h62v-38h59v99h81v-96h60v98h38v-37h60 />
  <!Lvl1><path fill=url(#Lvl1wws) stroke=black stroke-width=2 d=m2400,675h-2400v-109h68v83h52v-43h65v36h27v-70h118v39h30v-121h33v121h28v-41h60v40h36v40h24v-44h30v-36h32v36h33v40h28v-38h88v40h33v-43h84v35h30v-...
postalcoder
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

FpUser
love it. It has a mood
rkagerer
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.

ramoz
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.
pan_lid
Reminds me of classic DOS text adventures, but with a modern cyberpunk twist. Love the aesthetic and the clever single-file packaging.
hexley19
Seriously impressive browser tech pushing what's possible in one HTML file. The ASCII art and walking mechanic are brilliant.
Sorrel47
Reminds me of old MUDs, but elevated with a proper walkable city. Super clever use of pure HTML for this whole experience.
[deleted]
(comment deleted)
lenikirilov
Another example when technology can be just used to do cool things, art, and not only be useful (besides beiing a learning experience by the author)
kodoman
I love the way this looks very interesting and impressive. One does wonder if as you keep making it more realistic, does it begin to lose it's ASCII nature a bit and become more like a normal rendered game to look at. I think it looks beautiful as it is at the moment and can not wait to see more of this.
teddyh
This is an ad. Furthemore, what is being sold, for money, is a simple prototype of a basic 3D renderer.
mattgoupil
This was really impressive. Looking at the comments, I didn't realize there was a whole ASCII art underground. I don't want to sound negative at all, but it would have been nice to seem some recognizable letters to drive home that it's ASCII.
Hugsbox
Says it's in one HTML file... well, where? Why post a video if you could just link to it? I don't see a link to it anywhere, and I'm not watching a youtube video to look at an HTML file.