31 Javasript: Animazione Varianti.

 

l Uno strumento utile ed importante. 
Nel browser Chrome quando è in esecuzione un programma javascript
è possibile premere F12 per vedere se ci sono stati degli errori e per vedere in quale rigo del programma si sono verificati gli errori. Questo strumento ti sarà spesso utile.

l Tracce. Prima di g.fillRect(...) nella funzione animazione() aggiungi il comando 
g.globalAlpha = 0.1;
Questo comando farà in modo che il rettangolo nero sia parzialmente trasparente e che quindi non vengano del tutto cancellate le posizioni precedenti della figura.
Prima di g.beginPath(...) nella funzione che disegna la figura aggiungi il comando 
g.globalAlpha = 1;
Questo comando farà in modo che la figura venga disegnata in modo netto e non trasparente, cosicché la nuova figura si vedrà bene.
Prova questa variante.

l Prova a giocare anche con forme e colori. Puoi cambiare la forma della figura che si muove, il colore di sfondo, il colore del bordo della figura, il colore di riempimento della figura.
A questo scopo ricorda che puoi usare i seguenti tipi di comando (sono solo esempi):
g.strokeStyle = “black”;     // sceglie il colore del tratto
g.fillStyle = “white”;       // sceglie il colore del tratto
g.stroke();  // traccia il percorso descritto
g.fill();  // riempe il percorso descritto se è chiuso

l Per procedere con le varianti successive sarà utile effettuare la seguente trasformazione:
Rinomina le variabili posx e posy con i nomi x1 e y1 perché corrisponderanno alle coordinate del primo punto sullo schermo, poi aggiungeremo altri punti:

Dovrai quindi sostituire tutte le occorrenze di posx con x1 e tutte le occorrenze di posy con y1.

- Allo stesso modo rinomina le variabili vx e vy con vx1 e vy1.

Controlla se tutto funziona ancora bene.

l UN PASSO IMPORTANTE: PIU PUNTI SULLO SCHERMO.
Aggiungi adesso le variabili: x2, y2, vx2, vy2.

- Crea adesso una funzione aggiornaPosizione2() uguale alla funzione aggiornaPosizione()
ma che usa le variabili del secondo punto.

- Nella funzione animazione() sotto alla chiamata di funzione del quadrato(x1,y1,lato); aggiungi
la chiamata di funzione quadrato(x2,y2,lato);

l Se siete arrivati fino a qui, provate ad aggiungere un terzo punto, non dovrebbe essere difficile.