ASCII Silhouettify | Hacker News Reader

ASCII Silhouettify

meatfighter.com

539 pointsthunderbong70 comments

Open articleView on HN

Coolest page on the site: https://meatfighter.com/ascii-silhouettify/color-gallery.htm...

The Wendy's logo is slightly horrifying

https://imgur.com/a/3eebJZS for people who don't want to scroll

They're in alphabetical order, for anyone wanting to hop around.

Whoa worth scrolling down for

Page is invalid because it does not include the Mastodon logo.

Oh, the Z one is very clever.

Almost gives you another perspective in to icon graphic design.

You mean the Zorin OS logo?

I made a similar tool (for making game sprites that can be embedded directly in code):

https://memalign.github.io/m/pceimage/index.html

Works on the web and colorized ASCII output can be edited. It can be a bit fiddly though: need to manually turn off Wobble and adjust the pixel sampling size to get a good result.

That's really fun. I love it! One recommendation: it might be nice to add a mode where it doesn't wobble, but retains the cuteness that results from thickening and rounding corners.

If you love ASCII-related art then I'm sure you'll like this animated ASCII tool (GIF to ASCII):

https://www.gifcii.fun

(full disclosure: I made it)

For someone who loves gifs this is really fun.

It would be cool if you could save it somehow, maybe as another gif or video.

I definitely want to see the ability to save it as a gift so that I can reupload it and do it again. And again. And again...

this is amazing, thank you

Woah, this is very _fun_!

The web version never finishes (Chromium-based browser), but the CLI version works.

https://meatfighter.com/ascii-silhouettify/spa/index.html#/

Obligatory pandering:

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@T@@@@L@@@@@@@@@@@Wg@@@@/@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@\@@@@L@@@@@@@@@DJ@@@@'@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@\@@@@\@@@@@@@Dj@@@@,@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@'@@@@\@@@@@@{@@@@,@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@'@@@@\@@@WJ@@@@/@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@,@@@@,@DJ@@@@/@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@\@@@@\/@@@W/@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@L@@@@@@@Pj@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@LQ@@@@PA@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@ @@@@[@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@ @@@@[@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@ @@@@[@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@ @@@@[@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@ @@@@[@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@ @@@@[@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@g
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@N

Great job reminds me of Telnet Matrix but with colour :) (Edit also just found this https://ascii.theater/ )

I wrote something similar a few years ago for a retro computer image converter using a fixed font from that computer, it also did dithering prior to character conversion as it resulted in finer gradients for photos.

https://github.com/KodeMunkie/imagetozxspec/blob/master/src/...

'What has been, it is what will be, And what has been done, it is what will be done. So there is nothing new under the sun.'

Nicely done. We used to print birthday banners and pictures using EBCDIC & ASCII on continuous-paper band- then dot-matrix printers, in a very similar fashion, recognizing the 'density' of characters, once printed.

There's going to be a lot of editing to /etc/motd and/or /etc/issue today!

Super cool!!

I did a similar thing with a wobbly function moving in real time

https://piter-genuary2024.netlify.app/genuary9/

Nice.

I wonder if you could do something creepy by starting with a standard log tail output and then slowly introducing more and more visible patterns before, I dunno, a scary face appearing out of the text.

There they are again with their npm. Great project but why? What happened to a normal install...

What alternative do you propose? NPM works the same way everywhere; there is no other package manager that is as crossplatform and ubiquitous as NPM.

A standalone archive packaged with all dependencies.

Installing yet another language package manager (not to mention having to navigate all the anti-features like telemetry they seem to come with these days) is a major pain in the ass. Not everyone is a javascript developer.

Then there is also the online requirement that comes with those package managers. Not all system have or should have an internet connection.

That would be a very large archive, unless you used a compiled language, and it wouldn't be cross platform.

Good - incentive to strip down the dependency tree to be more resonable.

Also, even a huge archive would be preferrable to not having a standalone archive.

Tell me which method you mean by "normal install" and I'll tell you the problem.

You don’t need to install it at all. Just run it via npx.

Yeah, what happened to it. Or not happened. I npm/yarn link my own cli repos everywhere because setting up anything else takes hours and is a mess. I even develop python scripts with `nodemon main.py` (lol) because only n-guys know what people need, it seems.

I'll still use https://asciiflow.com/# over figma

Very cool stuff! I wrote something vaguely similar recently that displays images in the terminal using Unicode block elements and 24 bit ANSI colors, but I just assume two pixel per character. I support scaling and animated GIFs: https://github.com/panzi/ansi-img#readme

But those character based logos somehow look more impressive. My thing just looks low-res. XD

Previously : http://caca.zoy.org/wiki/libcaca Even earlier : https://aa-project.sourceforge.net/aalib/

Slightly different goals - those focus on reproducing arbitrary images while this one focuses on clean vector art outlines.

oooh, this is timely. I'm working on a blogging service where you can set ASCII art as its home page header at https://lmno.lol

I was delited to find a figlet js port at https://github.com/patorjk/figlet.js, which I use to generate default headers for new blogs. You can see it on my blog https://lmno.lol/alvaro or new ones like https://lmno.lol/ivyink and https://lmno.lol/stormsprite.

Looking forward to playing with silhouettify and other suggestions in comments.

Those ascii art headers don't look correct on my phone. I'm using Firefox on Android, so that might only affect a limited group of people. But I think it should just be working with a <pre> tag and a monospace font, right?

Ooh, thanks for reporting that! Looking into it. It should look something like this https://imgur.com/a/V55N1f1 (Safari/iOS).

Same here. Brave on android

awesome algorithm, curved features seem to be perfectly reproduced by each ASCII character density and geometry.

Should have backslashes in lower left and upper right quadrants. Also apostrophe instead of period in lower half.

                        _,
                   ,<g g__
             _ _ @ %g[   @
         ,   @ ]P@ @_) "
  g"" ,*'g   @ %r"
  @p  "@ @ "
  @Lm

