====== Introduzione a Processing.js ====== Autore: **//Fabio Di Matteo//** \\ Ultima revisione: **//6/12/2010//** \\ \\ [[http://processingjs.org/|Processing.js]] è un framework javascript per lo sviluppo di animazione, grafici e videogiochi per il web. E' scritto in javascript e puo' interagire con esso ma la sintassi è quella del linguaggio di programmazione [[http://processing.org/|Processing]] . \\ In questo articolo si mostrera' come utilizzare il canvas per mostrare uno sfondo, uno sprite e del testo facendoli scorrere su e giu' . ===== Il risultato ===== Introduzione a Processing.js ===== La pagina =====


 
 
   
 
Prove processing

===== Sorgente ===== **sorgente.js**


/*Bisogna usare questo comando per precaricare l'immagine di sfondo(notare che somiglia a un commento)*/
/*@pjs preload="img/cielo.png";*/

PImage bg, tux;
int tx,ty, px, py;
	
	/*La funzione setup serve ad innizializzare l'applicazione*/
	void setup() 
	{  
		size(640,400);
		frameRate(30);
		/*carico lo sfondo*/
		bg = loadImage("img/cielo.png");
		
		/*Carico il pinguino*/
		tux = loadImage("img/tux.png");
		
		/*Coordinate iniziali testo*/
		tx=20;
		ty=20;
		
		/*Coordinate iniziali pinguino*/
		px=580;
		py=2;
		
		/*Preferenze per i caratteri*/
		fontA = loadFont("Arial"); 
		textFont(fontA); 
		textSize(36);
	}
	
	
	/* La funzione draw viene eseguita di continuo come fosse un ciclo
	 * la velocita' di esecuzione è definita in frameRate(30) nella funzione setup()*/
	void draw() 
	{  
		/*Incremento le coordinate(x/y) del testo*/
		tx++; ty++;
		
		/*Incremento le coordinate(x/y) del pinguino*/
		px--; py++;
		
		/*Applico lo sfondo al canvas*/
		background(bg);
		
		
		/*Mostro il testo*/
		text("Ciao mondo!",tx,ty); 
		
		/*Mostro l'immagine del pinguino (tux)*/
		image(tux, px, py);
		
		 
		/*se gli oggetti vanno fuori il canvas li riporto alla opsizione
		iniziale*/
		if (ty==400)
		{
			 //alert("Scritta oltre il canvas!");
			 tx=20; ty=20;
			 px=580; py=2;
		}
	}