Scratch: disegnare con lo strumento penna

Pubblicato da ABCode il

Difficoltà
Medio Medio
Tempo necessario
20-25 minuti 20-25 minuti

In questo articolo scopriremo insieme come utilizzare lo strumento “penna” per disegnare sullo stage attraverso istruzioni di codice.

Per poter realizzare i progetti che proporremo in questa guida devi conoscere il sistema di coordinate di Scratch e le istruzioni di movimento.
Se hai bisogno di un ripasso leggi questo articolo:
“Scratch: stage, spazio e coordinate”.

Lo strumento "penna"

Immagina di avere un foglio bianco su cui disegnare con una penna colorata. Quando hai la penna in mano per comporre il tuo disegno non farai altro che appoggiare la penna sul foglio e poi muovere la penna sul foglio nella direzione delle linee che vuoi tracciare.
Ora immagina che il tuo foglio bianco sia lo stage di Scratch e che la penna sia uno sprite: muovendo lo sprite sullo stage – utilizzando le istruzioni della categoria penna e le istruzioni di movimento – potrai tracciare le linee che compongono un disegno.

Per rendere il progetto più credibile puoi utilizzare uno sprite che rappresenti una matita o una penna.

I blocchi della categoria penna

Proprio come quando disegni su carta dovrai, prima di tutto, appoggiare la penna al foglio; poi potrai muoverla e iniziare a tracciare un disegno a tuo piacimento.

Per appoggiare la penna al foglio userai l’istruzione penna su, mentre per sollevarla nuovamente userai il blocco penna giù.

Quando la penna è giù potrai semplicemente muovere lo sprite per tracciare una linea, mentre quando la penna è su non viene tracciato alcun segno. Non tutti i disegni sono composti da linee continue, ecco perché è utile l’istruzione penna su.

Ora possiamo iniziare a tracciare una linea; prova questo codice:

