If 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) :)<p>EDIT: If folks want to play with a JSFiddle: <a href="https://jsfiddle.net/49g2Leqw/9/" rel="nofollow">https://jsfiddle.net/49g2Leqw/9/</a>
This 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:<p><a href="https://beta.observablehq.com/@jashkenas/tumble-wheel-with-rough-js" rel="nofollow">https://beta.observablehq.com/@jashkenas/tumble-wheel-with-r...</a><p>Wheee.<p>Edit: Too much fun. Here's another: <a href="https://beta.observablehq.com/@jashkenas/scratchy-eyes" rel="nofollow">https://beta.observablehq.com/@jashkenas/scratchy-eyes</a>
This is fantastic!<p>Just made a quick rough "Mondrian" drawing app (using BlockLike.js[1])<p><a href="https://s.codepen.io/BlockLike/debug/Bromox/PNAvYLPDGqDr" rel="nofollow">https://s.codepen.io/BlockLike/debug/Bromox/PNAvYLPDGqDr</a><p>Click and Drag to rectangle.<p>Space key = black<p>r key = red<p>b key = blue<p>g key = green<p>y key = yellow<p>[1] <a href="https://www.blocklike.org/#getstarted" rel="nofollow">https://www.blocklike.org/#getstarted</a><p>EDIT: If folks want to play with the pen: <a href="https://codepen.io/BlockLike/pen/Bromox?editors=0010" rel="nofollow">https://codepen.io/BlockLike/pen/Bromox?editors=0010</a>
In the same vein, I've been using Zwibbler ( <a href="http://zwibbler.com/demo/" rel="nofollow">http://zwibbler.com/demo/</a> ) for all the illustrations on my blog ( <a href="http://vjeux.com" rel="nofollow">http://vjeux.com</a> ) and it's been really nice to have images that look like they have been hand drawn.
I used some of the same core code to create sketchy UI controls using web-components: <a href="https://www.webcomponents.org/collection/wiredjs/wired-elements" rel="nofollow">https://www.webcomponents.org/collection/wiredjs/wired-eleme...</a>
Quick bar chart example with D3: <a href="http://roughjs.com/examples/bar-chart.html" rel="nofollow">http://roughjs.com/examples/bar-chart.html</a>
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 times.
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 playing around with splines, perlin noise etc.
Well, this just solved two problems I've been trying to figure out for months -- thanks, shihn!<p>GitHub link: <a href="https://github.com/pshihn/rough" rel="nofollow">https://github.com/pshihn/rough</a>
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.<p>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.
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?
Very cool. Reminds me of Steve Hanov's work:<p><a href="http://stevehanov.ca/blog/index.php?id=33" rel="nofollow">http://stevehanov.ca/blog/index.php?id=33</a><p><a href="http://zwibbler.com/" rel="nofollow">http://zwibbler.com/</a><p><a href="https://www.websequencediagrams.com/" rel="nofollow">https://www.websequencediagrams.com/</a>
Reminds me of this old website I built back in college <a href="http://xkcdgraphs.com/" rel="nofollow">http://xkcdgraphs.com/</a>
Really cool stuff.<p>Would look great in <a href="http://yuml.me" rel="nofollow">http://yuml.me</a> which also has a sketchy look.<p>I need to rewrite yUML using newer tech, business collaborations welcome :)
I would absolutely love a flow chart library that used this with decent text alignment.<p>I used to prefer mermaid.js, but it silently fails in ways the don't work that well for me: <a href="https://mermaidjs.github.io/mermaid-live-editor" rel="nofollow">https://mermaidjs.github.io/mermaid-live-editor</a>.
Very cool! I wrote something similar, but it only renders lines. <a href="https://rmarcus.info/blog/2017/10/23/humanlines.html" rel="nofollow">https://rmarcus.info/blog/2017/10/23/humanlines.html</a>
A 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?
Does anyone else get a fancy pants adventure vibe from this?<p>There's a critique about digital art in general here: over-perfection is dull. I'm all about that wabi-sabi.