Show HN: A dot matrix rendered using Braille characters

by timfi • 5 years ago

18 25 5 years ago

timfi11• 5 years ago

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.

adamrezich• 5 years ago

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

timfi11• 5 years ago

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. :(

SahAssar• 5 years ago

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.

ASalazarMX• 5 years ago

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.

timfi11• 5 years ago

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.

timfi11• 5 years ago

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

Cyberdog3• 5 years ago

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.

nomagicbullet• 5 years ago

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.

Cyberdog3• 5 years ago

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. :)

timfi11• 5 years ago

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.

Cyberdog3• 5 years ago

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…

romeovs• 5 years ago

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

timfi11• 5 years ago

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

dheera2• 5 years ago

I also wrote a similar one:

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

danellis• 5 years ago

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/

timfi11• 5 years ago

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.

dheera2• 5 years ago

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

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

timfi11• 5 years ago

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.

_Microft• 5 years ago

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?

timfi11• 5 years ago

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

blendergeek• 5 years ago

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.

longemen3000• 5 years ago

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

Show HN: A dot matrix rendered using Braille characters

Related Stories