Mapping the world with TwitterBehind the <canvas> of a HTML5 application

May 11th, 2011Carlo Zapponi

2

who am I?@littleark

travelling

mixing cultures

creativity (and football)

a global innovation firm500+ people, 30+ nationalities, 40+ years of global experience

New York, NYMilan, Italy

Austin, TX

Seattle, WA

Shanghai, China

Munich, Germany

San Francisco, CA

Amsterdam, Netherlands

8

a world of tweets

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.

HTML5

Geo LocationsTwitter Stream API

<canvas>

Yahoo! PlacemakerFlash*

A World of Tweetshttp://www.aworldoftweets.com

Innovative real-time 2/3D info-visualization of activity in the twitter-sphere

a world of tweetsa real-time data infographics of the twitter sphere

one minute videoa walkthrough video of A world of Tweets

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

some facts from AWOT

Event related hot spots

60+ millions tweets

USA, Brazil and Indonesia top

229 countries

AWOT generated more than 30,000 tweets in one week. The web site had more than 75,000 unique visitors during the launch week.

AWOT has been featured on Time Magazine, Tech Crunch, Harvard Business Review, PSFK, Chrome Experiments, etc.

worldwide success

20

other versions

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

25

<canvas>the good parts

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 HTML5canvas allows drawingcanvas has a simple API

globalAlphaglobalCompositeOperationstrokeStylefillStylelineWidthlineCaplineJoinmiterLimitshadowO"setXshadowO"setYshadowBlurshadowColorfonttextAligntextBaselinesaverestorescalerotatetranslatetransformsetTransformcreateLinearGradientcreateRadialGradientcreatePatternclearRectfillRectstrokeRectbeginPathclosePathmoveTolineToquadraticCurveTobezierCurveToarcTorectarcfillstrokeclipisPointInPathdrawFocusRingfillTextstrokeTextdrawImagecreateImageDatagetImageDataputImageDataaddColorStopCanvasGradient.addColorStopTextMetrics.widthImageData.widthImageData.heightImageData.dataCanvasPixelArray.length

canvas API is simple to learn21 attributes and 45 methods

draw shapesdraw textsolid and gradient paintdraw and tweak bitmapsplay with videosapply transformations

canvas runs in many browsers

canvas has no memorycanvas is not 3D yet

Safari 3.0+

IE 9Firefox 3.0+

Android 2.1+

Chrome 3.0+

iOS Safari 3.2+Opera 10.0+

35

highlighting interesting features

AWOT insights

clear and redrawthe traditional animation loop through the use of simple shapes

function loop(){

ctx.clearRect(0,0,canvas.width,canvas.height);

draw(); //drawing functions

}setInterval(loop,interval);

transparencycanvas provides both a global alpha attribute and color based alpha

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);

canvas state with save() and restore()a canvas keeps a stack of states of its main attributes, transformations and clipping

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);

using imagesthe canvas element lets you draw images on its surface

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”;

pixel data manipulationthe canvas element lets you play directly with pixels at the byte level

var imgData=context.getImageData(left,top,width,height);var pixelArray=imgData.data; //CanvasPixelArray

manipulatePixels(pixelArray);

context.putImageData(imgData,x,y);

globalCompositeOperationcanvas defines 12 composition operations

source-insource-over

destination-over destination-in

source-out

destination-out

source-atop

destination-atop

lighter

darker

xor

copy

42

lessons learnt through the journey

tricks & tips

always check if canvas is supported.browser detection is not enough.

var canvas=document.createElement(“canvas”);if(canvas && canvas.getContext(“2d”)) {//supported

} else {//not supported

}

size matters.canvas performances are tightly bound to its size

faster

slower

refresh only what mattersdon’t clear the whole canvas if you can. clear only the area that changed last.

function loop(){var bounds=detectBoundingRect();clearRect(bounds);draw();

}

clearRect vs copycomposite operation copy it’s faster with transformations and clipping

ctx.clearRect(0,0,width,height); //slower

ctx.save();ctx.globalCompositeOperation=”copy”;ctx.fillStyle=”#ffffff”; //background colorctx.fillRect(0,0,width,height); //fasterctx.restore();

you can’t beat the screen60Hz refresh rate means a frame each 16.7ms

Align animations to the refresh speed (16.7ms=60fps - 33.4ms=30fps)

function loop(){draw();

}

setInterval(loop,Math.ceil(1000/60));

don’t rely on a given intervalalways calculate the real time between two frames to smooth the animations.

var thisFrame = new Date().getTime();var dT = (thisFrame - this.lastFrame)/1000;this.lastFrame = thisFrame;

sprite.x+= dX * dT; //smooth movement

video memory is slowdecrease 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]; //alphai+=4;

}

CanvasPixelArray is slowalways cache the data array in a proper javascript object

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]; //alphai+=4;

}

if makes sense then double bu"erdecrease the rate of requests to video memory. save a big chunk of data and use it.

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);

comparison: FPS and CPU %http://jsperf.com/vsummit-canvas-perf/5

canvas size

shapes drawing functions

double bu!er with drawImage

pixel manipulation

100px x 100px

500px x 500px

1000px x 1000px

59fps10%

52fps20%

50fps40%

59fps10%

56fps38%

44fps50%

55fps15%

24fps70%

9fps92%

hardware accelerationHTML5 supports GPU accelerated operations.

To be use only if you experience a true performance win. It might not be better.

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

Now go and try yourself finding new ways to improve your stu!.

@littlearkcarlo.zapponi@frogdesign.com

aworldoftweets.com