May 11th, 2011                           Carlo Zapponi   Mapping the world with TwitterBehind the <canvas> of a HTML5 appl...
who am I?@littleark             2
travelling
mixing cultures
creativity (and football)
a global innovation firm500+ people, 30+ nationalities, 40+ years of global experience                                     ...
a world of tweets                    8
it was a rainy afternoon......when I had the idea of remapping the world through Twitter.
I jumped into fast prototyping...and I coded a map of falling tweets on a canvas based on the Twitter Stream API
back to o ce they caught me!and they were excited! The personal sunday project turned into an internal frog project.
<canvas>HTML5Twitter Stream APIGeo LocationsYahoo! PlacemakerFlash *
A World of Tweets           http://www.aworldoftweets.comInnovative real-time 2/3D info-visualization of activity         ...
a world of tweetsa real-time data infographics of the twitter sphere
one minute videoa walkthrough video of A world of Tweets
multi layers structureAWOT is based on a stack of transparent background canvases
60+ millions tweets229 countriesUSA, Brazil and Indonesia topEvent related hot spots
worldwide successAWOT generated more than 30,000           AWOT has been featured on Timetweets in one week. The web site ...
other versions                 20
SXSW 2011            http://aworldoftweets.com/sxsw
IE9 LAUNCH             http://aworldoftweets.com/ie9
Salone del Mobile                    http://aworldoftweets.com/salone
Crowd Tracking ToolsAWOT can be used as a crowd tracking system for urban areas (coming soon).
<canvas>the good parts                 25
Do you know about canvas?
Have you written a piece of code with canvas?
Have you deployed a web application with canvas?
the <canvas> elementprovides scripts with a resolution-dependent bitmap canvas, which can be used for       rendering grap...
canvas is part of HTML5canvas allows drawingcanvas has a simple API
globalAlphaglobalCompositeOperationstrokeStylefillStylelineWidthlineCaplineJoin canvas API is simple to learnmiterLimit    ...
draw shapesdraw textsolid and gradient paintdraw and tweak bitmapsplay with videosapply transformations
canvas has no memorycanvas is not 3D yetcanvas runs in many browsers
IE 9Firefox 3.0+Safari 3.0+Chrome 3.0+Opera 10.0+iOS Safari 3.2+Android 2.1+
highlighting interesting featuresAWOT insights                                    35
function loop(){ ctx.clearRect(0,0,canvas.width,canvas.height); draw(); //drawing functions}setInterval(loop,interval);   ...
var canvas=document.getElementById(“canvas”),    ctx=canvas.getContext(“2d”);ctx.globalAlpha=0.5;ctx.fillStyle=“rgba(255,2...
var ctx=document.getElementById(“canvas”).getContext(“2d”);ctx.fillStyle=“#ffff00”;ctx.fillRect(0,0,100,100);ctx.save();ct...
var image=new Image();image.onload=function(){drawImage(image,x,y); //placingdrawImage(image,x,y,width,height); //scalingd...
var imgData=context.getImageData(left,top,width,height);var pixelArray=imgData.data; //CanvasPixelArraymanipulatePixels(pi...
source-over       source-atop         source-in        source-out      lighter   xordestination-over   destination-atop   ...
lessons learnt through the journeytricks & tips                                     42
var canvas=document.createElement(“canvas”);if(canvas && canvas.getContext(“2d”)) {  //supported} else {  //not supported}...
faster                                                  slower             size matters.  canvas performances are tightly ...
function loop(){       var bounds=detectBoundingRect();       clearRect(bounds);       draw();     }             refresh o...
ctx.clearRect(0,0,width,height); //slowerctx.save();ctx.globalCompositeOperation=”copy”;ctx.fillStyle=”#ffffff”; //backgro...
function loop(){  draw();}setInterval(loop,Math.ceil(1000/60));          you can’t beat the screen            60Hz refresh...
var thisFrame = new Date().getTime();var dT = (thisFrame - this.lastFrame)/1000;this.lastFrame = thisFrame;sprite.x+= dX *...
var img=ctx.getImageData(0,0,width,height),    data=img.data,    length=data.length,    i=0,a,r,g,b;while(i<length){  r=da...
var img=ctx.getImageData(0,0,width,height),    data=img.data,    length=data.length,    i=0,a,r,g,b;while(i<length){  r=da...
var backBuffer=document.createElement(“canvas”);backBuffer.width=context.canvas.width;backBuffer.height=context.canvas.hei...
canvas           shapes drawing    double bu er            pixel size             functions         with drawImage        ...
.gpu {  -webkit-transform: rotate3d(0,0,1, 0deg);  -moz-transform: rotate3d(0,0,1, 0deg);  transform: rotate3d(0,0,1, 0deg...
don’t trust me. experiment alwaysthese tips are generally useful but di erent situations may need di erent solutions.     ...
carlo.zapponi@frogdesign.com@littlearkaworldoftweets.com
Mapping the world with Twitter
Mapping the world with Twitter
Upcoming SlideShare
Loading in...5
×

Mapping the world with Twitter

2,693

Published 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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,693
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mapping the world with Twitter

  1. 1. May 11th, 2011 Carlo Zapponi Mapping the world with TwitterBehind the <canvas> of a HTML5 application
  2. 2. who am I?@littleark 2
  3. 3. travelling
  4. 4. mixing cultures
  5. 5. creativity (and football)
  6. 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. 7. a world of tweets 8
  8. 8. it was a rainy afternoon......when I had the idea of remapping the world through Twitter.
  9. 9. I jumped into fast prototyping...and I coded a map of falling tweets on a canvas based on the Twitter Stream API
  10. 10. back to o ce they caught me!and they were excited! The personal sunday project turned into an internal frog project.
  11. 11. <canvas>HTML5Twitter Stream APIGeo LocationsYahoo! PlacemakerFlash *
  12. 12. A World of Tweets http://www.aworldoftweets.comInnovative real-time 2/3D info-visualization of activity in the twitter-sphere
  13. 13. a world of tweetsa real-time data infographics of the twitter sphere
  14. 14. one minute videoa walkthrough video of A world of Tweets
  15. 15. multi layers structureAWOT is based on a stack of transparent background canvases
  16. 16. system mapgeo-located based architecture built on top of the Twitter Stream API and Yahoo! Placemaker
  17. 17. 60+ millions tweets229 countriesUSA, Brazil and Indonesia topEvent related hot spots
  18. 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. 19. other versions 20
  20. 20. SXSW 2011 http://aworldoftweets.com/sxsw
  21. 21. IE9 LAUNCH http://aworldoftweets.com/ie9
  22. 22. Salone del Mobile http://aworldoftweets.com/salone
  23. 23. Crowd Tracking ToolsAWOT can be used as a crowd tracking system for urban areas (coming soon).
  24. 24. <canvas>the good parts 25
  25. 25. Do you know about canvas?
  26. 26. Have you written a piece of code with canvas?
  27. 27. Have you deployed a web application with canvas?
  28. 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. 29. canvas is part of HTML5canvas allows drawingcanvas has a simple API
  30. 30. globalAlphaglobalCompositeOperationstrokeStylefillStylelineWidthlineCaplineJoin canvas API is simple to learnmiterLimit 21 attributes and 45 methodsshadowO setXshadowO setY
  31. 31. draw shapesdraw textsolid and gradient paintdraw and tweak bitmapsplay with videosapply transformations
  32. 32. canvas has no memorycanvas is not 3D yetcanvas runs in many browsers
  33. 33. IE 9Firefox 3.0+Safari 3.0+Chrome 3.0+Opera 10.0+iOS Safari 3.2+Android 2.1+
  34. 34. highlighting interesting featuresAWOT insights 35
  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. 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. 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. 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. 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. 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. 41. lessons learnt through the journeytricks & tips 42
  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. 43. faster slower size matters. canvas performances are tightly bound to its size
  44. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 54. carlo.zapponi@frogdesign.com@littlearkaworldoftweets.com

×