Archivi tag: line()

Primitive 2D: point(), line(), rect(), ellipse(), triangle()

Nel post precedente abbiamo realizzato il nostro primo sketch disegnando una linea sullo schermo in Processing. In questo post farò una panoramica su altre forme di base, chiamate primitive 2D, che utilizzeremo di frequente nei nostri programmi futuri.

Cominciare a imparare a memoria i nomi delle funzioni che usiamo maggiormente e la loro sintassi corretta è di fondamentale importanza quando si impara a programmare. Talvolta, però, può capitare di avere dei dubbi e di non essere sicuri al cento per cento della sintassi o dei parametri di una funzione.

Se vi trovate in questa situazione, anziché andare per tentativi e perdere tempo inutilmente, consiglio di andare a dare un’occhiata nel Reference.

Reference: la nostra guida

Sul sito di Processing all’indirizzo https://processing.org/reference/ trovate l’elenco di tutte le funzioni disponibili in questo linguaggio, cliccando su una di esse – potete provare, ad esempio, a cliccare su line() – troviamo il dettaglio di quella funzione: nome, esempi, descrizione, sintassi e parametri.

Processing's Reference is always available on your computer
Il menu in Processing che ci permette di aprire il Reference
Se non abbiamo accesso a internet, quando installiamo Processing sul nostro computer viene copiata sul nostro hard disk anche una copia completa e aggiornata del Reference. Per aprirla è sufficiente cliccare sul menu Help > Reference.

Un altro trucco che ci permette di velocizzare molto il lavoro di ricerca è l’utilizzo del Find in Reference. Se stiamo lavorando a uno sketch e abbiamo già scritto del codice, evidenziando il nome della funzione su cui abbiamo dei dubbi possiamo cliccare su Help > Find in Reference – su Mac abbreviato con ⇧⌘F – per accedere direttamente alla pagina del manuale che tratta di quella funzione specifica.

Come leggere il reference

La documentazione è disponibile solo in inglese ma, con un piccolo sforzo, non è difficile carpire le informazioni che ci interessano.

Quando clicchiamo su una funzione, troviamo le seguenti sezioni:

  • Name: viene riportato il nome della funzione.
  • Examples: con poche righe di codice e delle immagini ci vengono mostrati degli esempi di funzionamento.
  • Description: in modo più o meno dettagliato in base alla complessità della funzione, viene descritto il suo funzionamento e i parametri accettati. Nel caso di line(), vengono indicate anche altre funzioni che possiamo usare in concomitanza con la prima per, ad esempio, colorare la nostra linea.
  • Syntax: la sintassi corretta per la funzione. Alcune funzioni possono accettare un numero diverso di parametri – nel caso di line() quattro se stiamo lavorando in 2D oppure sei nel caso in cui il nostro sketch sia in 3D – che portano, ovviamente, a risultati diversi.
  • Parameters: i tipi di parametri che sono accettati. Questo sarà più chiaro quando parleremo, per l’appunto, di variabili e tipi di dati prossimamente.
  • Returns: che tipo di dati la funzione restituisce in output. Anche in questo caso, sarà più chiaro quando tratteremo in modo più approfondito le funzioni.
  • Related: le funzioni correlate a quella cercata.

Primitive 2D

È arrivato il momento di disegnare un po’ di primitive 2D. Per comodità utilizzerò sempre la funzione size(), che abbiamo già incontrato precedentemente, all’inizio di ogni sketch per impostare la dimensione della finestra a 500 pixel di altezza e larghezza.

Punto – point()

Use of Processing's point function.
Disegniamo un punto al centro della finestra.
La funzione point() disegna un punto di dimensione pari a 1 pixel sullo schermo. Quando lavoriamo in 2D, accetta due parametri: e y che sono, rispettivamente, la coordinata orizzontale e quella verticale.

size(500, 500);
point(250, 250);

Il punto, di colore nero, è stato disegnato al centro della finestra nella posizione x = 250 e y = 250. Data la dimensione ridotta del pixel sullo schermo, è possibile che facciate fatica a vederlo.

