Le Primitive Grafiche 2D in Processing
Processing offre diverse funzioni per disegnare forme geometriche di base in uno spazio bidimensionale. Vediamo come utilizzare alcune delle principali primitive, modificando dimensioni e spessori per migliorarne la visibilità.
Punto – point()
La funzione point() disegna un singolo pixel sullo schermo. In 2D, accetta due parametri: la coordinata x (orizzontale) e la coordinata y (verticale).
Il punto è stato disegnato alle coordinate (200, 200). Aumentando lo spessore con strokeWeight(5), sarà più visibile.
Variante
Possiamo disegnare più punti per creare una disposizione geometrica precisa.
Questo codice posiziona quattro punti agli angoli di un quadrato immaginario.
Linea – line()
Per disegnare una linea, dobbiamo specificare le coordinate (x1, y1) del punto di partenza e (x2, y2) del punto di arrivo.
3 | line(50, 100, 350, 300); |
Variante
Disegniamo una “X” con due linee incrociate perpendicolari tra loro.
Rettangolo – rect()
Un rettangolo si disegna con quattro parametri: (x, y) del punto di origine, larghezza e altezza.
3 | rect(150, 150, 100, 200); |
Usare rectMode() per cambiare il punto di origine
Per default, il rettangolo viene disegnato a partire dall’angolo in alto a sinistra. Possiamo modificare questo comportamento con rectMode(CENTER).
4 | rect(200, 200, 100, 200); |
Ora il rettangolo sarà centrato nel punto (200,200).
Variante – disegnare un quadrato
Ellisse – ellipse()
Simile a rect(), ellipse() utilizza quattro parametri: (x, y) del punto di origine, larghezza e altezza dell’ellisse.
3 | ellipse(200, 200, 150, 100); |
Se i valori di larghezza e altezza sono uguali, si ottiene un cerchio:
3 | ellipse(300, 300, 80, 80); |
Triangolo – triangle()
Un triangolo si disegna specificando le coordinate dei tre vertici.
3 | triangle(200, 100, 250, 250, 150, 250); |
Questo triangolo ha un vertice superiore (200, 100) e due vertici alla base (250, 250) e (150, 250).
Variante – Disegnare un triangolo con vertice verso il basso
3 | triangle(200, 300, 250, 150, 150, 150); |
Questa volta il vertice principale è in basso.
Quadrilatero – quad()
La funzione quad() permette di disegnare un quadrilatero specificando le coordinate dei quattro vertici in senso orario.
3 | quad(100, 150, 300, 100, 350, 250, 150, 300); |
In questo caso, i quattro punti formano un quadrilatero irregolare.
Variante – Disegnare un parallelogramma
3 | quad(100, 200, 250, 200, 300, 300, 150, 300); |
Questo codice genera un parallelogramma inclinato.
Arco – arc()
La funzione arc() permette di disegnare un arco di ellisse. I parametri richiesti sono:
- x, y (coordinate del centro)
- larghezza e altezza
- angolo iniziale e angolo finale (espressi in radianti)
3 | arc(200, 200, 150, 150, 0, PI); |
Questo codice crea un arco che va da 0 a PI (da sinistra a destra).
3 | arc(250, 250, 100, 100, 0, HALF_PI); |
In questo caso l’arco rappresenta un quarto di cerchio.
Buon Coding a tutti 
