10 comments

  • aleyan 1 hour ago
    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

    • agys 22 minutes ago
      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

    • butlike 36 minutes ago
      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.
    • saintfire 1 hour ago
      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.

    • holsta 1 hour ago
      > 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.

  • naet 1 hour ago
    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.
  • SpyCoder77 26 minutes ago
    • yboris 7 minutes ago
      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 :)

    • ChrisArchitect 10 minutes ago
      Welcome. Not a dupe if no discussion after a period of time. Sometimes things just don't get traction. Resubmit is ok.
      • rvz 4 minutes ago
        > Sometimes things just don't get traction. Resubmit is ok.

        More like it was resubmitted a hundred times already.

  • jeffgreco 1 hour ago
    Is the GitHub project the same as the videos? Seems like no.
  • edw519 8 minutes ago
    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-72h93v38h28v-118h64v118h29v-40h87h68v83h52v-43h65v36h27v-70h118v39h30v-121h33v121h28v-41h60v40h36v40h24v-44h30v-36h32v36h33v40h28v-38h88v40h33v-43h84v35h30v-72h93v38h28v-118h64v118h29v-40h87 />
      <animateTransform attributeName='transform' attributeType='XML' type='translate' dur='5s' begin='0' repeatCount='indefinite' values='0,0;-1200,0'  />
      </g>
      </svg>
  • felineflock 2 hours ago
    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?
    • Darkphibre 1 hour ago
      By leveraging characters, you can actually do a form of dithring! See this great interactive blog post: https://alexharri.com/blog/ascii-rendering
      • paavope 1 hour ago
        That was a really, really cool read!
    • wewtyflakes 2 hours ago
      Everything above 127 would be extended ASCII instead of strict ASCII, if that matters.
      • recursive 1 hour ago
        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 1 hour ago
    Wow, that's interesting. It's a good start, and it would be interesting to see how the project develops.
  • supermatt 14 days ago
    This is really nice! is it accessible somewhere to play with?
    • avidruntime 2 hours ago
      The OP's first link is a demo, their second link is the source.
  • keithcarolus 14 days ago
    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.”