Linea – line()

La nostra prima linea.
Disegniamo una linea tra due punti.
Della funzione line() abbiamo già discusso ma, per completezza, non potevo escluderla da questo post. A differenza di point(), per disegnare una linea abbiamo bisogno di quattro parametri: x e y del punto di partenza e di arrivo.

size(500, 500);
line(100, 150, 400, 250);

Rettangolo – rect()

rect() è la funzione che ci permette di disegnare un rettangolo sullo schermo. Se per disegnare un punto occorrevano due parametri e per una linea ne sono serviti quattro, potreste pensare che per il rettangolo ne servano almeno otto, due parametri x e y per ogni angolo. Ma non è così! Se, infatti, avessimo le coordinate dei quattro punti sarebbe comunque difficile stabilire quale punto deve essere collegato al seguente e questo ci causerebbe forti mal di testa.

La funzione rect(), quando si lavora in 2D, ha bisogno sempre di quattro parametri: x e y del punto di origine e poi larghezza e altezza del rettangolo.

size(500, 500);
rect(250, 250, 100, 150);

Queste due linee di codice si possono quindi tradurre in:

- Imposta la misura della finestra: 500 pixel in altezza e 500 in larghezza
- Disegna un rettangolo il cui punto di origine sia x = 250, y = 250, largo 100 pixel e alto 150 pixel.

Ecco l’immagine che verrà prodotta:

Processing rect() function
Un rettangolo con punto di origine (250, 250) largo 100 pixel e alto 150
Come avrete sicuramente notato, così come per lo schermo il punto di origine è sempre l’angolo in alto a sinistra, anche per i rettangoli viene considerato di default come punto di origine lo stesso angolo della forma. Se vogliamo modificare questo comportamento esiste una funzione chiamata rectMode()

Modifichiamo leggermente il codice precedente:

size(500, 500);
rectMode(CENTER);
rect(250, 250, 100, 150);

Ed ecco come cambia il risultato:

Processing rectMode function
Utilizzando rectMode(CENTER) il punto di origine del rettangolo sarà il centro della forma.
Dal momento che il computer esegue in ordine un’operazione alla volta, dobbiamo ovviamente impostare rectMode() prima di disegnare il rettangolo, altrimenti l’istruzione verrà ignorata.

Se volessimo disegnare un quadrato, è sufficiente utilizzare la funzione rect() impostando larghezza e altezza del rettangolo di pari dimensioni.

Ellisse – ellipse ()

Con lo stesso principio usato per rect() possiamo usare la funzione ellipse() per disegnare ellissi e cerchi. Anche questa funzione accetta quattro parametri: x e y del punto di origine e larghezza e altezza dell’ellisse (nel caso siano uguali, verrà disegnato un cerchio).

size(500, 500);
ellipse(250, 250, 150, 150);

Processing's function ellipse()
Impostando altezza e larghezza uguali, abbiamo disegnato un cerchio con la funzione ellipse()
Da notare che esiste la funzione ellipseMode() ma, a differenza dei rettangoli, di default il punto di riferimento degli ellissi e dei cerchi è sempre il centro della forma.

Triangolo – triangle()

Infine la funzione triangle() ci permette di disegnare un triangolo indicando come parametri le coordinate x e y dei tre vertici del triangolo.

size(500, 500);
triangle(250, 200, 300, 300, 200, 300);

Processing's triangle() function
La funzione triangle() accetta sei parametri: x e y dei 3 vertici del triangolo.
Queste sono le forme che utilizzeremo maggiormente nei nostri prossimi esercizi. Come indicato nel reference, tra le primitive 2D ci sono altre due funzioni: quad() arc() che in questo momento non è il caso di approfondire.

Schermo, pixel e linee

Una volta scaricato e installato Processing, è arrivato il momento di cominciare sporcarsi le mani e a programmare il nostro primo sketch. Se apriamo l’IDE e clicchiamo sul pulsante Run senza scrivere alcuna riga di codice, dopo qualche secondo comparirà una finestra simile a quella nell’immagine qui sotto.

