@byrichardpowellbyrichardpowell.co.uk   www.thap.co.uk
drawstuff.jit.su@byrichardpowell   byrichardpowell.co.uk   thap.co.uk
download nodejs: http://nodejs.org/                 sign up: http://nodejitsu.com/               (other hosting options av...
How do we make a real-time                       collaborative drawing... thing?@byrichardpowell   byrichardpowell.co.uk  ...
Using Events  User A draws: sends drawing to server                      |   Server passes User A’s drawing on to:        ...
canvas: paperjs                                  websockets: socket.io                                    nodejs: express@...
Installingnodejs & Express
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express -g$   cd Sites/nod...
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express$   cd Sites/node_p...
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express -g$   cd Sites/nod...
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express -g$   cd Sites/nod...
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express -g$   cd Sites/nod...
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express -g$   cd Sites/nod...
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express -g$   cd Sites/nod...
nodejs & expressdownload & install nodejs: nodejs.org/$   npm install nodemon -g$   npm install express -g$   cd Sites/nod...
Express Anatomy/node_modules/public/routes/viewsapp.jspackage.json
Working with paper.js
Running Paper.js// 1. Include script using Jadescript(‘javascript/lib/paper.js’)// 2. Canvas Elementcanvas(id=‘myCanvas’, ...
Mouse Down & Up// in canvas.jsfunction onMouseDown(e) {  path = new Path()  path.fillColor = active_rgb_color  path.add(e....
Mouse Drag// in canvas.jsfunction onMouseDrag(e) {    // more info: http://bit.ly/mouse-vectors    var step = e.delta / 2 ...
Using Socket.io
Installing socket.io$ npm install socket.io express// app.jsvar io = require(socket.io).listen(app)// views/layout.jadescr...
user: sendfunction onMouseDrag(e) {  path_to_send.push({ “x” : e.x, “y” : e.y })  setInterval( function() {    var data = ...
serversocket.on(‘draw:progress’, function( a, d ) {  io.sockets.emit(‘draw:progress’, a, d)}socket.on(‘draw:end’, function...
user: recievesocket.on(‘draw:progress’, function( a, d ) {  if ( a !== uid && d ) {    progress_external_path( d, a )  }}s...
user: recieveprogress_external_path = function( paths , a ) {    var path = external_paths[a];    if (!path) {      // cre...
And thats about it
github.com/byrichardpowell/draw     byrichardpowell.co.uk      @byrichardpowell     richardo@gmail.com
Upcoming SlideShare
Loading in...5
×

Draw stuff at @jsnortheast

3,715

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,715
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • * Hi, Im Richard\n* web designer, alot of time writing Javascript\n* Work for Thap, cool company\n* Give jQuery workshops\n
  • * Real-Time Collaborative Drawing tool\n* Lets check it out\n
  • * How many people here have installed nodejs?\n* Would love it if you could, can follow some of the slides & run your first nodejs App\n* Can help at the end\n* Please interrupt if you have questions.\n
  • * How do you make a real-time collaborative drawing thing?\n* Simpler than you might think\n
  • * Its all about events\n* When user A draws, they send their drawing to the server.\n* Server then sends the drawing onto all other users \n
  • * HTML5 Canvas: Element, Drawing Context, Bitmap using javascript.\n* PaperJS: covers key concepts: points, paths, shapes, text, animations\n* Websockets: Continuous 2 way connection between 2 points. Better than AJAX\n* Nodejs: How many people know of this?\n* Express makes it easy, will try and install both during presentation\n
  • * Try and code-along. Will offer help at end.\n
  • * Hopefully you’ve already done this\n
  • * Designers: Dont be scared of terminal\n* NPM: handles javascript packages. Like dealing with Ruby gems\n* Nodemon, runs your app but restarts when you make changes\n* I’ve wasted a few hours by not using nodemon\n* This command means you can use nodemon wherever you want\n
  • * You can now create new Express applications\n* Express is a great little framework\n
  • * Cd means change directory\n* Im going to create my app in a folder called jsnortheast\n
  • * Creates a new Express application\n
  • * Express has dependencies; jade, for example.\n* Jade is a templating engine for HTML, think HAML for javascript\n* this command installs those dependencies so that Express can run\n
  • * Use node monitor to run the newly created express application\n
  • * You should see “Welcome to Express”\n\n
  • * Follows familiar MVC structure\n* node_modules - dependencies reside here: jade, socket.io etc\n* public: images, css, client-side javascript\n* routes: the URL structure of your application\n* views: the HTML (Jade) of your app\n* app.js: runs your application\n* package.json: dependencies list & versions, dont need to edit\n
  • * Im using a very small part of paper.js\n* Honestly, its all on the paperjs website.\n
  • * 1. Include paperJS on the page. This is Jade which is converted into a HTML script tag\n* 2. Include a Canvas element & tell paperJS to automatically re-size it to the window dimensions\n* 3. A file our javascript. Type tells paperJS to run it, canvas tells paperJS which canvas to use \n
  • * on mouse down we create a new path at the cursors poistion and give it a color\n* on mouse up we close the path & smooth it\n
  • * make path wider/narrower depending on speed of mouse movement\n* Add new points to the path at the cursors position\n* Paths are drawn as the user drags & closed as they mouse up\n
  • * Socket io passes draw data from user to server to other users in real time\n
  • * First install a version of socket.io just for express\n* Include socket.io in the HTML\n* Connect to the server in the client side javascript\n
  • * on mouse drag we add points to an array\n* Every 100ms we send that array to the server with a UID and the event name: ‘draw:progress’\n* on mouse up we send the the array and UID to the server\n* this time we send it with a different event name.\n
  • * Rugby ball pass, recieves data, passes on to users as quickly as possible\n
  • * On both types of draw event, user checks ‘ is this my UID ? ‘\n* if not it draws that path.\n
  • * first we check to see if a path has already been created using that UID (a)\n* if not we create it\n* Then we add each point in the paths array to the path\n
  • * This was a hack day project, you can achieve a lot in 8 hours\n* This is really fun technology\n* Very popular tech: 1,500 visits in 5 days.\n* Real-time good to be playing with\n\n \n
  • * Please do download the source code & create your own ‘things’\n* I wrote a blog post about draw stuff, check it out\n* I tweet a lot, feel free to tweet me questions or ask for help, or email me.\n* Any questions?\n\n
  • Draw stuff at @jsnortheast

    1. 1. @byrichardpowellbyrichardpowell.co.uk www.thap.co.uk
    2. 2. drawstuff.jit.su@byrichardpowell byrichardpowell.co.uk thap.co.uk
    3. 3. download nodejs: http://nodejs.org/ sign up: http://nodejitsu.com/ (other hosting options available)@byrichardpowell byrichardpowell.co.uk thap.co.uk
    4. 4. How do we make a real-time collaborative drawing... thing?@byrichardpowell byrichardpowell.co.uk thap.co.uk
    5. 5. Using Events User A draws: sends drawing to server | Server passes User A’s drawing on to: |User B, C, D, E, F who draw User A’s drawing
    6. 6. canvas: paperjs websockets: socket.io nodejs: express@byrichardpowell byrichardpowell.co.uk thap.co.uk
    7. 7. Installingnodejs & Express
    8. 8. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express -g$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    9. 9. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    10. 10. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express -g$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    11. 11. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express -g$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    12. 12. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express -g$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    13. 13. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express -g$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    14. 14. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express -g$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    15. 15. nodejs & expressdownload & install nodejs: nodejs.org/$ npm install nodemon -g$ npm install express -g$ cd Sites/node_projects/jsnortheast/$ express$ npm install -d$ nodemon app.jsBrowse to: 127.0.0.1:3000
    16. 16. Express Anatomy/node_modules/public/routes/viewsapp.jspackage.json
    17. 17. Working with paper.js
    18. 18. Running Paper.js// 1. Include script using Jadescript(‘javascript/lib/paper.js’)// 2. Canvas Elementcanvas(id=‘myCanvas’, resize=”true”)// 3. Canvas Behaviourscript(src=‘javascript/canvas.js’, type=”text/paperscript”, canvas=”myCanvas”)
    19. 19. Mouse Down & Up// in canvas.jsfunction onMouseDown(e) { path = new Path() path.fillColor = active_rgb_color path.add(e.point)}function onMouseUp(e) { path.add( e.point ) path.closed = true path.smooth()}
    20. 20. Mouse Drag// in canvas.jsfunction onMouseDrag(e) { // more info: http://bit.ly/mouse-vectors var step = e.delta / 2 step.angle += 90 var top = e.middlePoint + step var bottom = e.middlePoint - step path.add(top) path.inset(0, bottom) path.smooth();}
    21. 21. Using Socket.io
    22. 22. Installing socket.io$ npm install socket.io express// app.jsvar io = require(socket.io).listen(app)// views/layout.jadescript(src=socket.io/socket.io.js)// public/javascripts/canvas.jsvar socket = io.connect(/)
    23. 23. user: sendfunction onMouseDrag(e) { path_to_send.push({ “x” : e.x, “y” : e.y }) setInterval( function() { var data = JSON.stringify( path_to_send ) socket.emit(‘draw:progress’, uid, data) }, 100)}function onMouseUp(e) { var data = JSON.stringify( path_to_send ) socket.emit(‘draw:end’, uid, data)}
    24. 24. serversocket.on(‘draw:progress’, function( a, d ) { io.sockets.emit(‘draw:progress’, a, d)}socket.on(‘draw:end’, function( a, d ) { io.sockets.emit(‘draw:end’, a, d)}
    25. 25. user: recievesocket.on(‘draw:progress’, function( a, d ) { if ( a !== uid && d ) { progress_external_path( d, a ) }}socket.on(‘draw:end’, function( a, d ) { if ( a !== uid && d ) { end_external_path( d, a ) }}
    26. 26. user: recieveprogress_external_path = function( paths , a ) { var path = external_paths[a]; if (!path) { // create new path // store using external UID in object } for ( i = 0; i<paths.length; i++ ) { // add point to path }}
    27. 27. And thats about it
    28. 28. github.com/byrichardpowell/draw byrichardpowell.co.uk @byrichardpowell richardo@gmail.com

    ×