Cooperative painting program
« Saturday, May 31, 2014 »

Html5 JavaScript Nodejs Socket.io

For the last couple of months, I've been working on a small project to stay in touch with my dear one when I'm away. It started with nothing but it gradually end up looking like something. Today, I'm proud enough to talk about it a little here. It's a cooperative painting program written in html5 and javascript. Technically, the backend server isn't really that important and there are chances that I'll move to Gevent later.

Cooperative work

The way it work is that each connected user can edit the same canvas. Each stroke are visible as the users draw them, it might be subject to change to reduce the bandwidth used. For exemple, on a mobile phone, it could make more sense to send the stroke once the person lift his finger/stylus from the screen. But it would be hard to know what other people are doing unless we can see as they draw what they draw.

Currently, the project implements a set of brushed (really simple ones), a simple color picker and a rectangle fill tool. I also implemented random color as you draw and a few things like that. I also recently added a chat that makes use of WebNotification API. The UI is quite terrible at the moment but it is something that I'm working on. I also have rooms which makes it easy to have multiple users drawing on different canvas.

What's next

What's next is hard to say. I definitely want to redesign the UI so it works well on tablets and phones. I might want to make a UI specific for the PC as the screen is a bit bigger and we can use a mouse or another pointing device that is much more accurate than our fingers.

I want to add more brushes, copy/paste part of the canvas. Selection tools and move tools. I want to have real users that can register to the site and add “roles” to the room. One room could be owned by a user and the admin should be able to control who can draw and who can see etc. Having real users will be a big step for the project. It will be possible to know who is working with you and prevent unknown people to mess with your work.

One other big step will be to add a database that will save the progress done on the canvas. Currently most of the work is in memory and for that reason, it isn't really safe as if a canvas would get big enough. My server might start swaping memory to disk. On each update, every canvas are deleted.

Screenshots

SimplePainter

comments powered by Disqus

Copyright © 2015 Loïc Faure-Lacroix