Bello conoscerti, Scratch :-)

Angelo Biolcati Rinaldi
CDJr
Published in
9 min readNov 19, 2017

--

Anche oggi abbiamo fatto il CoderDojo, alla sala Holden della Biblioteca Classense, qui a Ravenna, con 25 studenti delle elementari e medie da tutto il territorio. “Scratch avanzato”. Bene, allora cominciamo: chi NON c’era l’altra volta? Orpo! Un bel po’… chi non ha mai visto Scratch? Oh oh… OK, allora INTRO per voi principianti e un bel ripasso per i veterani. RIUSO!

Regola numero UNO: cliccate! Di dritto o di destro, scoprite tutto quel che c’è da scoprire, provate, provate, provate, che tanto Scratch non si rompe. Quando partite da zero, (“from scratch”, in inglese) avete (riquadro in alto a sinistra) uno sfondo bianco, tipo un palcoscenico vuoto, e sopra il vostro personaggio, Sprite1, che non ha ancora una sceneggiatura e se ne sta lì fermo a far niente.

Sotto questo riquadro ce n’è un altro che vi serve a decidere su cosa lavorare: adesso è selezionato il gattino (riquadro blu con la i); cliccate su Stage e lavorerete invece su quello. Ma cosa significa lavorare? Cliccate ancora su Sprite1 e guardate la colonna centrale: in alto è selezionata la linguetta Script e potete scrivere una sceneggiatura; se invece cliccate sulla linguetta Costumi potete cambiare lo sfondo o il vestito del gattino; e infine c’è Suoni ma guai se lo cliccate che se no si fa troppo casino e il bibliotecario Luca ci fa gli occhiacci (per un po’, poi gli scappa da ridere). Stiamo invece su Script e facciamo il mestiere dello sceneggiatore. Subito sotto Script ci sono la bellezza di 5+5=10 categorie di “mattoncini” con cui comporre le sceneggiature: Movimento (fai 10 passi, ruota di …), Aspetto (dire…, cambiare costume, …) etc etc proprio come un attore di teatro. Cliccate, cliccate, provate!

Cliccate ad esempio sul mattoncino di movimento “fai 10 passi”: notato niente? Riprovate! Oh, il gattino si muove :-) Come? Non sono 10 passi? Si sposta solo di pochissimo, tutto imbacalito, eh? Vi aspettavate dei passi con le gambine che camminano… Delusi? Il fatto è che questi sono i passi del computer, non i passi di noi umani. Eh, col computer è un attimo non capirsi… lui ragiona in puntini dello schermo, in pixel. 10 passi sono muovere il gattino 10 pixel a destra. Anzi: a volte a destra, a volte di traverso… poi ci arriviamo. Intanto diciamo che il nostro palcoscenico, il nostro sfondo è un piano cartesiano (dai, tipo la battaglia navale, con le coordinate fatte solo di numeri, niente lettere) che va da -240 a 240 in orizzontale (x, da sinistra a destra) e da -180 a 180 in verticale (y, dal basso in alto). Quindi il punto x=0, y=0 è proprio nel bel mezzo di tutto. Il nostro gattino era posizionato proprio lì, quando abbiamo iniziato e adesso, fateci caso, è in 10,0 (o 20,0 se avete cliccato 2 volte sul mattoncino). Ogni personaggio quindi è in una certa posizione x,y, si può muovere in qualsiasi direzione di quanti pixel vogliamo e può anche cambiare direzione. Ecco, la direzione. Avete presente la bussola? Ci sono scritti i gradi, giusto? 90 a dESTra, 180 in basso (SUD), 270 o -90, a sinistra (OVEST) e 360 o 0, in alto (NORD). Oltre a queste 4 direzioni principali, ci sono anche tutte quelle internedie, che so, 45 è nordEst, -10 è quasi Nord. Ci sono i mattoncini per girarsi in una direzione ben precisa e mattoncini per cambiare direzione aumentandola o diminuendola di un tot. Se cliccate sulla i del personaggio potrete vedere tutte queste informazioni, coordinate e direzione; potete cambiarle trascinando col mouse. Provate! Non si rompe niente.

