Real-Time Collaborative Drawing

Friday, 27 September 13

About Me

Friday, 27 September 13

Friday, 27 September 13

node-js-draw.jit.su/

Friday, 27 September 13

Lets break this down

Friday, 27 September 13

A Web Server

Friday, 27 September 13

A Canvas

Friday, 27 September 13

Real-time Communication

Friday, 27 September 13

Node.js via Express.jsHTML5 Canvas via Paper.jsWebsockets via socket.io

Friday, 27 September 13

Run it yourself!

Friday, 27 September 13

http://node.js.org

Friday, 27 September 13

$ git clone https://github.com/byrichardpowell/drawing.git

$ cd drawing

Friday, 27 September 13

$ npm install

Friday, 27 September 13

$ node app.js

Friday, 27 September 13

http://127.0.0.1:3000/

Friday, 27 September 13

Express.js

Friday, 27 September 13

app.js node_modules package.json public routes views

Friday, 27 September 13

var express = require('express') , routes = require('./routes')

app.configure(function(){ app.set('port', 3000);});

app.get('/', routes.index);

var server = http.createServer(app) .listen(app.get('port'));

app.js

Friday, 27 September 13

var server = http.createServer(app).listen( app.get('port') );

var io = require('socket.io').listen( server );

app.js

Friday, 27 September 13

socket.on('startPath',function(data,id) {

socket.broadcast.emit('startPath', data,

id )

})

app.js

Friday, 27 September 13

Paper.js

Friday, 27 September 13

extends layoutblock content

canvas(id="draw", resize="true", keepalive="true" )

script(type="text/paperscript", src="...", canvas="draw")

/views/index.js

Friday, 27 September 13

paperjs.org/tutorials/interaction/working-with-mouse-vectors/

Friday, 27 September 13

function onMouseDrag(event) {

var step = event.delta / 2 step.angle += 90 var top = event.middlePoint + step var bottom = event.middlePoint - step

continuePath( top, bottom, sessionId )

emit("continuePath", {top: top, bottom: bottom}, sessionId)

}

/public/javascripts/draw.js

Friday, 27 September 13

io.on( 'continuePath', function( data, sessionId ) {

continuePath(data.top, data.bottom, sessionId)

view.draw(); })

/public/javascripts/draw.js

Friday, 27 September 13

function continuePath(top,bottom,sessionId) {

var path = paths[sessionId] path.add(top) path.insert(0, bottom)

}

/public/javascripts/draw.js

Friday, 27 September 13

Summarise

Friday, 27 September 13

1. Express.js Serves the HTML

Friday, 27 September 13

2. A user draws.Paper.js intercepts the events

and draws

Friday, 27 September 13

3. Socket.io passes the draw data to

Express.js

Friday, 27 September 13

4. Express Passes the draw data backto every other user

Friday, 27 September 13

5. Paper.js draws other peoplesdrawings using their sessionId

to keep track of different paths

Friday, 27 September 13

Deployment

Friday, 27 September 13

www.nodejitsu.com/

Friday, 27 September 13

$ npm install jitsu -g

$ jitsu login

Friday, 27 September 13

$ jitsu deploy

Friday, 27 September 13

Friday, 27 September 13

github.com/johnmclear/draw

Friday, 27 September 13

www.serverdensity.com/

@byrichardpowell

bit.ly/12devsnode

Friday, 27 September 13