next »

[chrisjan]

Hey guys,

  I made a little toy, lacking a better way to call it, in HTML5.  It's just a canvas where you can draw with your mouse.  So far, so good, the same as any other HTML5 tutorial you can find online.  The particularity is that every new stroke you draw makes the older strokes fade out slightly.  So, in a way, the drawing is kind of evolving continuously as you draw.  It's just a little idea I had the other day before going to sleep and hacked in a couple of minutes, don't expect anything complex. 

  What I'm curious about is what could an artist do with such a toy (I have no talent myself), given the limitations that the "fading" feature imposes?  Maybe you can use that to your advantage by drawing the strokes in a particular order? 

  Also, there are two other intentional constraints. One, there's no undo, but if you do any mistake you can try to make it go away by drawing more.  Two, the new stroke appears when you release the mouse button, not while you're drawing.  I'm avoiding direct feedback so that drawing long strokes becomes a little bit trickier, thus enhancing this side effect I mentioned of the picture evolving by itself.

So that's why I'm posting in here, maybe some of you would be so kind to try it for a minute or two and post the results, some drawing from you, in this thread?

It should work on any HTML5 - capable browser, although I have only tested it in FF, Chrome and Opera. For the input you can use mouse or tablet if you prefer.  The whole thing works in the client side only (in your browser), no data is sent anywhere.  The link is:
http://chrisjan00.github.com/OnionDoodler/

Thank you in advance!

[Endurion]

Works nice in IE. However it would really be nice to see the line you're drawing. In the current edition you can't draw any longer lines since you don't see where you're going.

[RichMakeGame!]

I think the problem I have is that because you're forced to make short strokes the drawing fades quicker than I'd like. i'm not sure the 'no direct feedback' will work as you intend it to

I think maybe a more elegant solution would be to allow visual feedback, but fade the strokes not 'per stroke' but as they are drawn. So, if I drew a massive one line drawing the most recent 'ink' would be black and the oldest would be transparent. Of course I understand this would be significantly more complicated to code. Perhaps as a compromise you could just divide each stroke into many short strokes and fade each one separately.