Barra laterale
programmazione:javascript:introduzione_a_processing.js
Introduzione a Processing.js
Autore: Fabio Di Matteo
Ultima revisione: 6/12/2010
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 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
La pagina
<html> <head> <script src="processing-1.0.0.min.js"></script> </head> <body><h1>Prove processing</h1> <!--L'oggetto canvas dove viene disegnata la scena --> <canvas data-processing-sources="sorgente.js"></canvas> </body> </html>
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; } }
programmazione/javascript/introduzione_a_processing.js.txt · Ultima modifica: 18/04/2018 - 15:48 (modifica esterna)
Strumenti Pagina
Ad eccezione da dove è diversamente indicato, il contenuto di questo wiki è soggetto alla seguente licenza: CC Attribution-Share Alike 4.0 International