quando si clicca sulla bandiera verde
pulisci
penna su
vai a x: (0) y: (0)
usa penna di colore[#ff0000]
usa penna di dimensione (2)
penna giù
fai (100) passi 

Il significato delle istruzioni è molto semplice; cerchiamo comunque di spiegarlo meglio a parole:

  • Quando si clicca sulla bandierina verde.
  • Pulisci: questa istruzione ripulisce lo stage per cancellare eventuali linee tracciate precedentemente.
  • Porta la penna su, ovvero solleva la matita in modo che non tracci alcuna linea quando la posizioni al punto di partenza.
  • Porta la matita al centro (X:0 e Y:0); puoi scegliere di iniziare il disegno partendo da un altro punto dello stage: sceglierai allora due diverse coordinate.
  • Porta la penna giù, ovvero appoggiala al foglio.
  • Usa una penna di dimensione 2, per tracciare una linea spessa 2 pixel.
  • Usa una penna di colore rosso (per cambiare il colore clicca sul quadratino rosso e muovi il mouse in un qualunque punto dello schermo che abbia il colore che vuoi impostare.
  • Muoviti di 100 passi: questa è l’istruzione che – finalmente – traccerà la linea (che sarà lunga 100 passi o 100 pixel).

Disegniamo una cornicetta

Ora che hai imparato le basi del disegno con lo strumento penna in Scratch proviamo a fare qualcosa di più divertente!

Immagina di essere tornato all’inizio della prima elementare, quando i tuoi insegnanti ti facevano riempire interi fogli a quadretti di “cornicette”. O magari devi farlo ancora adesso… sssst… non dirlo a nessuno: ti insegneremo il sistema per farlo al computer, grazie all’aiuto di Scratch!

Farai il primo disegno su un foglio di carta – ti servirà per capire meglio le coordinate per i movimenti della penna – e poi chiederemo a Scratch di ripetere lo stesso disegno tante volte fino a riempire tutto il foglio.
Un bel risparmio di tempo!

Proviamo a disegnare, su un foglio a quadretti, un elemento delle cornicette che vogliamo disegnare.

Per ogni punto del disegno segna le coordinate X e Y (contando 1 quadretto = 10 passi); se segui le frecce numerate vedrai che per disegnare questa cornicetta farai partire la matita dalle coordinate X:0, Y:0, poi ti sposterai verso l’alto alle coordinate X:0, Y:20, e così via.
La freccia con la linea tratteggiata mostra un movimento che dovrà essere eseguito con la penna sollevata per evitare di tracciare una linea di troppo.

Il disegno che vedi sopra può essere ricreato in Scratch  con le seguenti istruzioni:

quando si clicca sulla bandiera verde
pulisci
usa penna di colore [#0000ff]
usa penna di dimensione (2)
penna su
vai a x: (0) y: (0)
penna giù
vai a x: (0) y: (20)
vai a x: (20) y: (0)
vai a x: (40) y: (0)
vai a x: (50) y: (10)
vai a x: (40) y: (20)
vai a x: (20) y: (20)
vai a x: (0) y: (0)
penna su
vai a x: (40) y: (20)
penna giù
vai a x: (40) y: (0)

Ripetiamo il disegno fino a riempire tutto il foglio!

Immagina, ora, di voler ripetere il disegno appena fatto tante volte, fino a riempire tutto lo stage.

Puoi duplicare tutti i blocchi di movimento (da “vai a x: (0) y: (0) fino all’ultima istruzione) e modificare le coordinate. Il disegno appena realizzato occupa 50 pixel in larghezza e 20 in altezza. Se osservi il disegno, infatti, vedrai che occupa 5 quadretti in orizzontale e 2 in verticale e – come abbiamo spiegato prima – abbiamo fatto corrispondere 1 quadretto a 10 pixel. Volendo lasciare uno spazio tra un disegno e l’altro (per esempio 10 pixel), sarà quindi sufficiente aumentare tutte le coordinate X di 60 per ripetere un disegno identico un po’ più a destra del precedente. Oppure puoi aumentare tutte le coordinate Y di 30 per ripetere il medesimo disegno più in alto.

Però immagina di voler riempire proprio tutto lo stage, ti serviranno decine e decine di blocchi in cui dovrai modificare le coordinate calcolando ogni volta quanto devi aggiungere alla X e alla Y… avresti fatto molto prima a disegnare le cornicette a mano sul quaderno… e addio divertimento!

Fortunatamente possiamo usare un sistema decisamente migliore: ci faremo aiutare dai blocchi ripeti () volte e dall’uso delle variabili.

Volendo, quindi, ripetere il disegno per riempire una intera riga del foglio (lo stage), puoi utilizzare il blocco ripeti (8) volte per disegnare 8 pesciolini; per disegnare ogni cornicetta accanto alla precedente possiamo usare una variabile che rappresenterà la coordinata X della penna e – ad ogni ripetizione – modificheremo il valore della variabile aggiungendo 50.

Effettua queste operazioni:

  • Crea una variabile e chiamala (posizione_X).
  • All’inizio dello script inserisci una istruzione porta [posizione_X v] a (-240): questo ci serve per fare in modo che il primo disegno inizi all’estrema sinistra dello stage.
  • Inserisci un blocco ripeti (8) volte attorno a tutti i blocchi di istruzioni che compongono il disegno
  • Modifica tutti i blocchi di movimento sostituendo al numero che avevamo inserito in corrispondenza della X la somma “posizione x + (numero precedente)” e inserisci il numero che c’era scritto precedentemente.
  • Come ultima istruzione all’interno del blocco “ripeti” inserisci un blocco cambia [posizione_X v] di (60)

Ecco il codice modificato:

quando si clicca sulla bandiera verde
porta dimensione al (20) %
pulisci
usa penna di colore [#0000ff]
usa penna di dimensione (2)
porta [posizione_X v] a [-240]
ripeti (8) volte
penna su
vai a x: ((posizione_X) + (0):: #5cb712) y: (0)
penna giù
vai a x: ((posizione_X) + (0):: #5cb712) y: (20)
vai a x: ((posizione_X) + (20):: #5cb712) y: (0)
vai a x: ((posizione_X) + (40):: #5cb712) y: (0)
vai a x: ((posizione_X) + (50):: #5cb712) y: (10)
vai a x: ((posizione_X) + (40):: #5cb712) y: (20)
vai a x: ((posizione_X) + (20):: #5cb712) y: (20)
vai a x: ( (posizione_X) + (0):: #5cb712) y: (0)
penna su
vai a x: ((posizione_X) + (40):: #5cb712) y: (20)
penna giù
vai a x: ((posizione_X) + (40):: #5cb712) y: (0)
cambia [posizione_X v] di (60)
fine

Ora abbiamo disegnato 8 pesciolini, riempiendo orizzontalmente tutto lo stage; possiamo fare la stessa cosa e ripetere tante volte la riga di 8 pesciolini per riempire tutto il foglio.

Per spostarci in verticale dovremo modificare le coordinate Y; quindi puoi procedere in modo molto simile a quanto abbiamo appena fatto:

  • Crea una variabile e chiamala (posizione_Y).
  • All’inizio dello script inserisci una istruzione porta [posizione_Y v] a (-180) per iniziare nella parte bassa dello stage.
  • Inserisci un blocco ripeti (12) volte attorno a tutti i blocchi di istruzione che abbiamo usato per disegnare gli 8 pesciolini (fai attenzione: la precedente istruzione porta [posizione_X v] a (-240) deve essere compresa in questa nuova ripetizione; in questo modo ogni volta che il programma inizierà a disegnare una nuova riga di pesciolini ricomincerà sempre a sinistra dello stage.
  • Modifica tutti i blocchi di movimento inserendo, come valore della coordinata Y, la somma tra la variabile (posizione_Y) e il numero scritto in precedenza.
  • Come ultima istruzione all’interno di questa ripetizione inserisci cambia [posizione_Y v] di (30).
quando si clicca sulla bandiera verde
porta dimensione al (20) %
pulisci
usa penna di colore [#0000ff] 
usa penna di dimensione (2)
porta [posizione_Y v] a [-180]
ripeti (12) volte
porta [posizione_X v] a [-240]
ripeti (8) volte
penna su
vai a x: ((posizione_X) + (0):: #5cb712) y: ((posizione_Y) + (0):: #5cb712)
penna giù
vai a x: ((posizione_X) + (0):: #5cb712) y: ((posizione_Y) + (20):: #5cb712)
vai a x: ((posizione_X) + (20):: #5cb712) y: ((posizione_Y) + (0):: #5cb712)
vai a x: ((posizione_X) + (40):: #5cb712) y: ((posizione_Y) + (0):: #5cb712)
vai a x: ((posizione_X) + (50):: #5cb712) y: ((posizione_Y) + (10):: #5cb712)
vai a x: ((posizione_X) + (40):: #5cb712) y: ((posizione_Y) + (20):: #5cb712)
vai a x: ((posizione_X) + (20):: #5cb712) y: ((posizione_Y) + (20):: #5cb712)
vai a x: ((posizione_X) + (0):: #5cb712) y: ((posizione_Y) + (0):: #5cb712)
penna su
vai a x: ((posizione_X) + (40):: #5cb712) y: ((posizione_Y) + (20):: #5cb712)
penna giù
vai a x: ((posizione_X) + (40):: #5cb712) y: ((posizione_Y) + (0):: #5cb712)
cambia [posizione_X v] di (60)
fine
cambia [posizione_Y v] di (30)
fine

Ed ecco il risultato del nostro programma!


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *