6 ms·
Show HN: LegraJS – Draw using Lego-like brick shapes on Canvas
- LiamPa 7y agoLooks very similar to legofy https://github.com/JuanPotato/Legofy https://github.com/JuanPotato/Legofy
- shihn 7y agoYou'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.
- japanoise 7y agoI'm reminded of one of my favorite music videos: https://youtu.be/fTH71AAxXmM https://youtu.be/fTH71AAxXmM
- deleted 7y ago[deleted]
- tantalor 7y agoFor paths and polygons you should just implement the 2d Path API https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende... context.moveTo(x,y); context.lineTo(x,y); context.closePath();
- sweetheart 7y agoLove 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.
- shihn 7y agono it does not, but that would be a nice feature to add.
- ed312 7y 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.
- ullarah 7y agoNot just count the pieces but to limit the colours of the pieces would be great too! http://ryanhowerter.net/colors http://ryanhowerter.net/colors
- WillYouFinish 7y agoI 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 7y agoThat'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 7y agoCan'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 7y agoTrue 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 7y agoOptimality may be a function of effort, but your approach definitely seems like a more engaging approach. It's a cool project, thank you.
- shihn 7y agobtw Legra does the offscreen canvas trick when rendering images, but not when drawing primitives
- simlevesque 7y agoGreat 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.
- esimov 7y agoI've done something like this in Go: https://github.com/esimov/legoizer https://github.com/esimov/legoizer
- ranza 7y agoI also did something like this in JS with video support https://github.com/kirkegaard/legofy https://github.com/kirkegaard/legofy
- marclave 7y agoWhat 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 7y agoIt 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.
- shihn 7y agoHere'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
- mft_ 7y agoCool! 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.
- blzrdnofreespch 7y agoHow 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 7y agoRasterization + 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