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: https://beta.observablehq.com/@jashkenas/tumble-wheel-with-r... Wheee. Edit: Too much fun. Here's another: https://beta.observablehq.com/@jashkenas/scratchy-eyes
This is not working in Firefox. Not sure why.
Show HN: RoughJS – Create hand-drawn graphics using JavaScript
71–80 of 103 posts
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#72Earlier quoted context omitted.
https://jsfiddle.net/adrice727/49g2Leqw/105/
This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/
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.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#73Earlier quoted context omitted.
https://jsfiddle.net/adrice727/49g2Leqw/105/
This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/
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...):
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#74I 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://swimlanes.io/ is a great charting tool. Okay it's swimlanes not flow charts, but I like it a lot.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#75Earlier quoted context omitted.
This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/
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... ): https://jsfiddle.net/65q7c5to/
Works fine on chrome, but it seems too fast on firefox.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#76Quick bar chart example with D3: http://roughjs.com/examples/bar-chart.html
FYI: Blank page (with title text) in Firefox (58.0.2, 64-bit, Windows).
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#77Earlier quoted context omitted.
This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/
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... ): https://jsfiddle.net/65q7c5to/
What do all the context transformation lines do in this example? It seems to work just as well with clearRect on its own.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#78Well, this just solved two problems I've been trying to figure out for months -- thanks, shihn! GitHub link: https://github.com/pshihn/rough
I'm assuming you're joking :P But if it really solved 2 of your problems, I'm curious what they were?
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.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#79This 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-r... Wheee. Edit: Too much fun. Here's another: https://beta.observablehq.com/@jashkenas/scratchy-eyes
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.
Re: Show HN: RoughJS – Create hand-drawn graphics using JavaScript
#80Earlier quoted context omitted.
This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/
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... ): https://jsfiddle.net/65q7c5to/
It's using setInterval on purpose, because with requestAnimationFrame the effect is a bit too fast.