A HTML5 doodle…
This little project started out as trying out some HTML5 canvas demo, but soon I became amazed with the speed I got up to coding and actually focussing on what I was trying to achieve. I had been playing with the canvas before, but suddenly it “just worked” as I expected – and that’s a relief coming from a web development background.
I recently read an article about how doodling helps you to actually process information much better, and stimulates the mind. This got me started thinking: how much doodling have I done lately? All work, no play… really. Wouldn’t it be fun to draw a little doodle, and maybe even share it with friends as such? and shouldn’t it be in your browser, not some silly desktop app? I have been getting quite jalous at those little drawing applications for tablets and smartphone.
Once I got the drawing demo working, I wanted to play with something else – the feel and behaviour of the brush. If you’re not a trained caligrapher, the outcome of line, once you put the brush to paper, often becomes very uncertain. I like that. It gives you something extra, something you did not forsee when you planned to draw that line. Suddenly, something emerges, and asks you to draw another line, and another, until it doens’t look like the funnly little guy you were about to draw, but has grown ugly hairs, a strange nose, huge feet, miserable details. Actually, this reminds me of the kind of things I would be doodling in high school during my German classes…
So the rest of this coding doodle has been into getting the brush to behave a little erattic, hard to know. A sense of pressure, and ink flowing too fast from your brush if you stay on one place. Once I got that part running, and filtered out some performance issues in firefox ( it’s much smoother in a webkit browser … ) I realized that it’s still all just a sequence of XY coordinates that can be played back as an animation. That’s a nice bonus feature!
It doesn’t use a database at all for a change. The completed canvas piece is retrieved as bitmap data, sent to PHP and converted/saved to disk. The entire array of points for the animation is stored as a json file and retrieved by the javascript on the page as a JSONP request. so there’s very little server side intelligence. I like that, for a change. I think I feel creative. suddenly. Doodling is good for you, so … come on … doodle something and send it to me.