11 ms·
Show HN: RoughJS – Create hand-drawn graphics using JavaScript
- codingdave 9y agoI like it -- it would be killer if there was a way to simply throw an SVG at it and have it convert the whole thing to this style.
- shihn 9y agoIt's doable - It already parses SVG paths https://github.com/pshihn/rough/wiki#path-d--options https://github.com/pshihn/rough/wiki#path-d--options
- ErikOnBike 9y agoThere is an online tool supporting this called Sketchify. https://www.toolparadise.nl https://www.toolparadise.nl You need to create an account (for storing drawing profiles), but the usage is free.
- kqr 9y agoHas anyone attempted to combine this with D3?
- shihn 9y agoI drew a map with RoughJS and d3 (3rd example ->)https://github.com/pshihn/rough/wiki/Examples https://github.com/pshihn/rough/wiki/Examples I'm sure Charts and all would be easy too.
- shihn 9y agoHere- took a quick stab at it: http://roughjs.com/examples/bar-chart.html http://roughjs.com/examples/bar-chart.html
- 1wheel 9y agoRelated work: https://github.com/emeeks/d3-sketchy https://github.com/emeeks/d3-sketchy
- petecooper 9y agoWell, this just solved two problems I've been trying to figure out for months -- thanks, shihn! GitHub link: https://github.com/pshihn/rough https://github.com/pshihn/rough
- shihn 9y agoI'm assuming you're joking :P But if it really solved 2 of your problems, I'm curious what they were?
- dannyw 9y agoI’m assuming the parent commentator wants handdrawn-like graphics for a service or machine generated content, but wants them in different styles. Thus, tweaking what you’ve written allows him to solve both.
- petecooper 9y agoNot joking at all, I assure you! Primary use case is for education/training materials where a flat or prescribed style is not desirable, and also because despite my girlfriend being an artist I have no ability there whatsoever and this has just removed a whole bunch of fear about presenting polygons.
- LiveTheDream 9y agoVery cool. Reminds me of Steve Hanov's work: http://stevehanov.ca/blog/index.php?id=33 http://stevehanov.ca/blog/index.php?id=33 http://zwibbler.com/ http://zwibbler.com/ https://www.websequencediagrams.com/ https://www.websequencediagrams.com/
- vjeux 9y agoIn the same vein, I've been using Zwibbler ( http://zwibbler.com/demo/ http://zwibbler.com/demo/ ) for all the illustrations on my blog ( http://vjeux.com http://vjeux.com ) and it's been really nice to have images that look like they have been hand drawn.
- kqr 9y agoIt looks like you have to purchase a license to use it. The only price quoted on the page is $2999 -- a bit steep for some illustrations on a blog. Please explain.
- MattRix 9y agoI believe the $2999 price is for licensing Zwibbler so you can have it on your own site/app. For example if you had a company that made custom t-shirts, users could create their own designs using Zwibbler on your site. On the other hand, if you just want to draw some pictures using the Zwibbler demo to put them on your blog, you don't need a license, and it doesn't cost you anything.
- kqr 9y agoThat is the sensible interpretation but it's not very clear from the wording on the page. I like being in the clear, legally speaking.
- anigbrowl 9y agoBetter than allowing that money to go to some starving artist though. They might not spend it as responsibly.
- icantdrive55 9y agoKidding? Right?
- chestervonwinch 9y agoCool. 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?
- shihn 9y agoI'm doing some approximation on complex SVG paths for performance reasons. Doesn't happen on non-svg paths. Need for improvement.
- kmfrk 9y agoI would absolutely love a flow chart library that used this with decent text alignment. I used to prefer mermaid.js, but it silently fails in ways the don't work that well for me: https://mermaidjs.github.io/mermaid-live-editor https://mermaidjs.github.io/mermaid-live-editor.
- cyrusaf 9y agoHave you tried plantuml? http://plantuml.com/ http://plantuml.com/ https://www.planttext.com/ https://www.planttext.com/
- binarysolo1111 9y agohttps://swimlanes.io/ https://swimlanes.io/ is a great charting tool. Okay it's swimlanes not flow charts, but I like it a lot.
- shihn 9y agoQuick bar chart example with D3: http://roughjs.com/examples/bar-chart.html http://roughjs.com/examples/bar-chart.html
- swagasaurus-rex 9y agoAwesome. I was about to ask about D3 support. But now that I'm here... Is there any support for animation?
- shihn 9y agoWell the library provides simple drawing methods. You would animate it the same way you would animate anything on a canvas. (Note most D3 charts use SVG)
- unwind 9y agoFYI: Blank page (with title text) in Firefox (58.0.2, 64-bit, Windows).
- shihn 9y agoThere was in issue with the CDN I believe. It was serving an old cache at some nodes. I changed the code to use a different one.
- gugagore 9y agoRelated: https://matplotlib.org/xkcd/examples/showcase/xkcd.html https://matplotlib.org/xkcd/examples/showcase/xkcd.html
- imkevinxu 9y agoEasier web version :) http://xkcdgraphs.com/ http://xkcdgraphs.com/
- bcjordan 9y agoIf you repeatedly clear canvas/draw with a setInterval of ~100-200ms, looks kind of like the hand-drawn un-stable lines art style of Squigglevision (Dr. Katz / Science Court) :) EDIT: If folks want to play with a JSFiddle: https://jsfiddle.net/49g2Leqw/9/ https://jsfiddle.net/49g2Leqw/9/
- shihn 9y agoThat's true. There's so much randomness in there that every render will likely be unique - every so slightly different from the previous frame.
- sandralopz5 9y agozxczxc
- adrice727 9y agohttps://jsfiddle.net/adrice727/49g2Leqw/105/ https://jsfiddle.net/adrice727/49g2Leqw/105/
- stuntkite 9y agoThis is great. Thank you both for these fiddles. I've been doing a lot of SVG DOM stuff. Mostly tied to maps. I'm excited to try this out.
- rmetzler 9y agoThis is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/ https://jsfiddle.net/k1g6533y/13/
- thomasfl 9y agoWonderfurl! It makes the kid see how a small algorithm saves time AND produces almost the same results as hand drawn animation. I have to try this myself with my own kids.
- shihn 9y agoI used some of the same core code to create sketchy UI controls using web-components: https://www.webcomponents.org/collection/wiredjs/wired-elements https://www.webcomponents.org/collection/wiredjs/wired-eleme...
- fleur-de-lotus 9y agoAny plan for a react component?
- shihn 9y agoI'm not planning to at the moment, but if someone wants to write a wrapper, go for it.
- swyx 9y agoi dont know polymer at all so i didnt know how to use react-polymer - anyone want to give it a shot? in the meantime ive started writing a pure react version of it: https://github.com/sw-yx/react-wired https://github.com/sw-yx/react-wired i have not published to npm yet
- ronilan 9y agoThis is fantastic! Just made a quick rough "Mondrian" drawing app (using BlockLike.js[1]) https://s.codepen.io/BlockLike/debug/Bromox/PNAvYLPDGqDr https://s.codepen.io/BlockLike/debug/Bromox/PNAvYLPDGqDr Click and Drag to rectangle. Space key = black r key = red b key = blue g key = green y key = yellow [1] https://www.blocklike.org/#getstarted https://www.blocklike.org/#getstarted EDIT: If folks want to play with the pen: https://codepen.io/BlockLike/pen/Bromox?editors=0010 https://codepen.io/BlockLike/pen/Bromox?editors=0010
- shihn 9y agoCool!
- sporkologist 9y agoSimulated badly-drawn hatching! This is great!
- JasonSage 9y agoI'd love to pair this with one of those tools that turns ascii drawings into SVGs. Looks great!
- deleted 9y ago[deleted]
- CodeCube 9y agoThis is just lovely :) I guess I don't really have much to add, other than to say you've delighted me with this
- shihn 9y agoThanks. I'm a bit surprised by the reception actually. It was just a fun side project with no real use case in mind.
- jashkenas 9y agoThis is a very fun library. Following the tip in these comments from @bcjordan to repeatedly re-render, I've forked a little physics notebook by Jim Bumgardner apply Rough.js to the circle rendering: https://beta.observablehq.com/@jashkenas/tumble-wheel-with-rough-js https://beta.observablehq.com/@jashkenas/tumble-wheel-with-r... Wheee. Edit: Too much fun. Here's another: https://beta.observablehq.com/@jashkenas/scratchy-eyes https://beta.observablehq.com/@jashkenas/scratchy-eyes
- shihn 9y agoThis is fantastic.
- sandralopz5 9y agoIm making over $7k a month working part time. I kept hearing other people tell me how much money they can make online so I decided to look into it. Well, it was all true and has totally changed my life. This is what I do, ====http://www.todaysfox.com http://www.todaysfox.com
- chrisweekly 9y agoBeautiful! :)
- chrismorgan 9y agoThis is not working in Firefox. Not sure why.
- deleted 9y ago[deleted]
- deno 9y agohttps://bugzilla.mozilla.org/show_bug.cgi?id=1342012 https://bugzilla.mozilla.org/show_bug.cgi?id=1342012
- piyush_soni 9y agoYup. Only worked in Chrome for me too.
- imkevinxu 9y agoReminds me of this old website I built back in college http://xkcdgraphs.com/ http://xkcdgraphs.com/
- KennyCason 9y agoWoah! This is awesome. :) I'd love to use this on my blog next time I need graphs.
- frunzales 9y agoA bit off-topic but a while ago someone posted a similar tool here on HN that allows one to produce diagrams - they looked pretty much hand-drawn. Does anyone have a link?
- ben336 9y agoIf by diagrams you mean charts, possibly https://jakevdp.github.io/blog/2012/10/07/xkcd-style-plots-in-matplotlib/ https://jakevdp.github.io/blog/2012/10/07/xkcd-style-plots-i...
- keenrodent 9y agoI bet you mean http://shakydraw.com http://shakydraw.com, HN discussion here: https://news.ycombinator.com/item?id=14606544 https://news.ycombinator.com/item?id=14606544
- glhaynes 9y agoFantastic! I love this sort of thing, hope to see it used a lot. Could definitely use support for high-DPI screens.
- yantrams 9y agoThis 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 playing around with splines, perlin noise etc.
- FromTheId 9y agoAw man I love this. Thank you!
- ohf 9y agoDoes anyone else get a fancy pants adventure vibe from this? There's a critique about digital art in general here: over-perfection is dull. I'm all about that wabi-sabi.
- kenning 9y agoThis is awesome! Do you have plans to integrate with canvas.js?
- shihn 9y agoI'm not planning to at the moment, but if someone wants to write a wrapper, go for it.
- ashleymarsh 9y agoThis is fantastic!
- laktak 9y agoAnybody know of a tool that can convert ascii drawings (in markdown) to this?
- severine 9y agoMaybe this? https://bitbucket.org/wez/asciitosvg https://bitbucket.org/wez/asciitosvg
- gmaillogin 9y agoI also encounter the same problem. thanks for your answer. https://www.gmaillogin.help/ https://www.gmaillogin.help/
- Ainak 9y agonice
- H00tyMcOwlFace 9y agoNo idea what I will be using it for yet, but I am sure I will!
- egnehots 9y agoAre there any good papers about this kind of stuff?
- pit2 9y agoDoes anyone know how this can be exported/used/translated to work with Inkscape?
- doczoidberg 9y agodoes anybody know something similar for .NET (WPF) applications?
- saintPirelli 9y agoAbsolutely stunning work. I have to do some work with D3.js for university and this feels like the universe telling me to stop procrastinating.
- nazri1 9y agoHaving 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 times.
- dvh 9y agoReplace Math.random() with your deterministic PRNG, for example https://github.com/davidbau/seedrandom https://github.com/davidbau/seedrandom
- RMarcus 9y agoVery cool! I wrote something similar, but it only renders lines. https://rmarcus.info/blog/2017/10/23/humanlines.html https://rmarcus.info/blog/2017/10/23/humanlines.html
- buildfocus 9y agoThis is very cool, but I have no idea at all where I'd ever use it.
- kodfodrasz 9y agoThis is not hand drawn. It only looks like that, and it is cool, but definitely not hand-drawn.
- daleco 9y agoThat’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, in some situations you may want to show rough sketches and not high fidelity (or people focus on details rather than the big picture). Something like that would allow me to easily toggle between high fidelity to rough state.
- psteinweber 9y agoWonderful and indeed a very practical idea. I would use it!
- mito88 9y agonice!
- tobinharris 9y agoReally cool stuff. Would look great in http://yuml.me http://yuml.me which also has a sketchy look. I need to rewrite yUML using newer tech, business collaborations welcome :)