Regola numero DUE: il programmatore (che sarebbe quello che fa il mestiere dello sceneggiatore per attori che vivono dentro al computer) è un campione di pigrizia e le studia tutte per fare il meno possibile; cioè preferisce magari fare una bella faticata all’inizio pur di starsene poi a rimirare le cose che funzionano da sole. Credetemi, è così; e in fondo non c’è niente di male: il progresso è la pigrizia che possiamo permetterci senza sentirci in colpa. Come possiamo scantonare la fatica, qui con Scratch? Trascinando i mattonicini che ci servono nel terzo ed ultimo riquadro, quello a sinistra, impilandoli uno sull’altro a creare una sequenza (che guarda caso è la prima delle tre strutture enunciate nel teorema di Böhm-Jacopini! Ma sto divagando…) Ad esempio:

Ecco un bel pilastrino di mattoncini, eh? Presi da categorie diverse, come indicano i diversi colori. Il bello è che a leggerli si capisce benissimo cosa succederà: il gattino traccerà un bel quadrato con il lato di 100 passi. Tutto questo succederà se clicchiamo sulla bandierina verde in alto a sinistra. Beh, in realtà possiamo anche cliccare direttamente sul pilastrino di mattoncini, ma è una convenzione iniziare sempre con la bandierina verde. Il vero programmatore ama le convenzioni perchè esse a volte gli risparmiano la fatica di decidere come fare certe cose e soprattutto di spiegare agli altri come stanno le cose: stanno come devono stare, come dice la convenzione.

Il segnale rosso di fianco alla bandierina serve per fermare tutto, ma tanto in questo caso il gattino si ferma da solo quando ha finito i mattoncini, cioè quando arriva a “penna su”. Bene bene bene, anzi no! Se decidessimo che il quadrato di lato 100 è troppo piccolo e dunque ci servisse ingrandirlo a …diciamo 160, quante correzioni dovremmo fare? Ben 4! Orrore!!! Il vero programmatore si rende conto che con questo pilastrino rischia di dover quadruplicare la fatica di una correzione e corre tosto ai ripari:

Ripeti 4 volte”, ecco il trucco che ci serviva: ora il “100 passi” è scritto in un punto solo e ci basterà una sola correzione per cambiare la dimensione del nostro quadrato (e detto tra noi la ripetizione è la terza delle tre strutture enunciate nel teorema di Böhm-Jacopini! Ma sto di nuovo divagando…). Fiuuuu, una bella fatica risparmiata, no? Ecco che quindi, con la mente sgombra, possiamo dedicarci a fantasticare sui quadrati. Cosa succede se invece di 90 gradi ne metto un po’ di meno? O un po’ più? E se invece di quattro lati ne faccio un bel po’ di più? Con Scratch questi esperimenti si fanno in un attimo:

Ehi bello! Chi se l’immaginava che potesse saltar fuori una roba artistica come questa? Son solo una manciata di freddi numeri…

Si potrebbero fare tanti altri esperimenti, ma l’obiettivo che ci eravamo posti per oggi era di completare il gioco del PONG aggiungendo il secondo giocatore e poi il punteggio ed poi la durata della partita e poi… Cancelliamo quindi questo codice (basta trascinarlo col mouse dal pannello di destra a quello centrale) e ripartiamo da zero; mettiamo il nostro gattino tutto a destra sul palcoscenico (anzi: tutto a destra del tavolo da ping PONG) e facciamo in modo che si possa muovere in su e in giù usando le frecce in su e in giù della tastiera; si tratta di cambiare la coordinata y, giusto?

Ecco il nuovo script del nostro gattino: Con i mattoncini marroni delle Situazioni, quelli con la gobba sopra ad indicare che NON possono stare SOTTO un altro mattoncino e che quindi possono solo INIZIARE una nuova sequenza, mai starci in mezzo, riusciamo a far sì che succedano determinate cose al verificarsi di un evento. E guardate che questo è un concetto mica da poco! Vedrete come ci tornerà utile non appena introdurremo un nuovo attore, la pallina: dovremo fare in modo che gattino e pallina recitino in modo coordinato e per farlo potremo sfruttare appunto gli eventi che possono essere percepiti contemporaneamente da tutti gli attori (e anche dal palcoscenico!)

