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.js
HTML5 Canvas via Paper.js
Websockets 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.g...
var server = http.createServer(app).listen(
app.get('port')
);
var io =
require('socket.io').listen( server );
app.js
Frid...
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 layout
block content
canvas(id="draw",
resize="true",
keepalive="true" )
script(type="text/paperscript",
src="..."...
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 = ...
io.on( 'continuePath',
function( data, sessionId ) {
continuePath(data.top,
data.bottom,
sessionId)
view.draw();
})
/publi...
function continuePath(top,bottom,sessionId) {
var path = paths[sessionId]
path.add(top)
path.insert(0, bottom)
}
/public/j...
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 back
to every other user
Friday, 27 September 13
5. Paper.js draws other peoples
drawings 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
Upcoming SlideShare
Loading in...5
×

Real-time collaborative drawing

2,096

Published on

How to make a real-time collaborative drawing app using HTML5 Canvas, Websockets & Node.JS

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,096
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Real-time collaborative drawing

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

    Clipping is a handy way to collect important slides you want to go back to later.

×