Your SlideShare is downloading. ×
Draw stuff at @jsnortheast
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Draw stuff at @jsnortheast

3,544
views

Published on

Published in: Technology, Education

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. @byrichardpowellbyrichardpowell.co.uk www.thap.co.uk
    • 2. drawstuff.jit.su@byrichardpowell byrichardpowell.co.uk thap.co.uk
    • 3. download nodejs: http://nodejs.org/ sign up: http://nodejitsu.com/ (other hosting options available)@byrichardpowell byrichardpowell.co.uk thap.co.uk
    • 4. How do we make a real-time collaborative drawing... thing?@byrichardpowell byrichardpowell.co.uk thap.co.uk
    • 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. canvas: paperjs websockets: socket.io nodejs: express@byrichardpowell byrichardpowell.co.uk thap.co.uk
    • 7. Installingnodejs & Express
    • 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. 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. 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. 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. 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. 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. 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. 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. Express Anatomy/node_modules/public/routes/viewsapp.jspackage.json
    • 17. Working with paper.js
    • 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. 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. 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. Using Socket.io
    • 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. 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. 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. 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. 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. And thats about it
    • 28. github.com/byrichardpowell/draw byrichardpowell.co.uk @byrichardpowell richardo@gmail.com