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

1. May 11th, 2011
Carlo Zapponi
Mapping the world with Twitter
Behind the <canvas> of a HTML5 application

2. who am I?
@littleark
2

3. travelling

4. mixing cultures

5. creativity (and football)

7. a global innovation firm
500+ 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

8. a world of tweets
8

9. it was a rainy afternoon...
...when I had the idea of remapping the world through Twitter.

10. I jumped into fast prototyping
...and I coded a map of falling tweets on a canvas based on the Twitter Stream API

11. back to o ce they caught me!
and they were excited! The personal sunday project turned into an internal frog project.

12. <canvas>
HTML5
Twitter Stream API
Geo Locations
Yahoo! Placemaker
Flash *

13. A World of Tweets
http://www.aworldoftweets.com
Innovative real-time 2/3D info-visualization of activity
in the twitter-sphere

14. a world of tweets
a real-time data infographics of the twitter sphere

16. multi layers structure
AWOT is based on a stack of transparent background canvases

17. system map
geo-located based architecture built on top of the Twitter Stream API and Yahoo!
Placemaker

18. 60+ millions tweets
229 countries
USA, Brazil and Indonesia top
Event related hot spots

19. worldwide success
AWOT generated more than 30,000 AWOT has been featured on Time
tweets in one week. The web site had Magazine, Tech Crunch, Harvard
more than 75,000 unique visitors during Business Review, PSFK, Chrome
the launch week. Experiments, etc.

20. other versions
20

21. SXSW 2011
http://aworldoftweets.com/sxsw

22. IE9 LAUNCH
http://aworldoftweets.com/ie9

23. Salone del Mobile
http://aworldoftweets.com/salone

24. Crowd Tracking Tools
AWOT can be used as a crowd tracking system for urban areas (coming soon).

25. <canvas>
the good parts
25

26. Do you know about canvas?

27. Have you written a piece of code with canvas?

28. Have you deployed a web application with canvas?

29. the <canvas> element
provides scripts with a resolution-dependent bitmap canvas, which can be used for
rendering graphs, game graphics, or other visual images on the fly.

30. canvas is part of HTML5
canvas allows drawing
canvas has a simple API

31. globalAlpha
globalCompositeOperation
strokeStyle
fillStyle
lineWidth
lineCap
lineJoin canvas API is simple to learn
miterLimit 21 attributes and 45 methods
shadowO setX
shadowO setY

32. draw shapes
draw text
solid and gradient paint
draw and tweak bitmaps
play with videos
apply transformations

33. canvas has no memory
canvas is not 3D yet
canvas runs in many browsers

34. IE 9
Firefox 3.0+
Safari 3.0+
Chrome 3.0+
Opera 10.0+
iOS Safari 3.2+
Android 2.1+

35. highlighting interesting features
AWOT insights
35

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

37. 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);
transparency
canvas provides both a global alpha attribute and color based alpha

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

39. var image=new Image();
image.onload=function(){
drawImage(image,x,y); //placing
drawImage(image,x,y,width,height); //scaling
drawImage(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

40. var imgData=context.getImageData(left,top,width,height);
var pixelArray=imgData.data; //CanvasPixelArray
manipulatePixels(pixelArray);
context.putImageData(imgData,x,y);
pixel data manipulation
the canvas element lets you play directly with pixels at the byte level

41. source-over source-atop source-in source-out lighter xor
destination-over destination-atop destination-in destination-out darker copy
globalCompositeOperation
canvas defines 12 composition operations

42. lessons learnt through the journey
tricks & tips
42

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

44. faster
slower
size matters.
canvas performances are tightly bound to its size

45. function loop(){
var bounds=detectBoundingRect();
clearRect(bounds);
draw();
}
refresh only what matters
don’t clear the whole canvas if you can. clear only the area that changed last.

46. ctx.clearRect(0,0,width,height); //slower
ctx.save();
ctx.globalCompositeOperation=”copy”;
ctx.fillStyle=”#ffffff”; //background color
ctx.fillRect(0,0,width,height); //faster
ctx.restore();
clearRect vs copy
composite operation copy it’s faster with transformations and clipping

47. function loop(){
draw();
}
setInterval(loop,Math.ceil(1000/60));
you can’t beat the screen
60Hz refresh rate means a frame each 16.7ms
Align animations to the refresh speed (16.7ms=60fps - 33.4ms=30fps)

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

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;
}
video memory is slow
decrease the rate of requests to video memory. save a big chunk of data and use it.

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

51. 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 er
decrease the rate of requests to video memory. save a big chunk of data and use it.

52. 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 9fps
1000px x 1000px
40% 50% 92%
comparison: FPS and CPU %
http://jsperf.com/vsummit-canvas-perf/5

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

54. don’t trust me. experiment always
these 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 .

55. carlo.zapponi@frogdesign.com
@littleark
aworldoftweets.com