I had to cheat and look at the examples page -- it's part of the Dr. Pepper logo.

EaJd8S ?

The farther away from your computer you stand, the clearer it becomes. It might help knowing it's a small part of a company logo on the examples page.

"Est. 1885" is what it looks like when scaling this page down to 10%.

A word to the site operator: the examples page is not rendering in a monospaced font for me (iOS with lockdown enabled), perhaps try including a safe css fallback monospaced font?

Funny, because just one day ago we had:

https://news.ycombinator.com/item?id=40598629

This is awesome. I love ASCII (and ANSI) art, but recently have been working on creating forms for Space Station 14. Sadly, SS14 does not use a monospaced font for papers.

I have been using ASCGEN2, which lets me specify a font, but this seems much nicer. Does anyone know if there's something similar that lets you specify a font and try to find the best fit?

There’s always stuff these converters don’t do well. Check out ascii art for the past 30 years at the 16 colors archive: https://16colo.rs/

This is really neat. Have always wondered how these work under the hood / the algorithm behind them.

Would love a web version that's easily usable though; as much as I live in the terminal, just too much of a mental burden installing a new package.

> Would love a web version that's easily usable though; as much as I live in the terminal, just too much of a mental burden installing a new package.

The link is above the fold: https://meatfighter.com/ascii-silhouettify/spa/index.html#/

Oh amazing, no idea how I missed that green button LOL. Was too excited about the details.

It’s nice how / forms a neat edge on parts of the Disney logo. I imagine that effect must be sensitive to grid alignment. It would be helpful to have a live preview for choosing the most aesthetically pleasing alignment.

I wondered about alignment too. The homepage mentions that it tries various shifted grids and picks the best one, I guess based on some metrics of best fit.

Back in my day we had to print this out on lined paper and it was snoopy and playboy centerfolds, and no color for miles around.

This. I walked into the computer room with my mom when I was a little kid. There was a dude printing out a pinup and taking pictures of it as the lines fed. My first exposure to porn.

Brilliant work, this problem has been solved before, but in this case, it seems to take it a little further in terms of quality.

feels like an 80s/90s version of what future tech companies etc would look like with all those logos

I have the 80's feel too...

but it feels to me like an 80's version of a unix app that needed plain ascii because it couldn't copy the PC line drawing characters, maybe like this (random example):

https://i.stack.imgur.com/0sRMM.jpg

How would these images look if each character was a pixel? Worse?

Definitely worse because not every character maps to a pixel. The use of different characters is designed to represent spaces that have groupings of different coloured pixels in different configurations.

You could try to output everything using the ASCII block character and that would give you a close approximation.

Did it get the hug of death? It's taking forever…

absolutely cool stuff!

if we hackers have an aesthetic, it’s ascii and demo scene. truly beautiful things we can be proud of

Let’s not forget phosphor green on black, as standard-borne primarily by jwz’s website.

On stock rPi5 running this takes > 3 seconds. Three seconds to render 370 x 370, 8-bit/color RGBA image to ASCII on a 2.4GHz CPU. And this is my lead-in to rant about neofetch, which takes about 0.2 seconds to run on the same Pi (see below), which would also be the time it would slow down opening a shell should I put neofetch into my .profile. Lastly, it takes cat to cat output of neofetch to /dev/null about ~0.01 seconds, which also is the time that neofetch should probably take to run (and really, this tool too).

  $ time ascii-silhouettify -i neofetch-1.png > /dev/null
  real 0m1.817s
  user 0m3.541s
  sys 0m0.273s
  $ time neofetch > out.txt
  real 0m0.192s
  user 0m0.118s
  sys 0m0.079s
  $ time cat out.txt > time
  real 0m0.001s
  user 0m0.001s
  sys 0m0.000s

Surely the use case for this tool is to precompile your image into ASCII and then just output that on every shell start up, right? There’s no reason to convert the image every time.

It could be fun for realtime

I would assume that performance wasn't the prime concern, but rather the accuracy/appearance of the generated image. Most people aren't putting this in their shell startup, just as most people aren't putting an ffmpeg encode command in their shell startup.

And I would assume neofetch is relatively slow because getting some of the system information is relatively slow. e.g. to get the GPU name it does "lspci -mm":

  % time lspci -mm >/dev/null
  lspci -mm > /dev/null  0.03s user 0.03s system 2% cpu 2.993 total
  % time lspci -mm >/dev/null
  lspci -mm > /dev/null  0.03s user 0.01s system 76% cpu 0.053 total

Guess it's faster that second time due to kernel cache or whatnot, but 50ms is still fairly slow. And that's only the GPU.

The algorithm involved is actually very hefty: for each cell of a 9px by 15px grid over the image, compare each pixel of the cell to its equivalent pixel in each of the 95 ascii characters. To solve for optimal grid alignment, it repeats this for each of the 9x15 possible positionings of the image under the grid.

It's a Node application, I don't know why you expected high performance

Reply on news.ycombinator.com