Your circular spray brush has a pretty awful distribution of points. If you hold it in one location for several seconds you can tell that it's heavily biasing points to the bottom left, and you tend to get very visible "lines" as well. I tweaked it a bit to improve it:
My implementation still isn't perfect, as it biases points in the middle over points around the edges. (A consequence of the fact that a bunch of points evenly distributed around a small radius are closer together than a bunch of points evenly distributed around a large radius.) But it's definitely better than the one in the article.
This means there's nothing special about 3 - the more times you add uniforms together, the more normal it becomes. Also it doesn't matter if the uniform isn't uniform.
Thanks. All props should go to Paul Haeberli for the original idea.
I should really update it to add controls for mass and friction. Actually I should make a jsfiddle for this. But, I'm in the middle of something else at the moment..
Using Bézier curves, but with variable width, can give nice "handwritten" feel to it - http://szimek.github.io/signature_pad (works best on touch devices).
I had the same impulse, and then it struck me: maybe, just maybe, trying to replicate my hand-written signature on an unknown website that's obviously doing it's best to capture hand-writing is not the absolute best strategy, security-wise.
Not saying the author of that pad is evil or anything, I just questioned my own impulse. And stopped drawing. :)
John Hancocks arent particularly secure anyway, and I actually have little use for my digital version, other than using it on documents to be sent to people. Everything else is handled via other ways (or require actual pen on paper!) :)
A note for those who are thinking about making a "real" paint app out of these techniques - which I started on, got the architecture mostly done to a demonstration stage, and then stalled out on UI:
When you start adding in the flexibility of different tool types, differentiating "stroke" and "material", real-time preview vs. final, and other nuances, the internals start to resemble a dataflow system dealing with point paths and canvas buffers. Often you take raw input and derive a new path from it, or take an existing buffer and combine it with path data.
The basic rendering techniques really are this straightforward, it's just the flexibility requirement that adds complication.
This is the most educating thing I have seen on HN in a while.
I went through the code for each, starting with the simplest and working my way up to the much more interesting and complex.
The only thing missing is a way to edit the JS and see the result. Looks like it's easy to use an embedded jsfiddle[0], but I have not tried it myself.
> The only thing missing is a way to edit the JS and see the result.
If you look on at the right edge of the grey-ish tab bar, you will see an "edit" link. This opens up a link to CodePen which lets you fork the snippet and mark changes to it. Here is one such link: http://codepen.io/kangax/pen/wDuxl
The examples became more and more complex while the code remained evolutionary and understandable. Amazing work and a huge resource for canvas drawing and those unfamiliar with javascript. Very impressive.
Canvas is just a 2D drawing API. Whatever you can do with pixels, you can do in canvas. That includes writing Photoshop if you're so inclined.
Now, that in mind, there are limitations and especially for drawing applications it's a shame that you have to think that hard about how to antialias a stroke (approximating it with shadows – really?). So in a way we dragged 2D graphics to the web, but leaving it with a strange mixture of features which date from a range of 1980–2000.
They never pay an award - or - reward for that matter -- the police always come up with some excuse not to pay. And if that fails then they say YOU must be part of the crime.
this is awesome. the colored pixel brush is my favorite.
this is a nice example of what i like about programming most visualizations in general. it's fun and easy to brainstorm. change variables and logic until you end up with something you like.
http://codepen.io/anon/pen/EqbnG
My implementation still isn't perfect, as it biases points in the middle over points around the edges. (A consequence of the fact that a bunch of points evenly distributed around a small radius are closer together than a bunch of points evenly distributed around a large radius.) But it's definitely better than the one in the article.