[{"data":1,"prerenderedAt":535},["ShallowReactive",2],{"project-16571827":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":29,"sentiment":30,"stance_mix":31,"scored_comments":35,"aspects":36,"strip":44,"post_text":47,"what":48,"said":84,"maker_in_thread":225,"shape":238,"grid":242,"attempts":492,"same_week":497,"maker_shows":34,"maker_hidden":527,"reader_version":528,"card":529},"16571827","RoughJS","Create hand-drawn graphics using JavaScript","title","Show HN: RoughJS – Create hand-drawn graphics using JavaScript","http:\u002F\u002Froughjs.com\u002F","roughjs.com","shihn",1520890097,2018,1087,92,2,2155,1,"legend","languages","graphics library","library",[24,25,26,27,28],"hand-drawn graphics","javascript","canvas","svg","sketch style","mixed",0.352,{"positive":32,"neutral":33,"mixed":18,"critical":34},25,22,6,54,{"design":37,"idea":38,"performance":40,"execution":42},{"positive":34,"critical":18},{"positive":39,"critical":18},10,{"positive":41,"critical":41},0,{"positive":16,"critical":43},4,[45,46,46,45,45,46,46,46,18,45,45,41,41,41,45,46,18,45,46,46,46,41,46,18,45,45,46,41,45,41,41,46,46,46,18,46,45,41,46,46],3,5,null,{"problem":49,"audience":47,"pricing":47,"motivation":55,"time_to_build":47,"stack":62,"openness":81,"stage":82,"team_size":83},{"value":50,"source":51,"evidence":52},"Drawing hand-drawn style graphics in JavaScript","inferred",[53],{"id":54},"post",{"value":56,"source":57,"evidence":58},"Fun side project with no real use case in mind","maker",[59],{"id":60,"by":11,"text":61},"16573451","Thanks. I'm a bit surprised by the reception actually. It was just a fun side project with no real use case in mind.",[63,67,75],{"value":64,"source":51,"evidence":65},"JavaScript",[66],{"id":54},{"value":68,"source":69,"evidence":70},"Canvas","commenter",[71],{"id":72,"by":73,"text":74},"16572718","bcjordan","If you repeatedly clear canvas\u002Fdraw with a setInterval of ~100-200ms, looks kind of like the hand-drawn un-stable lines art style of Squigglevision (Dr. Katz \u002F Science Court) :)…",{"value":76,"source":57,"evidence":77},"SVG paths",[78],{"id":79,"by":11,"text":80},"16572190","It's doable - It already parses SVG paths https:\u002F\u002Fgithub.com\u002Fpshihn\u002Frough\u002Fwiki#path-d--options","open_source","launched","unknown",{"praise":85,"objections":125,"requests":155,"questions":177,"alternatives":192},[86,105,116],{"value":87,"source":69,"evidence":88},"Fun and delightful hand-drawn look",[89,93,97,101],{"id":90,"by":91,"text":92},"16573025","CodeCube","This is just lovely :) I guess I don't really have much to add, other than to say you've delighted me with this",{"id":94,"by":95,"text":96},"16573761","yantrams","This has made me so much happy. Thank you. Brilliant stuff. I've been looking for something that does this and have just started having fun with this problem using P5.js and…",{"id":98,"by":99,"text":100},"16574011","FromTheId","Aw man I love this. Thank you!",{"id":102,"by":103,"text":104},"16574147","ashleymarsh","This is fantastic!",{"value":106,"source":69,"evidence":107},"Useful for education and presentations",[108,112],{"id":109,"by":110,"text":111},"16574980","petecooper","Not joking at all, I assure you! Primary use case is for education\u002Ftraining materials where a flat or prescribed style is not desirable, and also because despite my girlfriend…",{"id":113,"by":114,"text":115},"16582031","daleco","That’s great, I’ve been looking for a Sketch 3 plugin that was doing that for a while (it doesn’t exist yet) It could potentially be wrapped in a plugin. When presenting designs,…",{"value":117,"source":69,"evidence":118},"Examples like D3 bar chart and maps",[119,122],{"id":120,"by":11,"text":121},"16572284","I drew a map with RoughJS and d3 (3rd example ->)https:\u002F\u002Fgithub.com\u002Fpshihn\u002Frough\u002Fwiki\u002FExamples I'm sure Charts and all would be easy too.",{"id":123,"by":11,"text":124},"16572506","Here- took a quick stab at it: http:\u002F\u002Froughjs.com\u002Fexamples\u002Fbar-chart.html",[126,141,148],{"value":127,"source":69,"evidence":128},"Does not work in Firefox at the time",[129,133,137],{"id":130,"by":131,"text":132},"16573399","chrismorgan","This is not working in Firefox. Not sure why.",{"id":134,"by":135,"text":136},"16574952","unwind","FYI: Blank page (with title text) in Firefox (58.0.2, 64-bit, Windows).",{"id":138,"by":139,"text":140},"16575052","piyush_soni","Yup. Only worked in Chrome for me too.",{"value":142,"source":69,"evidence":143},"Rendering too much randomness can be dizzying",[144],{"id":145,"by":146,"text":147},"16575004","ygra","Quite headache-inducing. To me at least. There seems to be quite a challenge to make something look hand-drawn and also not change it so much on every drawn frame that you don't…",{"value":149,"source":69,"evidence":150},"Hatching misaligned on complex SVG maps",[151],{"id":152,"by":153,"text":154},"16572467","chestervonwinch","Cool. I notice on the map example that the hatching lines in some of the states (South Dakota and Georgia, for example) don't quite match up. Why is that?",[156,163,170],{"value":157,"source":69,"evidence":158},"React component wrapper",[159],{"id":160,"by":161,"text":162},"16574224","fleur-de-lotus","Any plan for a react component?",{"value":164,"source":69,"evidence":165},"Deterministic rendering option",[166],{"id":167,"by":168,"text":169},"16576411","nazri1","Having an option to make the result deterministic would be nice. That way you can use it for drawing stuff that's guaranteed to be rendered identically when loaded at different…",{"value":171,"source":69,"evidence":172},"High-DPI screen support",[173],{"id":174,"by":175,"text":176},"16573573","glhaynes","Fantastic! I love this sort of thing, hope to see it used a lot. Could definitely use support for high-DPI screens.",[178,185],{"value":179,"source":69,"evidence":180},"Support for animation",[181],{"id":182,"by":183,"text":184},"16572543","swagasaurus-rex","Awesome. I was about to ask about D3 support. But now that I'm here... Is there any support for animation?",{"value":186,"source":69,"evidence":187},"Export or use with Inkscape",[188],{"id":189,"by":190,"text":191},"16574586","pit2","Does anyone know how this can be exported\u002Fused\u002Ftranslated to work with Inkscape?",[193,200,207,214],{"value":194,"source":69,"evidence":195},"Zwibbler drawing tool",[196],{"id":197,"by":198,"text":199},"16572461","vjeux","In the same vein, I've been using Zwibbler ( http:\u002F\u002Fzwibbler.com\u002Fdemo\u002F ) for all the illustrations on my blog ( http:\u002F\u002Fvjeux.com ) and it's been really nice to have images that…",{"value":201,"source":69,"evidence":202},"Sketchify online tool",[203],{"id":204,"by":205,"text":206},"16574318","ErikOnBike","There is an online tool supporting this called Sketchify. https:\u002F\u002Fwww.toolparadise.nl You need to create an account (for storing drawing profiles), but the usage is free.",{"value":208,"source":69,"evidence":209},"d3-sketchy",[210],{"id":211,"by":212,"text":213},"16573809","1wheel","Related work: https:\u002F\u002Fgithub.com\u002Femeeks\u002Fd3-sketchy",{"value":215,"source":69,"evidence":216},"Shaky \u002F ShakyDraw",[217,221],{"id":218,"by":219,"text":220},"16574256","LeonB","was it this? http:\u002F\u002Fshaky.github.bushong.net\u002F",{"id":222,"by":223,"text":224},"16578332","keenrodent","I bet you mean http:\u002F\u002Fshakydraw.com, HN discussion here: https:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=14606544",{"comments":226,"answered":227,"key":228},15,7,[229,232,235],{"id":230,"text":231},"16572728","That's true. There's so much randomness in there that every render will likely be unique - every so slightly different from the previous frame.",{"id":233,"text":234},"16573190","This is fantastic.",{"id":236,"text":237},"16572808","Cool!",{"commenters":239,"max_depth":34,"maker_replies":226,"first_comment_mins":240,"lifespan_hours":241},70,47,139,[243,245,246,249,253,256,260,264,268,271,275,278,281,285,288,291,294,296,299,301,304,305,309,311,313,316,317,319,323,326,329,332,335,337,339,342,344,345,347,348,350,351,354,355,358,360,363,364,368,369,370,371,374,376,378,382,386,390,394,397,399,401,405,408,413,415,419,422,424,425,427,428,432,435,439,442,445,449,452,457,461,463,467,470,472,473,474,478,480,482,486,490],[72,41,45,244,73,41],"project\u002Fneutral\u002Fdesign",[230,41,41,244,11,18],[247,41,45,244,248,41],"16573670","adrice727",[250,41,46,251,252,41],"16573827","project\u002Fpositive\u002Fnone","stuntkite",[254,41,46,251,255,41],"16574269","rmetzler",[257,41,46,258,259,41],"16574764","project\u002Fpositive\u002Fidea","thomasfl",[261,41,41,262,263,41],"16581744","commenter\u002Fneutral\u002Fnone","jjeaff",[265,41,45,266,267,41],"16574780","project\u002Fneutral\u002Fperformance","4lejandrito",[269,41,45,266,270,41],"16574932","reacweb",[272,41,45,273,274,41],"16574977","project\u002Fneutral\u002Fnone","hanoz",[276,41,45,277,146,41],"16575043","project\u002Fneutral\u002Fexecution",[279,41,45,266,280,41],"16575033","DiThi",[282,41,46,283,284,41],"16574161","project\u002Fpositive\u002Fdesign","wickedjust",[286,41,46,283,287,41],"16574455","_mrmnmly",[289,41,41,262,290,41],"16574516","gyvastis",[292,18,46,251,293,41],"16573152","jashkenas",[233,18,41,295,11,18],"commenter\u002Fpositive\u002Fnone",[297,18,46,283,298,41],"16573345","chrisweekly",[130,18,18,300,131,41],"project\u002Fcritical\u002Fexecution",[302,18,45,277,303,41],"16574666","deno",[138,18,18,300,139,41],[306,18,46,307,308,41],"16581837","project\u002Fpositive\u002Fexecution","nacs",[310,18,45,277,131,41],"16583064",[145,18,18,312,146,41],"project\u002Fcritical\u002Fdesign",[314,16,46,258,315,41],"16572794","ronilan",[236,16,41,295,11,18],[197,45,41,318,198,41],"other\u002Fneutral\u002Fnone",[320,45,41,321,322,41],"16573181","other\u002Fneutral\u002Fpricing","kqr",[324,45,41,321,325,41],"16574250","MattRix",[327,45,41,328,322,41],"16587874","other\u002Fneutral\u002Fdocs",[330,45,41,321,331,41],"16574369","anigbrowl",[333,43,41,334,11,18],"16572774","project\u002Fneutral\u002Fidea",[160,43,45,336,161,41],"maker\u002Fneutral\u002Fnone",[338,43,41,336,11,18],"16574242",[340,43,46,307,341,41],"16580559","swyx",[343,46,41,273,11,18],"16572523",[182,46,45,273,183,41],[346,46,41,244,11,18],"16572552",[134,46,18,300,135,41],[349,46,41,277,11,18],"16576766",[167,34,45,334,168,41],[352,34,45,277,353,41],"16583113","dvh",[94,227,46,258,95,41],[356,357,46,258,110,41],"16572258",8,[359,357,41,262,11,18],"16572757",[361,357,41,262,362,41],"16574047","dannyw",[109,357,46,258,110,41],[365,366,45,334,367,41],"16572178",9,"codingdave",[79,366,41,277,11,18],[204,366,41,318,205,41],[113,39,46,258,114,41],[372,39,46,258,373,41],"16612638","psteinweber",[152,375,18,300,153,41],11,[377,375,41,266,11,18],"16572512",[379,380,45,273,381,41],"16572321",12,"LiveTheDream",[383,384,45,273,385,41],"16573282",13,"imkevinxu",[387,384,41,388,389,41],"16573649","other\u002Fpositive\u002Fnone","KennyCason",[391,392,41,318,393,41],"16588606",14,"tobinharris",[395,226,45,334,396,41],"16574530","egnehots",[90,398,46,251,91,41],16,[60,398,41,400,11,18],"maker\u002Fneutral\u002Fidea",[402,403,46,258,404,41],"16572497",17,"kmfrk",[406,403,41,318,407,41],"16574304","cyrusaf",[409,410,41,411,412,41],"16576547",18,"other\u002Fneutral\u002Fidea","RMarcus",[189,414,45,334,190,41],19,[416,417,41,318,418,41],"16573411",20,"frunzales",[420,417,41,318,421,41],"16573665","ben336",[423,417,41,318,418,41],"16573733",[218,417,41,318,219,41],[426,417,41,318,418,41],"16587854",[222,417,41,318,223,41],[429,430,46,258,431,41],"16574501",21,"H00tyMcOwlFace",[433,33,46,283,434,41],"16574085","ohf",[436,437,46,283,438,41],"16575607",23,"saintPirelli",[174,440,45,441,175,41],24,"project\u002Fmixed\u002Fperformance",[443,32,46,258,444,41],"16572873","JasonSage",[446,447,45,334,448,41],"16574254",26,"laktak",[450,447,41,318,451,41],"16576434","severine",[453,454,18,455,456,41],"16576644",27,"project\u002Fcritical\u002Fidea","buildfocus",[458,459,45,334,460,41],"16574097",28,"kenning",[462,459,41,400,11,18],"16574240",[464,465,46,283,466,41],"16572841",29,"sporkologist",[468,469,45,334,322,41],"16572257",30,[120,469,41,471,11,18],"maker\u002Fpositive\u002Fidea",[123,469,41,471,11,18],[211,469,41,318,212,41],[475,476,41,318,477,41],"16572698",31,"gugagore",[479,476,41,318,385,41],"16573284",[98,481,46,251,99,41],32,[483,484,45,334,485,41],"16575146",33,"doczoidberg",[487,488,46,251,489,41],"16585540",34,"mito88",[102,491,46,251,103,41],35,[493,496],{"id":494,"t":495,"points":34,"comments":18},"13662347",1487270255,{"id":4,"t":12,"points":14,"comments":15},[498,503,508,513,518,522],{"id":499,"name":500,"points":501,"category":502},"16552777","Tones.fm",309,"creative",{"id":504,"name":505,"points":506,"category":507},"16551696","Devstream.tv",257,"consumer_social",{"id":509,"name":510,"points":511,"category":512},"16574893","Gitkube",224,"infrastructure",{"id":514,"name":515,"points":516,"category":517},"16577126","LonelyPage",216,"web_saas",{"id":519,"name":520,"points":521,"category":502},"16559715","Tiny Player",156,{"id":523,"name":524,"points":525,"category":526},"16545152","Tinder Revenue Estimate",137,"finance_crypto",false,"v2",{"id":530,"name":5,"line":6,"ai":527,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":531,"top":18,"kw":532,"maker":11,"domain":10,"tier":19,"attempts":16,"strip":533,"url":9,"mix":534,"praise":87,"objection":127,"sub":21},16571827,0.35,[24,25,26,27,28],"3553355513300035135550513350300555153055",[32,33,18,34],1794036564206]