Viikon mobiiilituotekehitys tehtävänä oli luoda animaatio hyväksikäyttämällä Processin.js -javascript-kirjastoa. Ensimmäiseksi teokseksi loin liikkuvan Hello World! näytönsäästäjän.

Ensiksi lataat processing javascript-kirjaston osoitteesta http://processingjs.org/download/
Processing tiedosto pitää hakea html dokumentissa tagilla:Lopulta voit kirjottaa processing kieltä script tagien välissä, lisäämällä attribuutin type=”text/processing” ja data-processing-target=”processing-canvas”

<!DOCTYPE HTML>
<html>
<head>
<title>Processing näytönsäästäjä</title>
</head>
<body>
<script src="processing-1.4.1.min.js"></script>
<script type="text/processing" data-processing-target="processing-canvas">
var x = 10;
var y = 60;
var xDirec = 4;
var yDirec = 4;

// Setup the Processing Canvas
void setup(){
	size( 400, 400 );
}

// Main draw loop
void draw(){
	background( 200 );
	x = x + xDirec
	y = y + yDirec;
	PFont font;
	font = loadFont("BebasNeue.ttf");
	textFont(font, 40); // font size
	fill(100, 150, 400); // color
	text("Hello World!", x, y);
	
	if(x>190) {
		xDirec=-4;
	}
	else if(x<0) {
		xDirec=4;
	}
	if(y>390) {
		yDirec=-4;
	}
	else if(y<25) {
		yDirec=4;
	}
	
}
</script>
<canvas id="processing-canvas"> </canvas>
</body>
</html>