bcjordan 272 days ago [-]
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/

adrice727 272 days ago [-]
rmetzler 272 days ago [-]
This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/
4lejandrito 272 days ago [-]
Very nice!

I changed it a little bit to optimise rendering just in case you don't know about 'requestAnimationFrame()' (https://developer.mozilla.org/en-US/docs/Web/API/window/requ...):


DiThi 272 days ago [-]
It's using setInterval on purpose, because with requestAnimationFrame the effect is a bit too fast.
reacweb 272 days ago [-]
Works fine on chrome, but it seems too fast on firefox.
hanoz 272 days ago [-]
What do all the context transformation lines do in this example? It seems to work just as well with clearRect on its own.
ygra 272 days ago [-]
There's only one such line. In general it's a good idea to reset the transform before clearing as the (0, 0, w, h) rectangle may not cover the whole canvas anymore. In this toy example there obviously isn't another transform so it's without function.
272 days ago [-]
thomasfl 272 days ago [-]
Wonderfurl! 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.
jjeaff 271 days ago [-]
Absolutely! Assuming your 5 year old is some kind of savant. Otherwise, I can't imagine a kid actually understanding what is going on with a script like this.
stuntkite 272 days ago [-]
This 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.
shihn 272 days ago [-]
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.
sandralopz5 272 days ago [-]
wickedjust 272 days ago [-]
Reminds me of the art used in yoshi story. Awesome!
_mrmnmly 272 days ago [-]
or Ed, Edd n Eddy cartoon :)
gyvastis 272 days ago [-]
Hahahahaha, nice one!
jashkenas 272 days ago [-]
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

chrismorgan 272 days ago [-]
This is not working in Firefox. Not sure why.
272 days ago [-]
piyush_soni 272 days ago [-]
Yup. Only worked in Chrome for me too.
nacs 271 days ago [-]
Both work well for me in Firefox 58
chrismorgan 271 days ago [-]
It got fixed to use require() instead of import().
ygra 272 days ago [-]
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 get dizzy watching it.
chrisweekly 272 days ago [-]
Beautiful! :)
shihn 272 days ago [-]
This is fantastic.
sandralopz5 272 days ago [-]
Im 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
ronilan 272 days ago [-]
This is fantastic!

Just made a quick rough "Mondrian" drawing app (using BlockLike.js[1])


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

EDIT: If folks want to play with the pen: https://codepen.io/BlockLike/pen/Bromox?editors=0010

shihn 272 days ago [-]
vjeux 272 days ago [-]
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.
kqr 272 days ago [-]
It 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 272 days ago [-]
I 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 270 days ago [-]
That 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 272 days ago [-]
Better than allowing that money to go to some starving artist though. They might not spend it as responsibly.
icantdrive55 272 days ago [-]
Kidding? Right?
shihn 272 days ago [-]
I used some of the same core code to create sketchy UI controls using web-components: https://www.webcomponents.org/collection/wiredjs/wired-eleme...
fleur-de-lotus 272 days ago [-]
Any plan for a react component?
shihn 272 days ago [-]
I'm not planning to at the moment, but if someone wants to write a wrapper, go for it.
swyx 271 days ago [-]
i 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 i have not published to npm yet

shihn 272 days ago [-]
Quick bar chart example with D3: http://roughjs.com/examples/bar-chart.html
swagasaurus-rex 272 days ago [-]
Awesome. I was about to ask about D3 support.

But now that I'm here... Is there any support for animation?

shihn 272 days ago [-]
Well 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 272 days ago [-]
FYI: Blank page (with title text) in Firefox (58.0.2, 64-bit, Windows).
shihn 271 days ago [-]
There 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.
nazri1 272 days ago [-]
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.
dvh 271 days ago [-]
Replace Math.random() with your deterministic PRNG, for example https://github.com/davidbau/seedrandom
yantrams 272 days ago [-]
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.
petecooper 272 days ago [-]
Well, this just solved two problems I've been trying to figure out for months -- thanks, shihn!

GitHub link: https://github.com/pshihn/rough

