Real-time collaborative drawing

2,341
-1

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,341
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.

×