Abbiamo creato un nuovo sprite scegliendo la pallina dalla libreria; ecco la prima versione del suo script: abbiamo inserito un po’ di vita usando i numeri a caso (così c’è la sorpresa: non sai mai che direzione prenderà esattamente la pallina, come la scatola di cioccolatini di Forrest Gump, ma sto divagando). Per la prima volta abbiamo usato il mattoncino della scelta, il “se”, per fare qualcosa solo se ci sono le condizioni per farlo: la palla rimbalza indietro se tocca il gattino e ne decreta invece la sconfitta se lo oltrepassa, controllando la sua coordinata x. Provatelo, questo script: funziona :-)

(indovina un po’! La scelta è la seconda delle tre strutture enunciate nel teorema di Böhm-Jacopini! E con lei abbiamo concluso; se siete curiosi:
https://it.wikipedia.org/wiki/Teorema_di_B%C3%B6hm-Jacopini ).

Adesso bando alla pigrizia e spazio alle invenzioni: vogliamo aggiungere il secondo giocatore e visualizzare il punteggio di entrambi; inoltre la partita deve terminare dopo max 60 secondi oppure quando uno dei due giocatori arriva a 6 (o più) con almeno 2 punti di vantaggio. Ci servono le variabili!

La variabili sono scatole, sono memorie dove inserire qualcosa e poi qualcosaltro e qualcosaltro ancora e poter sempre vedere cosa c’è dentro; nel nostro caso i punteggi partiranno da zero e cresceranno di uno ogni volta che un giocatore segnerà un punto; il cronometro partirà da 60 e calerà di uno ad ogni secondo. Sapete a chi lo facciamo gestire, il cronometro? Allo Stage, al palcoscenico, che non ha un tubo da fare e probabilmente si sta annoiando:

Lo Stage adesso ha 4 sfondi, il primo è il solito, tutto bianco, mentre gli altri recano 3 scritte diverse. in basso:

ha vinto il gattino
ha vinto Abby
parità

Lo Stage inoltre gestisce l’evento “Game over”, fine della partita, e lo gestisce facendo vedere la scritta giusta in base al punteggio. Chi genera l’evento “Game over”? Lo Stage stesso, quando il cronometro arriva a zero. Ma non è l’unico, come vedremo. Anche la pallina può decidere che la partita è finita n base al punteggio:

Se uno dei due giocatori ha superato i 5 punti con almeno 2 punti di vantaggio sull’avversario ecco che la partita è finita, anche se non sono ancora trascorsi i 60 secondi. Vedete come torna utile gestire questo “Game over” in modo unico?

Quando la pallina supera uno dei due giocatori e quindi assegna un punto all’altro, i mattoncini utilizzati son quasi gli stessi… verrebbe voglia di ragionarci e scrivere un unico blocco cui passare un parametro che permetta di decidere a chi assegnare il punto. Ci abbiamo provato ma non è che il risultato sia molto brillante, quindi per questa volta ci teniamo i nostri 2 blocchi così come sono. Terminiamo dando un’occhiata agli script dei 2 giocatori; in effetti sono molto semplici, perché in questo gioco la pallina è la protagonista principale:

Bene bene, anzi no! Se siete troppo pigri per costruirvi il PONG passo passo, ecco qua il link al progetto sul sito di Scratch:

questa bella pigrizia promette proprio bene… dateci dentro, provate provate!

Alla prossima :-)

PS: guardate che video che ho scovato sulla “vita di Conway”:
https://youtu.be/C2vgICfQawE
Scratch non è adatto a questo tipo di esperimenti, quindi bisogna imparare altri linguaggi. Forse lo faremo già a partire dal prossimo CoderDojo, sabato 13 gennaio 2018.

--

--

Angelo Biolcati Rinaldi
CDJr
Editor for

I’m a software developer using Embarcadero Delphi (since nov.1994 field test) for Win/Mac/iOS/Android/Linux native apps. Proud mentor of CodeDojoRavenna :-D