Animaatio Processing.js -kirjastolla
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;</p>
<p>// Setup the Processing Canvas
void setup(){
size( 400, 400 );
}</p>
<p>// 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);</p>
<p> if(x>190) {
xDirec=-4;
}
else if(x<0) {
xDirec=4;
}
if(y>390) {
yDirec=-4;
}
else if(y<25) {
yDirec=4;
}</p>
<p>}
</script>
<canvas id="processing-canvas"></canvas>
</body>
</html>