shihn 272 days ago [-]
I'm assuming you're joking :P But if it really solved 2 of your problems, I'm curious what they were?
petecooper 272 days ago [-]
Not 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.
dannyw 272 days ago [-]
I’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.
codingdave 272 days ago [-]
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.
shihn 272 days ago [-]
It's doable - It already parses SVG paths https://github.com/pshihn/rough/wiki#path-d--options
ErikOnBike 272 days ago [-]
There is an online tool supporting this called Sketchify. https://www.toolparadise.nl

You need to create an account (for storing drawing profiles), but the usage is free.

daleco 271 days ago [-]
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.

psteinweber 266 days ago [-]
Wonderful and indeed a very practical idea. I would use it!
chestervonwinch 272 days ago [-]
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?
shihn 272 days ago [-]
I'm doing some approximation on complex SVG paths for performance reasons. Doesn't happen on non-svg paths. Need for improvement.
LiveTheDream 272 days ago [-]
imkevinxu 272 days ago [-]
Reminds me of this old website I built back in college http://xkcdgraphs.com/
KennyCason 272 days ago [-]
Woah! This is awesome. :) I'd love to use this on my blog next time I need graphs.
272 days ago [-]
tobinharris 270 days ago [-]
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 :)

egnehots 272 days ago [-]
Are there any good papers about this kind of stuff?
CodeCube 272 days ago [-]
This is just lovely :) I guess I don't really have much to add, other than to say you've delighted me with this
shihn 272 days ago [-]
Thanks. I'm a bit surprised by the reception actually. It was just a fun side project with no real use case in mind.
kmfrk 272 days ago [-]
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.

cyrusaf 272 days ago [-]
binarysolo1111 272 days ago [-]
https://swimlanes.io/ is a great charting tool. Okay it's swimlanes not flow charts, but I like it a lot.
RMarcus 271 days ago [-]
Very cool! I wrote something similar, but it only renders lines. https://rmarcus.info/blog/2017/10/23/humanlines.html
pit2 272 days ago [-]
Does anyone know how this can be exported/used/translated to work with Inkscape?
frunzales 272 days ago [-]
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?
keenrodent 271 days ago [-]
ben336 272 days ago [-]
frunzales 272 days ago [-]
This comes close enough but it's not the exact software that was posted around here :-)
LeonB 272 days ago [-]
frunzales 270 days ago [-]
I believe so. It's very close to what I've previously seen posted here.
H00tyMcOwlFace 272 days ago [-]
No idea what I will be using it for yet, but I am sure I will!
ohf 272 days ago [-]
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.

saintPirelli 272 days ago [-]
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.
glhaynes 272 days ago [-]
Fantastic! I love this sort of thing, hope to see it used a lot. Could definitely use support for high-DPI screens.
JasonSage 272 days ago [-]
I'd love to pair this with one of those tools that turns ascii drawings into SVGs. Looks great!
laktak 272 days ago [-]
Anybody know of a tool that can convert ascii drawings (in markdown) to this?
severine 272 days ago [-]
buildfocus 271 days ago [-]
This is very cool, but I have no idea at all where I'd ever use it.
kenning 272 days ago [-]
This is awesome! Do you have plans to integrate with canvas.js?
shihn 272 days ago [-]
I'm not planning to at the moment, but if someone wants to write a wrapper, go for it.
sporkologist 272 days ago [-]
Simulated badly-drawn hatching! This is great!
kqr 272 days ago [-]
Has anyone attempted to combine this with D3?
shihn 272 days ago [-]
I drew a map with RoughJS and d3 (3rd example ->)https://github.com/pshihn/rough/wiki/Examples

I'm sure Charts and all would be easy too.

1wheel 272 days ago [-]
shihn 272 days ago [-]
Here- took a quick stab at it: http://roughjs.com/examples/bar-chart.html
gugagore 272 days ago [-]
imkevinxu 272 days ago [-]
Easier web version :) http://xkcdgraphs.com/
FromTheId 272 days ago [-]
Aw man I love this.

Thank you!

doczoidberg 272 days ago [-]
does anybody know something similar for .NET (WPF) applications?
mito88 270 days ago [-]
ashleymarsh 272 days ago [-]
This is fantastic!
Ainak 272 days ago [-]
kodfodrasz 271 days ago [-]
This is not hand drawn. It only looks like that, and it is cool, but definitely not hand-drawn.
gmaillogin 272 days ago [-]
I also encounter the same problem. thanks for your answer. https://www.gmaillogin.help/