Giochi Blockly: Film

Film

Nei vari livelli di questo gioco imparerai ad animare delle forme geomtriche usando Blockly.

Farai uso di forme geometriche semplici per simulare l’aspetto di forme complesse.
 
 
Per prima cosa ci occuperemo del disegno stilizzato di una persona:

Nella categoria Film hai a disposizione tre nuovi blocchi che ti permettono di disegnare un cerchio, un rettangolo o una linea. Questi blocchi contengono dei parametri che dicono a Blockly in quale punto disegnare la forma e quanto deve essere grande.

Prova a trascinare il blocco cerchio nell’area di lavoro, senza cambiare i parametri che sono stati impostati in automatico da Blockly:

Cosa succede?
Blockly disegna un cerchio nero con centro in x = 50 e y = 50, e raggio = 10.

Osserva il disegno della persona che vogliamo riprodurre: è quello visibile in trasparenza. Come deve essere il cerchio rispetto a quello che abbiamo disegnato? Il cerchio deve essere rosso e non nero, e il suo centro deve essere in y = 80:

Bene.
Disegnamo ora il rettangolo blu.
Anche in questo caso, prova a trascinare nell’area di lavoro il blocco rettangolo per vedere cosa succede:

Blockly ha disegnato un quadrato rosso con centro in x = 50 e y = 50, larghezza = 10 e altezza = 10, come specificato dai valori dei parametri nel blocco.
Il quadrato è rosso perché abbiamo già usato usato il blocco imposta colore a rosso nell’area di lavoro. Perché il nostro rettangolo sia blu, dobbiamo usare un blocco imposta colore a blu:

Quanto è largo il rettangolo blu che dobbiamo disegnare? 60 – 40 = 20. Quindi, larghezza = 20.
E quanto è alto? 70 – 10 = 60. Quindi, altezza = 60.
Proviamo a inserire questi valori nel blocco rettangolo:

Il rettangolo ora è del colore e delle dimesioni giuste, ma è stato disegnato troppo in alto: dobbiamo modificare la y del suo centro, che deve avere valore 40 e non 50:

Ci rimangono da disegnare le braccia. Usiamo a tal fine il blocco linea.
Anche in questo caso, prova a trascinarlo nell’area di lavoro per vedere cosa succede:

Blockly ha disegnato una linea blu di larghezza 1 che unisce il punto di coordinate (40, 40) a quello di coordinate (60, 60).
Nota che il colore della linea dipende dal punto in cui è stato messo il blocco nell’area di lavoro: Blockly legge infatti le istruzioni dall’alto verso il basso, e, quindi, se per esempio, avessimo messo il blocco linea in mezzo agli altri due blocchi, la linea sarebbe stata rossa:

L’effetto non è molto evidente, perché la linea è coperta dal rettangolo blu che abbiamo disegnato in precedenza.
In ogni caso, noi vogliamo che sia grigia: dobbiamo quindi usare un blocco imposta colore a grigio.
Inseriamo anche i parametri i valori che servono per tracciare il braccio destro della nostra persona:

Riesci a disegnare il braccio sinistro? Devi utilizzare un blocco simile a quello che abbiamo usato per disegnare il braccio destro: solo il parametro x finale dovrà essere differente.
Se ti trovi in difficoltà, puoi comunque vedere la soluzione qui.

Nel livello 2 dovrai creare il tuo primo film d’animazione.
Premi il tasto play per vedere in anteprima (e in trasparenza!) quello che ti viene chiesto di ricreare:

Devi far muovere orizzontalmente una palla rossa!

Per scrivere il programma potrai utilizzare il blocco time.

Il parametro che lo definisce cambia valore nel corso del tempo, passando da 0 a 100 in maniera progressiva.
La cosa più importante da notare è la sua stretta relazione con il valore della coordinata x che definisce la posizione lungo l’asse orizzontale della forma che vogliamo disegnare… in questo caso la posizione che la palla rossa occupa in ogni istante: time assume valore 0 quando x = 0 e valore 100 esattamente quando x = 100!

Che valore avrà x quando time = 50? Esattamente 50!

Questo significa che il blocco time può essere utilizzato per definire la posizione x nel corso del tempo.
Quindi se voglio disegnare un cerchio con centro in y = 50 e x che varia da 0 a 100 nel corso del tempo posso usare i blocchi:

Premi play per verificare che il programma funzioni correttamente.
 
 
Saresti in grado di far tornare indietro la palla rossa?
Questo è il problema che devi risolvere nel livello 3.

Far tornare indietro la palla vuol dire che all’inizio dell’animazione, ossia quando time = 0, la x del suo centro deve essere uguale a 100, mentre, alla fine dell’animazione, e cioè quando time = 100, la x del suo centro deve essere uguale a 0.

Prova a usare uno dei blocchi che trovi nella categoria matematica per risolvere questo problema.

Se sei in difficoltà, puoi vedere la soluzione qui.
 
 
Il livello 4 a prima vista sembra molto complicato.
Premi play per vedere in anteprima cosa succede.

Riusciresti a scrivere il programma per ricreare questa animazione?

