TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

140 pointsby shihnover 5 years ago

11 comments

sweetheartover 5 years ago
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.
评论 #21623102 未加载
评论 #21624963 未加载
评论 #21622882 未加载
shihnover 5 years ago
Here&#x27;s a clock made with LegraJS: <a href="https:&#x2F;&#x2F;legra-click.glitch.me&#x2F;" rel="nofollow">https:&#x2F;&#x2F;legra-click.glitch.me&#x2F;</a><p>Source: <a href="https:&#x2F;&#x2F;glitch.com&#x2F;edit&#x2F;#!&#x2F;legra-click" rel="nofollow">https:&#x2F;&#x2F;glitch.com&#x2F;edit&#x2F;#!&#x2F;legra-click</a>
esimovover 5 years ago
I&#x27;ve done something like this in Go: <a href="https:&#x2F;&#x2F;github.com&#x2F;esimov&#x2F;legoizer" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;esimov&#x2F;legoizer</a>
评论 #21623101 未加载
japanoiseover 5 years ago
I&#x27;m reminded of one of my favorite music videos: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;fTH71AAxXmM" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;fTH71AAxXmM</a>
评论 #21623681 未加载
LiamPaover 5 years ago
Looks very similar to legofy<p><a href="https:&#x2F;&#x2F;github.com&#x2F;JuanPotato&#x2F;Legofy" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;JuanPotato&#x2F;Legofy</a>
评论 #21622644 未加载
blzrdnofreespchover 5 years ago
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?<p>Very cool btw
评论 #21626397 未加载
tantalorover 5 years ago
For paths and polygons you should just implement the 2d Path API<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;CanvasRenderingContext2D#Paths" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;CanvasRende...</a><p><pre><code> context.moveTo(x,y); context.lineTo(x,y); context.closePath();</code></pre>
评论 #21622841 未加载
评论 #21623440 未加载
WillYouFinishover 5 years ago
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.
评论 #21622894 未加载
mft_over 5 years 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.
marclaveover 5 years ago
What would the optimizations be for a larger canvas?<p>Does it redraw the whole canvas when an update is made* to a single line when there are several other lines on the canvas?<p>*edit for spelling mistakes
评论 #21623259 未加载
simlevesqueover 5 years 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.