[{"data":1,"prerenderedAt":294},["ShallowReactive",2],{"project-21622217":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":41,"post_text":43,"what":44,"said":87,"maker_in_thread":187,"shape":195,"grid":199,"attempts":252,"same_week":257,"maker_shows":226,"maker_hidden":287,"reader_version":288,"card":289},"21622217","LegraJS","Draw using Lego-like brick shapes on Canvas","title","Show HN: LegraJS – Draw using Lego-like brick shapes on Canvas","https:\u002F\u002Flegrajs.com\u002F","legrajs.com","shihn",1574619541,2019,140,27,320,2195,15,"notable","creative","canvas drawing library","library",[24,25,26,27],"canvas","lego","javascript graphics","drawing primitives","curious",0.12,{"positive":31,"neutral":32,"mixed":33,"critical":33},3,9,0,12,{"idea":36,"execution":38,"design":39,"performance":40},{"positive":37,"critical":33},2,{"positive":33,"critical":33},{"positive":33,"critical":33},{"positive":33,"critical":33},[31,33,42,31,33,33,33,33,42,33,33,33,31,33,31,33,33,31,33,31,33,42,33,31,31,33,31],5,null,{"problem":45,"audience":43,"pricing":43,"motivation":54,"time_to_build":43,"stack":65,"openness":86,"stage":86,"team_size":86},{"value":46,"source":47,"evidence":48},"Drawing shapes and images on canvas with a Lego-brick look","inferred",[49,51],{"id":50},"post",{"id":52,"by":11,"text":53},"21622644","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.",{"value":55,"source":56,"evidence":57},"Fun hobby project; goal is drawing primitives for charts, animations and shapes, not just images","maker",[58,61,64],{"id":59,"by":11,"text":60},"21622894","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. :)",{"id":62,"by":11,"text":63},"21623272","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.",{"id":52,"by":11,"text":53},[66,76],{"value":67,"source":47,"evidence":68},"JavaScript",[69,73],{"id":70,"by":71,"text":72},"21622878","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…",{"id":74,"by":11,"text":75},"21624566","Here's a clock made with LegraJS: https:\u002F\u002Flegra-click.glitch.me\u002F Source: https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Flegra-click",{"value":77,"source":56,"evidence":78},"HTML Canvas",[79,83],{"id":80,"by":81,"text":82},"21622883","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…",{"id":84,"by":11,"text":85},"21623883","btw Legra does the offscreen canvas trick when rendering images, but not when drawing primitives","unknown",{"praise":88,"objections":110,"requests":121,"questions":149,"alternatives":171},[89,102],{"value":90,"source":91,"evidence":92},"Cool and neat project","commenter",[93,94,98],{"id":70,"by":71,"text":72},{"id":95,"by":96,"text":97},"21625350","esimov","Niiice!",{"id":99,"by":100,"text":101},"21625321","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.",{"value":103,"source":91,"evidence":104},"Idea of combining with physical Lego output",[105,106],{"id":70,"by":71,"text":72},{"id":107,"by":108,"text":109},"21623102","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…",[111],{"value":112,"source":91,"evidence":113},"Similar to existing legofy tools",[114,118],{"id":115,"by":116,"text":117},"21622618","LiamPa","Looks very similar to legofy https:\u002F\u002Fgithub.com\u002FJuanPotato\u002FLegofy",{"id":119,"by":96,"text":120},"21623063","I've done something like this in Go: https:\u002F\u002Fgithub.com\u002Fesimov\u002Flegoizer",[122,130,134,141],{"value":123,"source":91,"evidence":124},"Constrain colours to real Lego bricks",[125,129],{"id":126,"by":127,"text":128},"21624963","ullarah","Not just count the pieces but to limit the colours of the pieces would be great too! http:\u002F\u002Fryanhowerter.net\u002Fcolors",{"id":99,"by":100,"text":101},{"value":131,"source":91,"evidence":132},"Count pieces needed to build a render",[133],{"id":70,"by":71,"text":72},{"value":135,"source":91,"evidence":136},"Select brick type for a rectangle fill",[137],{"id":138,"by":139,"text":140},"21623041","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.",{"value":142,"source":91,"evidence":143},"Implement the Canvas 2D path API",[144,148],{"id":145,"by":146,"text":147},"21622837","tantalor","For paths and polygons you should just implement the 2d Path API https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D#Paths ``` context.moveTo(x,y);…",{"id":80,"by":81,"text":82},[150,161],{"value":151,"source":91,"evidence":152},"How to create a graphics library like this",[153,157],{"id":154,"by":155,"text":156},"21625908","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",{"id":158,"by":159,"text":160},"21626397","kaoD","Rasterization + whichever shape you want to draw. E.g. \"rasterization line\" leads you to https:\u002F\u002Fen.m.wikipedia.org\u002Fwiki\u002FBresenham%27s_line_algorithm",{"value":162,"source":91,"evidence":163},"Performance on larger canvases and redraws",[164,168],{"id":165,"by":166,"text":167},"21623097","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?…",{"id":169,"by":11,"text":170},"21623259","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.…",[172,176,180],{"value":173,"source":91,"evidence":174},"legofy (JuanPotato)",[175],{"id":115,"by":116,"text":117},{"value":177,"source":91,"evidence":178},"legoizer (Go)",[179],{"id":119,"by":96,"text":120},{"value":181,"source":91,"evidence":182},"kirkegaard legofy (JS with video)",[183],{"id":184,"by":185,"text":186},"21623101","ranza","I also did something like this in JS with video support https:\u002F\u002Fgithub.com\u002Fkirkegaard\u002Flegofy",{"comments":32,"answered":188,"key":189},4,[190,193,194],{"id":191,"text":192},"21622882","no it does not, but that would be a nice feature to add.",{"id":74,"text":75},{"id":62,"text":63},{"commenters":196,"max_depth":42,"maker_replies":32,"first_comment_mins":197,"lifespan_hours":198},17,62,14,[200,202,204,206,207,209,211,212,214,216,219,221,222,224,225,228,230,233,235,236,239,241,243,244,247,249,250],[70,33,31,201,71,33],"project\u002Fneutral\u002Fidea",[191,33,33,201,11,203],1,[107,33,42,205,108,33],"project\u002Fpositive\u002Fidea",[126,33,31,201,127,33],[74,203,33,208,11,203],"project\u002Fpositive\u002Fnone",[119,37,33,210,96,33],"other\u002Fneutral\u002Fnone",[184,37,33,210,185,33],[62,37,33,213,11,203],"maker\u002Fpositive\u002Fidea",[95,37,42,215,96,33],"maker\u002Fpositive\u002Fnone",[217,31,33,210,218,33],"21622825","japanoise",[115,188,33,220,116,33],"commenter\u002Fneutral\u002Fidea",[52,188,33,201,11,203],[154,42,31,223,155,33],"maker\u002Fneutral\u002Fnone",[158,42,33,210,159,33],[145,226,31,227,146,33],6,"project\u002Fneutral\u002Fexecution",[229,226,33,227,11,203],"21622841",[231,226,33,210,232,33],"21623440","agumonkey",[80,234,31,201,81,33],7,[59,234,33,227,11,203],[237,234,31,227,238,33],"21623807","pacaro",[240,234,33,227,11,203],"21623879",[242,234,42,213,238,33],"21624071",[84,234,33,227,11,203],[99,245,31,246,100,33],8,"project\u002Fneutral\u002Fdesign",[165,32,31,248,166,33],"project\u002Fneutral\u002Fperformance",[169,32,33,248,11,203],[138,251,31,246,139,33],10,[253,256],{"id":254,"t":255,"points":42,"comments":33},"21587743",1574279504,{"id":4,"t":12,"points":14,"comments":15},[258,263,268,273,277,282],{"id":259,"name":260,"points":261,"category":262},"21639525","Coscreen.co",404,"dev_tools",{"id":264,"name":265,"points":266,"category":267},"21648096","AnonAddy",393,"productivity",{"id":269,"name":270,"points":271,"category":272},"21617016","Hacker News Title Edit Tracker",366,"web_saas",{"id":274,"name":275,"points":276,"category":262},"21639066","patchbay.pub",362,{"id":278,"name":279,"points":280,"category":281},"21594436","tamagotchi",256,"games",{"id":283,"name":284,"points":285,"category":286},"21627714","IMGZ",248,"infrastructure",false,"v2",{"id":290,"name":5,"line":6,"ai":287,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":291,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":292,"url":9,"mix":293,"praise":90,"objection":112,"sub":21},21622217,[24,25,26,27],"305300005000303003030503303",[31,32,33,33],1794036583330]