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.
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.
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.
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.
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.
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?
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)
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) :)
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.
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.
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.
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:
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
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.
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?
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.
102 comments
[ 4.2 ms ] story [ 161 ms ] threadYou need to create an account (for storing drawing profiles), but the usage is free.
I'm sure Charts and all would be easy too.
GitHub link: https://github.com/pshihn/rough
http://stevehanov.ca/blog/index.php?id=33
http://zwibbler.com/
https://www.websequencediagrams.com/
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.
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.
http://plantuml.com/
https://www.planttext.com/
But now that I'm here... Is there any support for animation?
EDIT: If folks want to play with a JSFiddle: https://jsfiddle.net/49g2Leqw/9/
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...):
https://jsfiddle.net/65q7c5to/
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
Just made a quick rough "Mondrian" drawing app (using BlockLike.js[1])
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
EDIT: If folks want to play with the pen: https://codepen.io/BlockLike/pen/Bromox?editors=0010
https://beta.observablehq.com/@jashkenas/tumble-wheel-with-r...
Wheee.
Edit: Too much fun. Here's another: https://beta.observablehq.com/@jashkenas/scratchy-eyes
Thank you!
There's a critique about digital art in general here: over-perfection is dull. I'm all about that wabi-sabi.