1. @byrichardpowell
byrichardpowell.co.uk
www.thap.co.uk

2. drawstuff.jit.su
@byrichardpowell byrichardpowell.co.uk thap.co.uk

3. download nodejs: http://nodejs.org/
sign up: http://nodejitsu.com/
(other hosting options available)
@byrichardpowell byrichardpowell.co.uk thap.co.uk

4. How do we make a real-time
collaborative drawing... thing?
@byrichardpowell byrichardpowell.co.uk thap.co.uk

5. Using Events
User A draws: sends drawing to server
|
Server passes User A’s drawing on to:
|
User B, C, D, E, F who draw User A’s drawing

6. canvas: paperjs
websockets: socket.io
nodejs: express
@byrichardpowell byrichardpowell.co.uk thap.co.uk

7. Installing
nodejs & Express

8. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express -g
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

9. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

10. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express -g
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

11. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express -g
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

12. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express -g
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

13. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express -g
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

14. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express -g
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

15. nodejs & express
download & install nodejs: nodejs.org/
$ npm install nodemon -g
$ npm install express -g
$ cd Sites/node_projects/jsnortheast/
$ express
$ npm install -d
$ nodemon app.js
Browse to: 127.0.0.1:3000

16. Express Anatomy
/node_modules
/public
/routes
/views
app.js
package.json

17. Working with paper.js

18. Running Paper.js
// 1. Include script using Jade
script(‘javascript/lib/paper.js’)
// 2. Canvas Element
canvas(id=‘myCanvas’, resize=”true”)
// 3. Canvas Behaviour
script(src=‘javascript/canvas.js’, type=”text/
paperscript”, canvas=”myCanvas”)

19. Mouse Down & Up
// in canvas.js
function onMouseDown(e) {
path = new Path()
path.fillColor = active_rgb_color
path.add(e.point)
}
function onMouseUp(e) {
path.add( e.point )
path.closed = true
path.smooth()
}

20. Mouse Drag
// in canvas.js
function onMouseDrag(e) {
// more info: http://bit.ly/mouse-vectors
var step = e.delta / 2
step.angle += 90
var top = e.middlePoint + step
var bottom = e.middlePoint - step
path.add(top)
path.inset(0, bottom)
path.smooth();
}

21. Using Socket.io

22. Installing socket.io
$ npm install socket.io express
// app.js
var io = require('socket.io').listen(app)
// views/layout.jade
script(src='socket.io/socket.io.js')
// public/javascripts/canvas.js
var socket = io.connect('/')

23. user: send
function onMouseDrag(e) {
path_to_send.push({ “x” : e.x, “y” : e.y })
setInterval( function() {
var data = JSON.stringify( path_to_send )
socket.emit(‘draw:progress’, uid, data)
}, 100)
}
function onMouseUp(e) {
var data = JSON.stringify( path_to_send )
socket.emit(‘draw:end’, uid, data)
}

24. server
socket.on(‘draw:progress’, function( a, d ) {
io.sockets.emit(‘draw:progress’, a, d)
}
socket.on(‘draw:end’, function( a, d ) {
io.sockets.emit(‘draw:end’, a, d)
}

25. user: recieve
socket.on(‘draw:progress’, function( a, d ) {
if ( a !== uid && d ) {
progress_external_path( d, a )
}
}
socket.on(‘draw:end’, function( a, d ) {
if ( a !== uid && d ) {
end_external_path( d, a )
}
}

26. user: recieve
progress_external_path = function( paths , a ) {
var path = external_paths[a];
if (!path) {
// create new path
// store using external UID in object
}
for ( i = 0; i<paths.length; i++ ) {
// add point to path
}
}

27. And thats about it

28. github.com/byrichardpowell/draw
byrichardpowell.co.uk
@byrichardpowell
richardo@gmail.com