Real-Time Collaborative Drawing Friday, 27 September 13
Jan 27, 2015
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
$ 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
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
$ 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