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) :)
EDIT: If folks want to play with a JSFiddle: https://jsfiddle.net/49g2Leqw/9/
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:
Edit: Too much fun. Here's another: https://beta.observablehq.com/@jashkenas/scratchy-eyes
This is fantastic!
Just made a quick rough "Mondrian" drawing app (using BlockLike.js)
Click and Drag to rectangle.
Space key = black
r key = red
b key = blue
g key = green
y key = yellow
EDIT: If folks want to play with the pen: https://codepen.io/BlockLike/pen/Bromox?editors=0010
In the same vein, I've been using Zwibbler ( http://zwibbler.com/demo/ ) for all the illustrations on my blog ( http://vjeux.com ) 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: https://www.webcomponents.org/collection/wiredjs/wired-eleme...
Quick bar chart example with D3: http://roughjs.com/examples/bar-chart.html
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!
GitHub link: https://github.com/pshihn/rough
I 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.
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, 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:
Reminds me of this old website I built back in college http://xkcdgraphs.com/
Really cool stuff.
Would look great in http://yuml.me which also has a sketchy look.
I need to rewrite yUML using newer tech, business collaborations welcome :)
Are there any good papers about this kind of stuff?
This is just lovely :) I guess I don't really have much to add, other than to say you've delighted me with this
I 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.
Very cool! I wrote something similar, but it only renders lines. https://rmarcus.info/blog/2017/10/23/humanlines.html
Does anyone know how this can be exported/used/translated to work with Inkscape?
No idea what I will be using it for yet, but I am sure I will!
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?
There's a critique about digital art in general here: over-perfection is dull. I'm all about that wabi-sabi.
Absolutely stunning work. I have to do some work with D3.js for university and this feels like the universe telling me to stop procrastinating.
Fantastic! I love this sort of thing, hope to see it used a lot. Could definitely use support for high-DPI screens.
I'd love to pair this with one of those tools that turns ascii drawings into SVGs. Looks great!
This is very cool, but I have no idea at all where I'd ever use it.
Anybody know of a tool that can convert ascii drawings (in markdown) to this?
This is awesome! Do you have plans to integrate with canvas.js?
This is fantastic!
Simulated badly-drawn hatching! This is great!
Has anyone attempted to combine this with D3?
Aw man I love this.
does anybody know something similar for .NET (WPF) applications?
This is not hand drawn. It only looks like that, and it is cool, but definitely not hand-drawn.
I also encounter the same problem. thanks for your answer. https://www.gmaillogin.help/