Show HN: A dot matrix rendered using Braille characters | Hacker News Reader

Show HN: A dot matrix rendered using Braille characters

github.com

18 pointstimfi25 comments

I made dotmatrix over the weekend and I thought some you might enjoying something like it. The library is written in pure python without any dependencies. As of now I've included some simple drawing functions using Bresenham's line/circle/AA ellipse algorithms and even a function for Bézier curves with arbitrary amounts of control points using De Casteljau's algorithm.

This is pretty cool!

It reminds me of a similar project that’s been around called drawille [0] which is pretty nifty.

[0]: https://github.com/asciimoo/drawille

I thought I remembered seeing something similar a while back... This explains it! Thanks for the info. :D

I also wrote a similar one:

http://github.com/dheera/python-termgraphics

For a bitmap equivalent, check out my own DotArt: https://albright.pro/dotart/

I'm not a JS expert so there's probably room for improvement/modernization code-wise but I think it works pretty well and I'm happy with the results.

Nice idea. I'd recommend implementing a demo image on the site. Not everybody will go through the trouble of uploading their own file to test out the project.

Yeah, once upon a time I had an idea of having a drop-down menu which would have four or five sample images you could select from to instantly load them into place. I can't remember why I didn't end up implementing that. But unless a new client drops out of the sky in the next few days, I'm going to have some spare time later this month, so perhaps I'll take your comment as motivation to hack that into place. :)

Very nice! I was thinking of adding something akin to this as well, at least in terms of image dithering. :)

But I'm still torn as the well behaved python programmer in me wants to add pillow as a dependency for that and the not so well behaved one wants *0* dependencies. I think I'll add it as an extra-dep when get around to it.

Yeah, I get it - I made a point of building this with no jQuery or other JS dependencies just for more experience in writing "pure" vanilla JS. But of course one of the ways I can get away with that is that the browser already gives me a huge "standard library" of sorts for doing hard things like reading compressed image formats…

Though python has a massive set of "included batteries", simple images aren't included in those. This makes me very sad sometimes and I usually just fall back to simple BMP files... :/

A similar library I wrote: https://github.com/dheera/python-termgraphics

I use it in: https://github.com/dheera/rossshow

Very cool! :D

I also thought about adding color support via ANSI escape sequences, but for this project I decided against using them to keep things simple a widely accessible.

Reminds me somewhat of Teletext graphics, whose character set included 2x3-cell blocks that could be displayed either joined up or separated.

https://channel26.uk/teletext-design/

Similar characters actually exist in unicode as well irrc.

...On a side note, I think you kickstarted me down the path of abstracting the drawing algorithms and implicit matrix protocol out, just to make it easier to implement this with different character sets. One set for example could be [U+2596 .. U+259F, U+2589], so basically just a 2x2 grid per character.

Looks cool. Have you had feedback from people using braille displays? Can they understand these images or do they look like garbled text to them because it is using letter symbols without their actual meaning?

Sadly (or luckily?) I don't know anyone who has/uses/has to use a braille display. But I think that if the "reader"/viewer doesn't know from the get go that the following characters aren't text it'll for sure throw them through a loop... :'D

Most braille displays have only one line of output so a 2d image probably would not "come through" properly.

Please note: I neither can read or braille nor have I have seen a braille display so take what I say with a grain of salt.

Nice!, in Julia there is a library to do plots with a similar technique, https://github.com/Evizero/UnicodePlots.jl

the example in the readme doesn't render correctly for me (Chrome on Windows 10). is this an issue with the font or what?

Yeah, I've noticed that a lot of "monospace" fonts don't actually use the same character width for all characters... What makes it even worse is that the "monospace" font used by GitHub is one of those. It screws me over from time to time as I like to format things nicely and use a lot of unicode...

I think I will need to add some images to the readme as well, just make it looks less wonky. :(

Github uses a system font stack, this is the one for code blocks: `ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace`.

I don't know if there are better monospace ones builtin on windows 10 that they could add to the stack.

Not to get snarky (and certainly not at you, thanks for the info ;) ) but Microsoft owns Windows 10 as well as GitHub. If anyone could add a better default monospace font to the mix it would be them... :D

Copy-pasted the example into Notepad and it still looks warped. Tried to align them adding three spaces to the middle of each line except the first and last, and most rows still don't align. Changed the font from Consolas to Courier to Courier New, and they still don't align.

Maybe Unicode Braille has issues with Windows monospace fonts? iOS and Linux display them aligned.

It works for me using Pragamata Pro (my trusty default) and some preinstalled ones (at least mac) those being PT Mono, Spot Mono, and Andale Mono. It shouldn't be an issue as long as the "empty braille character", i.e. U+2800, doesn't get kerned to hell and back by the font.

I've added some images and a disclaimer to the readme. In case you still want to see the proper results. ;)

Reply on news.ycombinator.com