Real-time collaborative drawing
-
Upload
richard-powell -
Category
Technology
-
view
116 -
download
1
description
Transcript of Real-time collaborative drawing
![Page 1: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/1.jpg)
Real-Time Collaborative Drawing
Friday, 27 September 13
![Page 2: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/2.jpg)
About Me
Friday, 27 September 13
![Page 3: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/3.jpg)
Friday, 27 September 13
![Page 4: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/4.jpg)
node-js-draw.jit.su/
Friday, 27 September 13
![Page 5: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/5.jpg)
Lets break this down
Friday, 27 September 13
![Page 6: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/6.jpg)
A Web Server
Friday, 27 September 13
![Page 7: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/7.jpg)
A Canvas
Friday, 27 September 13
![Page 8: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/8.jpg)
Real-time Communication
Friday, 27 September 13
![Page 9: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/9.jpg)
Node.js via Express.jsHTML5 Canvas via Paper.jsWebsockets via socket.io
Friday, 27 September 13
![Page 10: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/10.jpg)
Run it yourself!
Friday, 27 September 13
![Page 12: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/12.jpg)
$ git clone https://github.com/byrichardpowell/drawing.git
$ cd drawing
Friday, 27 September 13
![Page 13: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/13.jpg)
$ npm install
Friday, 27 September 13
![Page 14: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/14.jpg)
$ node app.js
Friday, 27 September 13
![Page 16: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/16.jpg)
Express.js
Friday, 27 September 13
![Page 17: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/17.jpg)
app.js node_modules package.json public routes views
Friday, 27 September 13
![Page 18: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/18.jpg)
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
![Page 19: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/19.jpg)
var server = http.createServer(app).listen( app.get('port') );
var io = require('socket.io').listen( server );
app.js
Friday, 27 September 13
![Page 20: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/20.jpg)
socket.on('startPath',function(data,id) {
socket.broadcast.emit('startPath', data,
id )
})
app.js
Friday, 27 September 13
![Page 21: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/21.jpg)
Paper.js
Friday, 27 September 13
![Page 22: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/22.jpg)
extends layoutblock content
canvas(id="draw", resize="true", keepalive="true" )
script(type="text/paperscript", src="...", canvas="draw")
/views/index.js
Friday, 27 September 13
![Page 23: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/23.jpg)
paperjs.org/tutorials/interaction/working-with-mouse-vectors/
Friday, 27 September 13
![Page 24: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/24.jpg)
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
![Page 25: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/25.jpg)
io.on( 'continuePath', function( data, sessionId ) {
continuePath(data.top, data.bottom, sessionId)
view.draw(); })
/public/javascripts/draw.js
Friday, 27 September 13
![Page 26: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/26.jpg)
function continuePath(top,bottom,sessionId) {
var path = paths[sessionId] path.add(top) path.insert(0, bottom)
}
/public/javascripts/draw.js
Friday, 27 September 13
![Page 27: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/27.jpg)
Summarise
Friday, 27 September 13
![Page 28: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/28.jpg)
1. Express.js Serves the HTML
Friday, 27 September 13
![Page 29: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/29.jpg)
2. A user draws.Paper.js intercepts the events
and draws
Friday, 27 September 13
![Page 30: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/30.jpg)
3. Socket.io passes the draw data to
Express.js
Friday, 27 September 13
![Page 31: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/31.jpg)
4. Express Passes the draw data backto every other user
Friday, 27 September 13
![Page 32: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/32.jpg)
5. Paper.js draws other peoplesdrawings using their sessionId
to keep track of different paths
Friday, 27 September 13
![Page 33: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/33.jpg)
Deployment
Friday, 27 September 13
![Page 35: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/35.jpg)
$ npm install jitsu -g
$ jitsu login
Friday, 27 September 13
![Page 36: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/36.jpg)
$ jitsu deploy
Friday, 27 September 13
![Page 37: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/37.jpg)
Friday, 27 September 13
![Page 38: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/38.jpg)
github.com/johnmclear/draw
Friday, 27 September 13
![Page 39: Real-time collaborative drawing](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c68c724a795915558b4580/html5/thumbnails/39.jpg)
www.serverdensity.com/
@byrichardpowell
bit.ly/12devsnode
Friday, 27 September 13