Show HN: LegraJS – Draw using Lego-like brick shapes on Canvas (opens in new tab)

(legrajs.com)

140 pointsshihn6y ago27 comments

27 comments

24 comments · 11 top-level

sweetheart6y ago· 3 in thread

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.

ed3126y ago

+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.

ullarah6y ago

Not just count the pieces but to limit the colours of the pieces would be great too!

http://ryanhowerter.net/colors

shihnOP6y ago

no it does not, but that would be a nice feature to add.

esimov6y ago· 3 in thread

I've done something like this in Go: https://github.com/esimov/legoizer

ranza6y ago

I also did something like this in JS with video support https://github.com/kirkegaard/legofy

shihnOP6y ago

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.

esimov6y ago

Niiice!

tantalor6y ago· 2 in thread

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

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...

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

shihnOP6y ago

Thanks for the input. Next on my list :)

agumonkey6y ago

lego + logo

WillYouFinish6y ago· 2 in thread

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.

shihnOP6y ago

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

pacaro6y ago

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 ¯\_(ツ)_/¯

2 more replies

LiamPa6y ago· 1 in thread

Looks very similar to legofy

https://github.com/JuanPotato/Legofy

shihnOP6y ago

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.

blzrdnofreespch6y ago· 1 in thread

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

kaoD6y ago

Rasterization + whichever shape you want to draw.

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

marclave6y ago· 1 in thread

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

shihnOP6y ago

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.

shihnOP6y ago

Here's a clock made with LegraJS: https://legra-click.glitch.me/

Source: https://glitch.com/edit/#!/legra-click

japanoise6y ago

I'm reminded of one of my favorite music videos: https://youtu.be/fTH71AAxXmM

1 more reply

mft_6y ago

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.

simlevesque6y ago

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.

j / k navigate · click thread line to collapse

27 comments

24 comments · 11 top-level

sweetheart6y ago· 3 in thread

ed3126y ago

ullarah6y ago

Not just count the pieces but to limit the colours of the pieces would be great too!

http://ryanhowerter.net/colors

shihnOP6y ago

no it does not, but that would be a nice feature to add.

esimov6y ago· 3 in thread

I've done something like this in Go: https://github.com/esimov/legoizer

ranza6y ago

I also did something like this in JS with video support https://github.com/kirkegaard/legofy

shihnOP6y ago

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.

esimov6y ago

Niiice!

tantalor6y ago· 2 in thread

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

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...

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

shihnOP6y ago

Thanks for the input. Next on my list :)

agumonkey6y ago

lego + logo

WillYouFinish6y ago· 2 in thread

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.

shihnOP6y ago

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

pacaro6y ago

2 more replies

LiamPa6y ago· 1 in thread

Looks very similar to legofy

https://github.com/JuanPotato/Legofy

shihnOP6y ago

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.

blzrdnofreespch6y ago· 1 in thread

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

kaoD6y ago

Rasterization + whichever shape you want to draw.

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

marclave6y ago· 1 in thread

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

shihnOP6y ago

Here's a clock made with LegraJS: https://legra-click.glitch.me/

Source: https://glitch.com/edit/#!/legra-click

japanoise6y ago

I'm reminded of one of my favorite music videos: https://youtu.be/fTH71AAxXmM

1 more reply

mft_6y ago

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.

simlevesque6y ago

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.

j / k navigate · click thread line to collapse