
Show HN: LegraJS – Draw using Lego-like brick shapes on Canvas - shihn
https://legrajs.com/
======
sweetheart
Love these types of projects! Very neat. Does the API use actual LEGO pieces?
If so, could you render something and output a count of the pieces necessary
so as to actually build it IRL? That’d be slick.

~~~
ed312
+1 for this feature! It would be pretty neat to combine this with a service
that prints a 2D image using physical lego bricks. This is nerdy and silly,
but I could imagine "printing" a successful fortress in DF this way (or
another sliced 3D view.

------
shihn
Here's a clock made with LegraJS: [https://legra-
click.glitch.me/](https://legra-click.glitch.me/)

Source: [https://glitch.com/edit/#!/legra-
click](https://glitch.com/edit/#!/legra-click)

------
esimov
I've done something like this in Go:
[https://github.com/esimov/legoizer](https://github.com/esimov/legoizer)

~~~
ranza
I also did something like this in JS with video support
[https://github.com/kirkegaard/legofy](https://github.com/kirkegaard/legofy)

~~~
shihn
These are really cool! The goal of legra was to provide primitives though and
not just for images so one can draw dynamic, charts, shapes, animations.

------
japanoise
I'm reminded of one of my favorite music videos:
[https://youtu.be/fTH71AAxXmM](https://youtu.be/fTH71AAxXmM)

------
LiamPa
Looks very similar to legofy

[https://github.com/JuanPotato/Legofy](https://github.com/JuanPotato/Legofy)

~~~
shihn
You're right. The goal of Legra is to provide all basic drawing primitives not
just image rendering. So one can create dynamic charts, animations etc.

------
blzrdnofreespch
How do you create something like this? I.e. what are the keywords I’d look for
if I wanted to create my own graphics library from scratch like this?

Very cool btw

~~~
kaoD
Rasterization + whichever shape you want to draw.

E.g. "rasterization line" leads you to
[https://en.m.wikipedia.org/wiki/Bresenham%27s_line_algorithm](https://en.m.wikipedia.org/wiki/Bresenham%27s_line_algorithm)

------
tantalor
For paths and polygons you should just implement the 2d Path API

[https://developer.mozilla.org/en-
US/docs/Web/API/CanvasRende...](https://developer.mozilla.org/en-
US/docs/Web/API/CanvasRenderingContext2D#Paths)

    
    
      context.moveTo(x,y);
      context.lineTo(x,y);
      context.closePath();

~~~
shihn
Thanks for the input. Next on my list :)

------
WillYouFinish
I wonder why no one, who implements some kind of JavaScript graphics library
like this one, just mimics the Canvas 2D context API, so you could just drop
this into your current application.

~~~
shihn
That's the goal. Missing the 2d path api mainly. There are some interesting
technical limitation for fill vs stroke. But for a fun hobby project, only
limited time. :)

~~~
pacaro
Can't you just replicate the entire 2d context api and pass through to an
appropriately scaled (1px per block) offscreen canvas? Then pull the image
from that and legoify it up to the display scale. That seems like a lot of
unfun boilerplate to write, but ultimately an easier way to implement this,
which would give all the gnarly parts of canvas without having to pull in
external libraries ¯\\_(ツ)_/¯

~~~
shihn
True but having raw parts would give it more flexibility when animating or
changing sections of the image. Especially when the canvas size is large, it
won't be as optimal

~~~
pacaro
Optimality may be a function of effort, but your approach definitely seems
like a more engaging approach. It's a cool project, thank you.

------
mft_
Cool! For the image rendering, could you have a setting to constrain the
colours used to currently-available Lego bricks? You might also offer
dithering for better image matching.

------
marclave
What would the optimizations be for a larger canvas?

Does it redraw the whole canvas when an update is made* to a single line when
there are several other lines on the canvas?

*edit for spelling mistakes

~~~
shihn
It doesn't redraw the whole canvas. The optimizations are really needed when
'filling' a shape. If you draw a large polygon, it may take a little longer to
fill it with bricks. Optimizations can be made by using WebGL instead.

------
simlevesque
Great stuff. It would be awesome if you could select a brick type for a
rectangle. You could make a 6x6 square and choose to fill it with 2x6 or 1x6
bricks.

