KEMBAR78
Mapping the world with Twitter | PDF
May 11th, 2011
                           Carlo Zapponi


   Mapping the world with Twitter
Behind the <canvas> of a HTML5 application
who am I?
@littleark




             2
travelling
mixing cultures
creativity (and football)
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
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>
HTML5
Twitter Stream API
Geo Locations
Yahoo! Placemaker
Flash *
A World of Tweets
           http://www.aworldoftweets.com
Innovative real-time 2/3D info-visualization of activity
                  in the twitter-sphere
a world of tweets
a real-time data infographics of the twitter sphere
multi layers structure
AWOT is based on a stack of transparent background canvases
system map
geo-located based architecture built on top of the Twitter Stream API and Yahoo!
                                 Placemaker
60+ millions tweets
229 countries
USA, Brazil and Indonesia top
Event related hot spots
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.
other versions



                 20
SXSW 2011




            http://aworldoftweets.com/sxsw
IE9 LAUNCH




             http://aworldoftweets.com/ie9
Salone del Mobile




                    http://aworldoftweets.com/salone
Crowd Tracking Tools
AWOT 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> 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.
canvas is part of HTML5
canvas allows drawing
canvas has a simple API
globalAlpha
globalCompositeOperation
strokeStyle
fillStyle
lineWidth
lineCap
lineJoin canvas API is simple to learn
miterLimit     21 attributes and 45 methods

shadowO setX
shadowO setY
draw shapes
draw text
solid and gradient paint
draw and tweak bitmaps
play with videos
apply transformations
canvas has no memory
canvas is not 3D yet
canvas runs in many browsers
IE 9
Firefox 3.0+
Safari 3.0+
Chrome 3.0+
Opera 10.0+
iOS Safari 3.2+
Android 2.1+
highlighting interesting features

AWOT insights




                                    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
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
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
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
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
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
lessons learnt through the journey

tricks & tips




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

                                                  slower



             size matters.
  canvas performances are tightly bound to its size
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.
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
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)
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.
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.
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
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.
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
.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.
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 .
carlo.zapponi@frogdesign.com
@littleark
aworldoftweets.com

Mapping the world with Twitter