Osserva l’anteprima con attenzione.
Per risolvere questo problema non dovrai fare niente di diverso rispetto a quanto hai già fatto nei livelli precedenti.
Prova! E tieni sempre presente che per risolvere un problema complesso è più semplice scomporlo nelle sue componenti: scrivi quindi il programma per far muovere la palla da sinistra a destra… verifica che funzioni e, quindi, passa alle altre palle…

Ci sei riuscito?
Se ti trovi in difficoltà, puoi vedere la soluzione qui.
 
 
Nel livello 5 devi riuscire a far muovere contemporaneamente la faccia e le orecchie del topo.
Premi play per vedere l’anteprima dell’animazione.

Se sei riuscito a risolvere i problemi precedenti, questo livello dovrebbe essere abbastanza semplice.
La faccia del topo è un cerchio. La testa che si muove verso l’alto non è altro che un cerchio con centro in (x = 50, y) e raggio = 20, che si muove verso l’alto (y parte dal valore 0 e arriva al valore 100).
Analogamente, le orecchie sono altri due cerchi. Per farli muovere verso l’alto insieme alla faccia devi solo stare attento al valore del loro centro e del loro raggio.

Ci sei riuscito?
Se ti trovi in difficoltà, puoi vedere la soluzione qui.
 
 
Passa al livello 6 e prova a capire cosa fanno le due linee nell’animazione.

Come hai già imparato, per disegnare una linea puoi usare il blocco linea che ti richiede di determinare i valori del punto d’inizio e di fine e la sua larghezza.
Come variano i valori dei punti d’inizio e di fine delle due linee? In altri termini, come variano la x e la y dei punti d’inizio e di fine delle due linee?
Per risolvere l’esercizio devi riuscire a rispondere a questa domanda.

Se ti trovi in difficoltà, puoi vedere la soluzione qui.
 
 
Nel livello 7 devi animare una palla che cade.
Ti viene suggerita la formula matematica che determina il suo movimento: y = 100 – (((time – 50) ÷ 5) ^ 2). Poichè il movimento orizzontale della palla è la semplice variazione del valore di x da 0 a 100, non ti rimane che usare i blocchi matematica per scrivere il valore della variabile y nel blocco cerchio che simula la palla. Dovrai solo stare attento all’ordine in cui chiedi a Blockly di eseguire le operazioni.

Facciamolo insieme. Procediamo un pezzo per volta. La formula può essere riscritta così: y = 100 – A, dove A sta per tutto quello che è compreseo fra le parentesi tonde. Quindi all’inizio possiamo scrivere:

Al posto del valore 0 dobbiamo inserire A. Ma A non è altro che A = B ^ 2, una formula con una struttura analoga a quella di y. Possiamo quindi inserire al posto di 0 un blocco identico a quello che abbiamo appena usato:

Per B possiamo ripetere lo stesso discorso fatto per A, e ottenere quindi:

E infine, in modo analogo:

Non ci resta che inserire la variabile time!

Sembrava difficile, ma è stato semplicissimo!
 
 
Nel livello 8 devi utilizzare un blocco if per dividere il film in due parti: nella prima, una palla rossa e una blu convergono nel centro partendo dai due vertici opposti, mentre, nella seconda, si vedrà solo una palla verde.
Premi play per vedere il film in anteprima.

Nota che nella seconda parte del film le palle verdi sono 2! Ne vedi una sola perché occupano entrambe la stessa identica posizione!

Per risolvere il problema conviene occuparsi di una palla per volta. Nella prima parte del film, la palla rossa parte dal vertice in basso a sinistra e si sposta in linea retta fino a raggiungere il centro. Nella seconda parte, la palla rossa cambia colore e diventa verde; non cambia invece la sua posizione.

Quindi, se siamo nella prima parte del film, o, in altre parole, se time è minore di 50, la palla rossa parte dal vertice in basso a sinistra e si sposta in linea retta fino a raggiungere il centro, altrimenti cambia colore e diventa verde.

Come si muove la palla rossa? Lungo una diagonale a 45° rispetto all’asse x; la formula che esprime questo movimento è y = x.

Il programma per il movimento della palla rossa sarà dunque:

Riesci a scrivere il programma per il movimento della palla blu?

Se ti trovi in difficoltà, puoi vedere la soluzione qui.
 
 
Nel livello 9 devi far seguire alla palla il percorso segnato da un filo grigio.
Questo problema non è semplice da risolvere: dovrai usare tutto quello che hai imparato nei livelli precedenti. Se non riesci subito, non scoraggiarti; cerca di capire dove hai commesso un errore e prova a trovare una soluzione differente.
Come sempre, ti conviene affrontare separatamente le singole parti che costituiscono il problema generale. Prima scrivi il programma per disegnare il filo grigio, e poi quello per far muovere la palla lungo la traiettoria tracciata dal filo.
Scrivi un pezzo di codice per volta e premi ogni volta play per vedere cosa succede!

In ogni caso, puoi vedere la soluzione qui.

 

© Olivetti Scuola Digitale 2018