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).

size(400, 400);  // Imposta la finestra a 400x400 pixel
strokeWeight(5); // Aumenta la dimensione del punto
point(200, 200); // Disegna un punto al centro della finestra

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.

size(400, 400);
strokeWeight(6);
point(100, 100);
point(300, 100);
point(100, 300);
point(300, 300);

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.

size(400, 400);
strokeWeight(4); // Imposta uno spessore maggiore
line(50, 100, 350, 300); // Disegna una linea diagonale

Variante

Disegniamo una “X” con due linee incrociate perpendicolari tra loro.

size(400, 400);
strokeWeight(3);
line(50, 50, 350, 350);
line(350, 50, 50, 350);

Rettangolo – rect()

Un rettangolo si disegna con quattro parametri: (x, y) del punto di origine, larghezza e altezza.

size(400, 400);
strokeWeight(3);
rect(150, 150, 100, 200); // Rettangolo centrato a (150,150) con larghezza 100 e altezza 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).

size(400, 400);
strokeWeight(3);
rectMode(CENTER);
rect(200, 200, 100, 200);

Ora il rettangolo sarà centrato nel punto (200,200).

Variante – disegnare un quadrato

size(400, 400);
strokeWeight(3);
rect(100, 100, 80, 80); // Un quadrato con lato 80

Ellisse – ellipse()

Simile a rect(), ellipse() utilizza quattro parametri: (x, y) del punto di origine, larghezza e altezza dell’ellisse.

size(400, 400);
strokeWeight(3);
ellipse(200, 200, 150, 100); // Disegna un'ellisse centrata a (200,20

Se i valori di larghezza e altezza sono uguali, si ottiene un cerchio:

size(400, 400);
strokeWeight(3);
ellipse(300, 300, 80, 80); // Disegna un cerchio con diametro 80

Triangolo – triangle()

Un triangolo si disegna specificando le coordinate dei tre vertici.

size(400, 400);
strokeWeight(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

size(400, 400);
strokeWeight(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.

size(400, 400);
strokeWeight(3);
quad(100, 150, 300, 100, 350, 250, 150, 300);

In questo caso, i quattro punti formano un quadrilatero irregolare.

Variante – Disegnare un parallelogramma

size(400, 400);
strokeWeight(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)

size(400, 400);
strokeWeight(3);
arc(200, 200, 150, 150, 0, PI); // Disegna un arco semicircolare

Questo codice crea un arco che va da 0 a PI (da sinistra a destra).

size(400, 400);
strokeWeight(3);
arc(250, 250, 100, 100, 0, HALF_PI);

In questo caso l’arco rappresenta un quarto di cerchio.

Buon Coding a tutti 🙂