Mapping the world with Twitter

  • 2,619 views
Uploaded on

These are the slides of the speech about "A world of tweets" internals I gave at the jsDay in Verona on 11th May 2011.

These are the slides of the speech about "A world of tweets" internals I gave at the jsDay in Verona on 11th May 2011.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,619
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
10
Comments
0
Likes
0

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

Transcript

  • 1. May 11th, 2011 Carlo Zapponi Mapping the world with TwitterBehind the <canvas> of a HTML5 application
  • 2. who am I?@littleark 2
  • 3. travelling
  • 4. mixing cultures
  • 5. creativity (and football)
  • 6. a global innovation firm500+ people, 30+ nationalities, 40+ years of global experience Amsterdam, Netherlands Munich, Germany Seattle, WA Milan, Italy New York, NY San Francisco, CA Austin, TX Shanghai, China
  • 7. a world of tweets 8
  • 8. it was a rainy afternoon......when I had the idea of remapping the world through Twitter.
  • 9. I jumped into fast prototyping...and I coded a map of falling tweets on a canvas based on the Twitter Stream API
  • 10. back to o ce they caught me!and they were excited! The personal sunday project turned into an internal frog project.
  • 11. <canvas>HTML5Twitter Stream APIGeo LocationsYahoo! PlacemakerFlash *
  • 12. A World of Tweets http://www.aworldoftweets.comInnovative real-time 2/3D info-visualization of activity in the twitter-sphere
  • 13. a world of tweetsa real-time data infographics of the twitter sphere
  • 14. one minute videoa walkthrough video of A world of Tweets
  • 15. multi layers structureAWOT is based on a stack of transparent background canvases
  • 16. system mapgeo-located based architecture built on top of the Twitter Stream API and Yahoo! Placemaker
  • 17. 60+ millions tweets229 countriesUSA, Brazil and Indonesia topEvent related hot spots
  • 18. worldwide successAWOT generated more than 30,000 AWOT has been featured on Timetweets in one week. The web site had Magazine, Tech Crunch, Harvardmore than 75,000 unique visitors during Business Review, PSFK, Chromethe launch week. Experiments, etc.
  • 19. other versions 20
  • 20. SXSW 2011 http://aworldoftweets.com/sxsw
  • 21. IE9 LAUNCH http://aworldoftweets.com/ie9
  • 22. Salone del Mobile http://aworldoftweets.com/salone
  • 23. Crowd Tracking ToolsAWOT can be used as a crowd tracking system for urban areas (coming soon).
  • 24. <canvas>the good parts 25
  • 25. Do you know about canvas?
  • 26. Have you written a piece of code with canvas?
  • 27. Have you deployed a web application with canvas?
  • 28. the <canvas> elementprovides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
  • 29. canvas is part of HTML5canvas allows drawingcanvas has a simple API
  • 30. globalAlphaglobalCompositeOperationstrokeStylefillStylelineWidthlineCaplineJoin canvas API is simple to learnmiterLimit 21 attributes and 45 methodsshadowO setXshadowO setY
  • 31. draw shapesdraw textsolid and gradient paintdraw and tweak bitmapsplay with videosapply transformations
  • 32. canvas has no memorycanvas is not 3D yetcanvas runs in many browsers
  • 33. IE 9Firefox 3.0+Safari 3.0+Chrome 3.0+Opera 10.0+iOS Safari 3.2+Android 2.1+
  • 34. highlighting interesting featuresAWOT insights 35
  • 35. function loop(){ ctx.clearRect(0,0,canvas.width,canvas.height); draw(); //drawing functions}setInterval(loop,interval); clear and redraw the traditional animation loop through the use of simple shapes
  • 36. var canvas=document.getElementById(“canvas”), ctx=canvas.getContext(“2d”);ctx.globalAlpha=0.5;ctx.fillStyle=“rgba(255,255,0,0.5)”;ctx.fillRect(50,50,100,100); transparencycanvas provides both a global alpha attribute and color based alpha
  • 37. var ctx=document.getElementById(“canvas”).getContext(“2d”);ctx.fillStyle=“#ffff00”;ctx.fillRect(0,0,100,100);ctx.save();ctx.fillStyle=“#339933”;ctx.globalAlpha=0.5;ctx.fillRect(50,50,100,100);ctx.restore();ctx.fillRect(100,100,100,100); canvas state with save() and restore() a canvas keeps a stack of states of its main attributes, transformations and clipping
  • 38. var image=new Image();image.onload=function(){drawImage(image,x,y); //placingdrawImage(image,x,y,width,height); //scalingdrawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight); //slicing}img.src=”image.png”; using images the canvas element lets you draw images on its surface
  • 39. var imgData=context.getImageData(left,top,width,height);var pixelArray=imgData.data; //CanvasPixelArraymanipulatePixels(pixelArray);context.putImageData(imgData,x,y); pixel data manipulation the canvas element lets you play directly with pixels at the byte level
  • 40. source-over source-atop source-in source-out lighter xordestination-over destination-atop destination-in destination-out darker copy globalCompositeOperation canvas defines 12 composition operations
  • 41. lessons learnt through the journeytricks & tips 42
  • 42. var canvas=document.createElement(“canvas”);if(canvas && canvas.getContext(“2d”)) { //supported} else { //not supported} always check if canvas is supported. browser detection is not enough.
  • 43. faster slower size matters. canvas performances are tightly bound to its size
  • 44. function loop(){ var bounds=detectBoundingRect(); clearRect(bounds); draw(); } refresh only what mattersdon’t clear the whole canvas if you can. clear only the area that changed last.
  • 45. ctx.clearRect(0,0,width,height); //slowerctx.save();ctx.globalCompositeOperation=”copy”;ctx.fillStyle=”#ffffff”; //background colorctx.fillRect(0,0,width,height); //fasterctx.restore(); clearRect vs copy composite operation copy it’s faster with transformations and clipping
  • 46. function loop(){ draw();}setInterval(loop,Math.ceil(1000/60)); you can’t beat the screen 60Hz refresh rate means a frame each 16.7msAlign animations to the refresh speed (16.7ms=60fps - 33.4ms=30fps)
  • 47. var thisFrame = new Date().getTime();var dT = (thisFrame - this.lastFrame)/1000;this.lastFrame = thisFrame;sprite.x+= dX * dT; //smooth movement don’t rely on a given interval always calculate the real time between two frames to smooth the animations.
  • 48. var img=ctx.getImageData(0,0,width,height), data=img.data, length=data.length, i=0,a,r,g,b;while(i<length){ r=data[i-3]; g=data[i-2]; b=data[i-1]; a=data[i]; //alpha i+=4;} video memory is slowdecrease the rate of requests to video memory. save a big chunk of data and use it.
  • 49. var img=ctx.getImageData(0,0,width,height), data=img.data, length=data.length, i=0,a,r,g,b;while(i<length){ r=data[i-3]; g=data[i-2]; b=data[i-1]; a=data[i]; //alpha i+=4;} CanvasPixelArray is slow always cache the data array in a proper javascript object
  • 50. var backBuffer=document.createElement(“canvas”);backBuffer.width=context.canvas.width;backBuffer.height=context.canvas.height;var bctx=backBuffer.getContext(“2d”);drawOnBackBuffer();context.drawImage(backBuffer,0,0); if makes sense then double bu erdecrease the rate of requests to video memory. save a big chunk of data and use it.
  • 51. canvas shapes drawing double bu er pixel size functions with drawImage manipulation 59fps 59fps 55fps 100px x 100px 10% 10% 15% 52fps 56fps 24fps 500px x 500px 70% 20% 38% 50fps 44fps 9fps1000px x 1000px 40% 50% 92% comparison: FPS and CPU % http://jsperf.com/vsummit-canvas-perf/5
  • 52. .gpu { -webkit-transform: rotate3d(0,0,1, 0deg); -moz-transform: rotate3d(0,0,1, 0deg); transform: rotate3d(0,0,1, 0deg);} hardware acceleration HTML5 supports GPU accelerated operations. To be use only if you experience a true performance win. It might not be better.
  • 53. don’t trust me. experiment alwaysthese tips are generally useful but di erent situations may need di erent solutions. Now go and try yourself finding new ways to improve your stu .
  • 54. carlo.zapponi@frogdesign.com@littlearkaworldoftweets.com