5 ms·
Exploring canvas drawing techniques
- coldcode 13y agoWhat a great interactive post. I never knew canvas was so flexible.
- ygra 13y agoCanvas 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.
- stevejohnson 13y agoThis is excellent. We'll probably implement quite a few of these as Literally Canvas[1] brushes. [1] http://literallycanvas.com/ http://literallycanvas.com/
- RokStdy 13y agoFantastic. This is really an excellent post. I particularly enjoy the code snippets along with each example.
- agumonkey 13y agoNeighbor points give fantastic results.
- fergal 13y agoAgreed. Two minutes of screwing around on it made me feel like an artist: http://i.imgur.com/5e42RRN.png http://i.imgur.com/5e42RRN.png
- catshirt 13y agothis 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.
- thoughtpalette 13y agoThis is great! The Harmony examples are amazing.
- nbush 13y agoThe 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.
- Kronopath 13y agoYour 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: http://codepen.io/anon/pen/EqbnG 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.
- andrelaszlo 13y agoI thought the same thing. Seems like the author messed up while converting radians to degrees, or something. I changed it to var angle = (Math.PI * 2 * Math.random()); But it has your problem as well. To be fair, a spray can also focuses the paint in the center like that :)
- andrelaszlo 13y agomore "spraycanny": http://codepen.io/anon/pen/utcLx http://codepen.io/anon/pen/utcLx
- Kronopath 13y agoApproximating a normal distribution by summing three uniformly distributed random numbers is pretty clever. And it's a nice visual effect as well.
- RobinL 13y agoA nice illustration of the central limit theorem! http://en.wikipedia.org/wiki/Central_limit_theorem http://en.wikipedia.org/wiki/Central_limit_theorem 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.
- kangax 13y ago
- waterlion 13y agoThis gives a strange combination of nostalgia for 80s tech with excitement about the future.
- szimek 13y agoBrush, fur and neighbor points look really cool. Using Bézier curves, but with variable width, can give nice "handwritten" feel to it - http://szimek.github.io/signature_pad http://szimek.github.io/signature_pad (works best on touch devices).
- kangax 13y agoNice! Line thickness based on distance between points seems perfect for replicating ink. Good idea.
- girvo 13y agoThat was super cool to use, and I totally create a digital version of my signature on my iPhone that I'm going to use! Awesome!
- unwind 13y agoI 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. :)
- girvo 13y agoJohn 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!) :)
- szimek 13y ago:) Well, it's open source, so you can check what it does and even run it locally without internet connection if you really want. Good idea though, I'll have to add form for credit card details :)
- rogerallen 13y agoSurprised you didn't rediscover using physics on the pen point. You might check out http://www.graficaobscura.com/dyna/ http://www.graficaobscura.com/dyna/
- kangax 13y agoInteresting. Will check it out. Found Javascript adaptation at http://www.rogerandwendy.com/roger/dynadraw http://www.rogerandwendy.com/roger/dynadraw
- rogerallen 13y agoYep, that's mine. I'm a fan. :^)
- bcjordan 13y agoThis is a lot of fun http://i.imgur.com/seMWVWv.png http://i.imgur.com/seMWVWv.png
- rogerallen 13y agoThanks. 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..
- rogerallen 13y agoI made a jsFiddle version. Easier for hacking the mass/drag/etc vars. http://jsfiddle.net/rogerallen/LCbpz/ http://jsfiddle.net/rogerallen/LCbpz/
- chipsy 13y agoA 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.
- sonier 13y agoThis 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. [0] http://doc.jsfiddle.net/use/embedding.html http://doc.jsfiddle.net/use/embedding.html
- jervisfm 13y ago> 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 http://codepen.io/kangax/pen/wDuxl
- sonier 13y agoWow, somehow I completely missed that. Thanks for pointing it out.
- CmonDev 13y agoThis is a HN JS post I have no problems with! Lots of effort and actually useful - well done!
- sjreese 13y agoThey 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.
- elwell 13y agoGreat variety! Some of these reminded me of [0] Spider-Man Cartoon Maker. [0] - http://www.amazon.com/Knowledge-Adventure-Spider-Man-Cartoon-Maker/dp/1569971447 http://www.amazon.com/Knowledge-Adventure-Spider-Man-Cartoon...