Il nostro primo sketch in Processing.
Il nostro primo sketch in Processing.

Complimenti! Questo è il vostro primo programma funzionante realizzato con questo linguaggio di programmazione. Mi rendo conto che per molti, a prima vista, potrebbe non sembrare una grande conquista ma vi assicuro che se avessimo dovuto raggiungere lo stesso risultato con altri linguaggi, non sarebbe stato così semplice.

Lavorare con i pixel

Lo schermo è la nostra tela. Prima di cominciare a disegnare qualcosa su di esso è dunque necessario fare un paio di considerazioni a riguardo: per prima cosa lo schermo è composto da una griglia di pixel che, per semplicità, possiamo paragonare a un foglio di carta millimetrata.

Il pixel è dunque la nostra unità di misura e la sua dimensione è così ridotta che, a occhio nudo, è difficile distinguere un pixel da quello adiacente.

Quando alle elementari abbiamo cominciato a disegnare punti, linee e forme geometriche sulla carta millimetrata, siamo stati abituati a lavorare all’interno di un piano cartesiano con punto di origine (0, 0) normalmente posizionato al centro del foglio come nell’immagine seguente.

Un piano cartesiano "tradizionale".
Un piano cartesiano “tradizionale”.

La differenza principale rispetto a come siamo sempre stati abituati a ragionare è che sullo schermo del computer il punto di origine non si trova al centro ma nell’angolo in alto a sinistra.

Coordinate Schermo
Sistema di coordinate di uno schermo con punto di origine in alto a sinistra.

Come è facile intuire, il vantaggio di questo sistema è che qualsiasi punto sullo schermo ha sempre un valore positivo; questo ci tornerà molto utile quando cominceremo a fare dei programmi più complessi.

Disegnamo una linea sullo schermo

Copiate e incollate questo codice su Processing e poi premete il tasto Run.

size(500, 500);
line(100, 150, 400, 250);

Questo è il risultato che dovrebbe comparirvi: una linea nera su sfondo grigio.

La nostra prima linea.
La nostra prima linea.

Nel caso in cui questo non avvenga, è possibile che abbiate sbagliato qualcosa nel copia-incolla. Provate a cliccare su view raw e ricopiare nuovamente le due linee di codice.

Per questo sketch abbiamo utilizzato due linee di codice con due funzioni: size() e line(). Se andiamo a cercare nel Reference, il manuale sul sito di Processing, scopriamo a cosa servono e qual è la sintassi corretta da utilizzare: size(width, height) serve per determinare la grandezza della finestra su cui vogliamo lavorare e accetta due parametri: larghezza (in inglese width) e altezza (in inglese height); line(x1, y1, x2, y2), invece, disegna una linea sullo schermo e, per funzionare, ha bisogno di quattro parametri: le coordinate x e y del punto di partenza e di arrivo.

In buona sostanza abbiamo scritto un programma con le seguenti istruzioni:

1. Disegna una finestra di 500 pixel di altezza e 500 pixel di larghezza.
2. Disegna una linea dal punto con coordinata x = 100 e y = 150 al punto con coordinate x = 450, y = 250.

Non abbiamo dato nessun’altra indicazione e Processing ha utilizzato dei valori di default per tutto il resto: il grigio dello sfondo e il nero della linea.

Punto e virgola

Un’ultima cosa da notare è che, a differenza di quando scriviamo, in programmazione utilizziamo il punto e virgola per separare le varie istruzioni anziché il punto fermo. Questa è una cosa da memorizzare e imparare subito: molto spesso, i nostri programmi non funzionano perché ci siamo dimenticati di mettere proprio un punto e virgola al termine di un’istruzione (nei prossimi post vi insegnerò come riconoscere questo genere di errori grazie al debugger). A differenza di noi umani che non abbiamo problemi a leggere un testo anche se manca un punto, i computer non riescono capire se un’istruzione è finita in assenza del punto e virgola.