A friend forwarded a email to me a couple days ago from a researcher who wanted to record children sketching on a computer using a graphics tablet. So they could play it back later and watch how they did it etc. It sounded like a cool little app and as I was bored while waiting for a plane back from the IJTC conferance I thought I would have a quick go, how hard can it be 🙂

So here is what I had after a couple hours:


The biggest challenge I had was to stop adding more and more features as it was so easy. If I do some more then I would like to make it save to my website so I can have a gallery of what people have created that other people can replay, maybe next time I have a flight I will do that.

To start with I just wanted to create a simple canvas that I could scribble on and see how it worked, I was suprised how simple it was. Here is the code:

Stage{
    title: "Sketch"
    scene:
    scene = Scene{
        width: 400
        height: 400
        content: [
            lines
            Rectangle {
                width: bind scene.width
                height: bind scene.height
                fill: Color.TRANSPARENT
                onMousePressed: function (e:MouseEvent) {
                    insert currentPath = Path{
                        elements: MoveTo{ x: e.x y: e.y }
                    } into lines.content;
                }
                onMouseDragged: function (e:MouseEvent) {
                    insert LineTo{ x: e.x y: e.y } into currentPath.elements;
                }
                onMouseReleased: function (e:MouseEvent) {
                    insert LineTo{ x: e.x y: e.y } into currentPath.elements;
                    currentPath = null;
                }
            }
        ]
    }
}

It works pretty well for such a basic way of doing it but is limited by the frequency at which it receives mouse events. Interestingly it works way better with a graphics tablet than a mouse as you seem to get many more events. There are also some Java libraries out there for interfacing with graphics tablets to get pressure and tilt information so we could link that in to vary the stroke width for example. I also thought about algorithms that could convert the series of points into smooth curves. There are loads of cool things that could be done with this but it is amazing how useable the dumb/simple version is.

If you would like the Netbeans project with the source so you can play with it Dowload Here. If you have any extra features you add please send them to me and I will post a new version. If there is much interest then we could create a opensource project for a JavaFX Painting application.