Nel post precedente è stato presentato l'Ambiente di Sviluppo del linguaggio di programmazione BASILICO. Adesso ci occuperemo di grafica, per imparare a disegnare rettangoli, cerchi, linee e punti di vari colori con tale linguaggio di programmazione. I programmi diventeranno sempre più complessi, quindi si imparerà anche come salvare i propri programmi in un archivio a lungo termine e come ricaricarli in modo da poterli eseguire di nuovo o modificarli.
Disegnare rettangoli e cerchi
Cominciamo la parte grafica scrivendo un programma che disegnerà un semaforo, in particolare un semaforo verde.
Programma 9: Semaforo
Programma 9 in esecuzione: semaforo
Esaminiamo riga per riga il programma. La prima e la seconda riga sono chiamate istruzioni di note o commenti. Una nota è un istruzione attraverso cui il programmatore può inserire commenti nel suo codice che sono ignorati dal linguaggio di programmazione. Servono per descrivere cosa stanno facendo blocchi di codice o per inserire il nome del programma, per scrivere perché abbiamo scritto un programma o chi è il programmatore.
Alla riga tre vediamo l'istruzione Schermo con il parametro 12, per impostare una modalità grafica dello schermo che ci permette di usare i comandi grafici delle righe seguenti Linea, Cerchio e Tingi. Alla riga quattro, con il comando Colore, viene impostato il colore di primo piano e il colore di sfondo, rispettivamente il primo e il secondo numero, separati da una virgola, del comando Colore. I numeri dei colori sono quelli della seguente tabella. Tra parentesi per ogni colore ci sono i corrispondenti valori RBG, che sono spiegati qui di seguito. È stato inserito nella tabella anche il colore arancione, che non è tra i 16 colori base di BAS.I.LI.CO, come esempio di colore ricavabile tramite la tripletta RGB.
Tabella 2: Tabella dei 16 colori base + due tonalità di arancione
Alla riga cinque c’è l'istruzione Psc, che conosciamo già dal post precedente.
Le righe quattro, otto, dieci, tredici e sedici contengono l'istruzione Colore, per indicare a BAS.I.LI.CO. quale colore usare per la successiva azione di scrittura o disegno. Puoi scegliere i colori usando uno dei 16 numeri di colori standard oppure puoi crearne uno tra oltre 16 milioni di colori diversi mescolando insieme i colori primari (rosso, verde e blu), usando la funzione _RGB(rosso%,verde%,blu%) al posto del valore numerico da 0 a 15 nel comando Colore.
Usando _RGB(rosso%,verde%,blu%) per scegliere un colore, assicurarsi di usare valori tra 0 e 255 per ognuno dei tre colori primari. Zero (0) rappresenta nessuna luce di quel colore e 255 significa la massima luce per quel colore. Il bianco è fatto così da 255, 255, 255 (tutti i colori) mentre il nero è rappresentato da 0, 0, 0 (nessun colore). Questa rappresentazione numerica è nota come tripletta RGB.
Il parametro 12 nel comando Schermo imposta una finestra di esecuzione del programma larga 640 pixel (x) e alta 380 pixel (y). Un pixel è il punto più piccolo che può essere visualizzato sul monitor del computer. L'angolo in alto a sinistra è l'origine (coordinate 0,0) e quello in basso a destra è avrà coordinate 639,479. Ogni pixel può essere rappresentato da due numeri, il primo (x) è la distanza dal lato sinistro della finestra e il secondo (y) rappresenta la distanza dalla parte alta della finestra. Questo modo di contrassegnare i punti è una variante di ciò che è noto ai matematici come Sistema di Coordinate Cartesiane.
Illustrazione 4: Il sistema di coordinate cartesiane della finestra di esecuzione con il valore 12 del comando Schermo
Esaminiamo adesso l’istruzione Linea. Si può usare per disegnare segmenti o rettangoli sullo schermo. Nel programma che stiamo esaminando è usata per disegnare un rettangolo.
• Se vogliamo realizzare un segmento bisogna digitare dopo il comando Linea le coordinate dei punti estremi del segmento (essendo tali coordinate, come abbiamo visto sopra, una coppia di numeri tra parentesi), separando le coordinate dei due punti con un trattino (uguale al segno meno: “-”). Se vogliamo un colore specifico per la linea che vogliamo disegnare, possiamo indicarlo inserendo il numero del colore corrispondente, in base alla tabella che abbiamo visto sopra, dopo le coordinate dei due punti, mettendo una virgola tra coordinate dei punti e numero del colore. Nel caso del programma del semaforo è assente il parametro relativo al colore, usando così il colore stabilito dal comando Colore nella riga 4.
• Se vogliamo che il comando Linea faccia un rettangolo piuttosto che una linea, va aggiunta, sempre dopo un’ulteriore virgola la lettera R e se vogliamo che il rettangolo sia pieno, le lettere saranno due: RP. Va sempre tenuto in considerazione che tutti e quattro i valori numerici del comando Linea sono espressi in pixel (la dimensione del punto più piccolo che può essere visualizzato).
Illustrazione 7: Rettangolo
Come si può vedere, il rettangolo nel programma inizia nel punto con coordinate 100,50 ed è largo 100 pixel e alto 200 pixel. Le righe 8, 11 e 14 del Programma 9 introducono l'istruzione Cerchio per disegnare cerchi. Richiede tre argomenti numerici, i primi due rappresentano le coordinate cartesiane del centro del cerchio e il terzo il raggio in pixel.
Illustrazione 8: Cerchio
Altri programmi che utilizzano cerchi e rettangoli
Ecco un paio di programmi di esempio che usano le istruzioni Psc, Colore, Linea e Cerchio. Digita i programmi e modificali. Trasformali in una faccia accigliata, in una faccia di un alieno o somigliante a qualcuno che conosci.
Programma 10: Faccia con rettangoli
Esempio di esecuzione del programma 10: faccia con rettangoli
Programma 11: Volto sorridente con cerchi
Esempio di esecuzione del programma 11: volto sorridente con cerchi
Salvataggio del programma e ricaricamento
Ora che i programmi stanno diventando più complessi, potresti volerli salvare in modo da poterli ricaricare in futuro. È possibile salvare un programma premendo contemporaneamente Ctrl e S o scegliendo l'opzione “Salva” nel menu File (usando il mouse o premendo prima Alt+F e poi Alt+S). Verrà visualizzata una finestra di dialogo che chiederà il nome che vogliamo dare al file, se si tratta di un nuovo programma, oppure salverà le modifiche apportate (sostituendo il vecchio file).
Se non si desidera sostituire la vecchia versione del programma e si desidera memorizzarla con un nuovo nome, è possibile utilizzare l'opzione “Salva come…” nel menu File per salvare una copia con un nome diverso. Per caricare un programma salvato in precedenza, premere contemporaneamente Ctrl e O o scegliere l’opzione “Apri” nel menu File (usando il mouse o premendo prima Alt+F e poi Alt+O).
Disegnare linee
Conosciamo già il comando Linea. L’abbiamo usata per disegnare rettangoli, ma abbiamo anche già anticipato che può essere e più semplicemente usata per disegnare linee, come già si intuisce dal suo stesso nome. Il comando Linea senza il parametro R, traccerà una linea larga un pixel, del colore corrente (o di altro colore, se specificato come parametro del comando stesso), da un punto a un altro punto. Il Programma 12 mostra un esempio di come usare l’istruzione Linea per tracciare linee.
Programma 12: Disegna un triangolo
Esempio di esecuzione del programma 12: disegna un triangolo
Il programma seguente è un esempio di cosa si può fare con molte linee. Disegna un cubo sullo schermo.
Programma 13: Disegna un cubo
Esempio di esecuzione del programma 13: disegna un cubo
Disegnare singoli punti sullo schermo
L'ultima istruzione grafica trattata in questo capitolo è Pixel. L'istruzione Pixel imposta un singolo pixel (punto) sullo schermo.
Programma 15: Utilizzare Pixel per disegnare punti
Esempio di esecuzione del programma 15: usare Pixel per disegnare punti
Esercizi
Scrivi un programma che disegni ciascuno dei quarti della luna (luna nuova, primo quarto, luna piena e terzo quarto) e dica il nome del quarto. Suggerimento: disegna la luna come un cerchio e poi disegna un rettangolo sulla parte di luna da non mostrare.