Show HN: LegraJS – Draw using Lego-like brick shapes on Canvas | Hacker News Reader

Show HN: LegraJS – Draw using Lego-like brick shapes on Canvas

legrajs.com

140 pointsshihn27 comments

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.

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

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

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

http://ryanhowerter.net/colors

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

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

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

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

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.

Niiice!

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

Looks very similar to legofy

https://github.com/JuanPotato/Legofy

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.

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

Rasterization + whichever shape you want to draw.

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

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();

Thanks for the input. Next on my list :)

lego + logo

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.

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

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

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

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

btw Legra does the offscreen canvas trick when rendering images, but not when drawing primitives

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.

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

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.

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.

Reply on news.ycombinator.com