0D

Punti

La point() è la più semplice delle primitive grafiche. Se invocata con due coordinate, colloca un punto nello spazio X-Y. Se invocata con tre coordinate, colloca il punto nello spazio X-Y-Z. Un punto, in senso geometrico, non ha dimensione, ma ad esso può essere associata una occupazione in pixel ed un colore, mediante le funzioni strokeWeight() e stroke(), rispettivamente. Ad esempio, il semplicissimo sketch Processing

	  stroke(180,0,0);
	  strokeWeight(10);
	  point(60,60);
	

Collezioni di punti

Un insieme di punti può essere raggruppato in un unico oggetto (nuvola di punti) mediante i due delimitatori beginShape(POINTS) e endShape(), tra i quali ogni punto va specificato con la funzione vertex(). Trasformazioni di rotazione, traslazione, o scalamento non si applicano internamente agli oggetti compositi descritti da beginShape() e endShape(), ma possono precedere la definizione di un composito e applicarsi all'insieme.

1D

Rette

La line() traccia un segmento di retta tra due punti del piano o dello spazio, con spessore e colore eventualmente impostati tramite strokeWeight() e stroke(), rispettivamente.

Collezioni di segmenti

Un insieme di segmenti può essere definito, analogamente a quanto visto per i punti, mediante i delimitatori beginShape() e endShape(), tra i quali si elencano gli estremi dei segmenti mediante la funzione vertex(). Usando la invocazione beginShape(LINES) i vertici vengono presi a coppie, ciascuna identificante un segmento, mentre con la invocazione senza argomenti beginShape() i vertici, presi uno dopo l'altro, definiscono una spezzata. Chiudendo con endShape(CLOSE) la spezzata viene chiusa su se stessa mediante collegamento del primo e dell'ultimo vertice. Il colore del poligono così ottenuto può essere impostato mediante la fill(), ovvero lasciato uguale a quello dello sfondo con la noFill().

Curve

La funzione curve(), invocata con otto parametri, traccia una curva sul piano immagine, con punto iniziale e finale determinati, rispettivamente, dalle seconda e dalla terza coppia di coordinate passate come argomenti. Le due coppie di coordinate iniziale e finale definiscono due punti di controllo della curva tracciata, la quale è una spline interpolante che passa per tutti e quattro i punti. In Processing, tuttavia, viene visualizzato solo il segmento di curva compreso tra i due punti intermedi.

Definition 1: Spline

Curva polinomiale a tratti, con polinomi connessi con continuità ai nodi (knot)

Nota:

Si veda Introduction to Splines e, per una introduzione al tipo specifico di spline (Catmull-Rom) usato in processing, la voce spline in Wikipedia.

A differenza della curve(), nella funzione bezier() i due punti di controllo specificati dai quattro parametri intermedi non sono punti attraversati dalla curva. Essi servono solo a definire la forma della curva approssimante di Bézier, la quale ha le seguenti proprietà notevoli:

stroke(255, 0, 0); 
line(93, 40, 10, 10); 
line(90, 90, 15, 80); 
stroke(0, 0, 0); 
noFill();
bezier(93, 40, 10, 10, 90, 90, 15, 80);
	

Ci sono ulteriori metodi che consentono di leggere le coordinate o la direzione della tangente in un punto qualsiasi lungo la curva di Bézier o spline interpolante, stabilito mediante un parametro t t che può andare da 0 0 (primo estremo) a 1 1 (secondo estremo). E' anche possibile impostare la precisione di tracciamento di curve approssimanti e interpolanti in 3D. Per i dettagli si rimanda al manuale di riferimento di Processing.

Lo sketch processing di tabella illustra la differenza tra curva interpolante spline e curva di Bézier.

            
                
void setup() {
  c1x = 120;
  c1y = 110;
  c2x = 50;
  c2y = 70;
  background(200);
  stroke(0,0,0);
  size(200, 200);
}

int D1, D2;
int X, Y;
int c1x, c1y, c2x, c2y;

void draw() {
  if (mousePressed == true) {
    X = mouseX; Y = mouseY;
    // selezione del punto che si modifica
    D1 = (X - c1x)*(X - c1x) + (Y - c1y)*(Y - c1y); 
    D2 = (X - c2x)*(X - c2x) + (Y - c2y)*(Y - c2y);
    if (D1 < D2) {
    c1x = X; c1y = Y;
    }
    else {
     c2x = X; c2y = Y;
     }
    }
    background(200);
    stroke(0,0,0);
    strokeWeight(1);
    
    noFill();
    beginShape(); 
    curveVertex(10,  10); 
    curveVertex(10,  10); 
    curveVertex(c2x, c2y); 
    curveVertex(c1x, c1y); 
    curveVertex(190, 190); 
    curveVertex(190, 190); 
    endShape(); 
       
    stroke(255,30,0);
    bezier(10,10,c2x,c2y,c1x,c1y,190,190);
    strokeWeight(4);
    point(c1x,c1y);
    point(c2x,c2y);
}
                   	      
	    

2D

Triangoli

Il triangolo è l'elemento costruttivo fondamentale per la grafica 3D, in quanto mediante giustapposizione di triangoli si approssimano superfici continue. In Processing, però, i triangoli sono elementi specificati nel 2D mediante la primitiva triangle(), la quale ha sei parametri corrispondenti alle coordinate dei tre vertici nella finestra immagine. Pur essendo definito nel 2D, ogni triangolo può essere soggetto a trasformazioni di rotazione e traslazione all'interno dello spazio 3D, come avviene nello sketch Processing

 
	void setup(){ 
	    size(200, 200, P3D); 
	    fill(210, 20, 20);
	    }

	float angle = 0;

	void draw(){
	    background(200); // clear image
	    stroke(0,0,0);
	    angle += 0.005;
	    rotateX(angle);
	    triangle(10,10,30,70,80,80);
	}	    

	

Collezioni di triangoli

Un insieme di triangoli può essere definito, analogamente a quanto visto per i punti e segmenti, mediante i delimitatori beginShape() e endShape(), tra i quali si elencano i vertici dei triangoli mediante la funzione vertex(). Usando la invocazione beginShape(TRIANGLES) i vertici vengono presi a terne, ciascuna identificante un triangolo, mentre con la invocazione beginShape(TRIANGLE_STRIP) i vertici, presi uno dopo l'altro, definiscono una striscia di superficie a facce triangolari. Se le vertex() hanno tre argomenti, i vertici vengono collocati nello spazio 3D e i corrispondenti triangoli individuano superfici planari nello spazio.

Quadrilateri

I rettangoli si definiscono, in Processing, mediante la funzione rect() di quattro parametri, in cui i primi due specificano, per default, la posizione nel piano 2D dell'angolo in alto a sinistra, e il terzo e quarto specificano, rispettivamente, la larghezza e la altezza. Il significato dei primi due parametri si può cambiare con la funzione rectMode(): rectMode(CORNER) corrisponde al posizionamento di default; rectMode(CENTER) corrisponde al posizionamento del centro del rettangolo nel punto specificato dalle prime due coordinate; rectMode(CORNERS) fa in modo che i quattro parametri vengano interpretati come le coordinate del vertice in alto a sinistra e del vertice in basso a destra. Un quadrilatero generico si definisce mediante le coordinate dei suoi quattro vertici, passate come parametri alla funzione quad(). E' importante notare che in 3D, mentre un triangolo rimane in ogni caso planare, una quadrupla di punti può dare luogo ad una superficie curva. Viceversa, i quadrilateri definiti mediante roto-traslazioni 3D di quadruple di vertici 2D rimangono planari. Processing permette di passare solo otto parametri alla quad(), in tal modo forzando la definizione del quadrilatero mediante una quadrupla di vertici 2D.

Collezioni di quadrilateri

Un insieme di quadrilateri può essere definito, analogamente a quanto visto per i triangoli, mediante i delimitatori beginShape() e endShape(), tra i quali si elencano i vertici dei quadrilateri mediante la funzione vertex(). Usando la invocazione beginShape(QUADS) i vertici vengono presi a quadruple, ciascuna identificante un quadrilatero, mentre con la invocazione beginShape(QUAD_STRIP) i vertici, presi uno dopo l'altro, definiscono una striscia di superficie a facce quadrilatere. Se i vertex() usati hanno tre parametri, non è garantita la planarità delle facce risultanti, e quindi la resa grafica può essere fuorviante. Ad esempio, eseguendo il codice

	    size(200,200,P3D);
	    lights();
	    beginShape(QUADS);
	    vertex(20,31, 33);
	    vertex(80, 40, 38);
	    vertex(75, 88, 50);
	    vertex(49, 85, 74);
	    endShape();
	  

Poligoni

Un poligono generico è definito da una successione di vertici, ed è un oggetto dotato di una superficie che può essere colorata. In Processing tali vertici si elencano dentro a una coppia beginShape(POLYGON); - endShape(); In realtà il poligono è da intendersi in senso generalizzato, essendo possibile usare le bezierVertex() e curveVertex() per specificare profili curvi. Ad esempio, si provi a disegnare la luna:

	    fill(246, 168, 20);
	    beginShape(POLYGON); 
	    vertex(30, 20); 
	    bezierVertex(80, 10, 80, 75, 30, 75); 
	    bezierVertex(50, 70, 60, 25, 30, 20); 
	    endShape(); 
	  

Ellissi

La funzione ellipse() traccia una ellisse nel piano 2D. I quattro parametri sono interpretati, come nel caso della rect(), come posizione seguita da larghezza e altezza. La posizione può essere regolata mediante la chiamata ellipseMode(), il cui parametro può assumere valori CORNER, CORNERS, CENTER, CENTER_RADIUS. I primi due di questi quattro possibili valori vanno riferiti al rettangolo circoscritto alla ellisse.

3D

Processing offre un repertorio assai limitato di primitive di oggetti tridimensionali, essenzialmente solo sfere e parallelepipedi.

Scatole

La funzione box() produce un cubo se invocata con un solo parametro (lato), un parallelepipedo se invocata con tre parametri (larghezza, altezza, profondità).

Palle

La funzione sphere() produce, mediante un poliedro approssimante, una sfera il cui raggio è specificato come parametro. La funzione sphereDetail() può essere usata per specificare il numero di vertici del poliedro che approssima la sfera ideale.

Proiezione prospettica

Una proiezione prospettica è caratterizzata da un centro di proiezione e da un piano di proiezione. I raggi proiettori collegano i punti della scena con il centro di proiezione, individuando i corrispondenti punti proiettati sul piano di proiezione. La Figura 1 mostra una vista in sezione in cui il piano di proiezione è individuato da una retta di ascissa -d d , e il centro di proiezione è collocato nell'origine.

Figura 1

Più in generale, la proiezione di un punto di coordinate omogenee xyz1 x y z 1 su un piano perpendicolare all'asse z z e secante tale asse in posizione -d d si effettua, in coordinate omogenee, per moltiplicazione con la matrice 10000100001000-1d0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 d 0 . Il punto proiettato diventa xyz-zd x y z z d , il quale può essere normalizzato moltiplicando tutti i suoi elementi per -dz d z . Si ottiene quindi -xdz-ydz-d1 x d z y d z d 1

Viste parallele

Le viste parallele sono quelle che si ottengono facendo retrocedere a infinito ( ∞ ) il centro di proiezione. In questo modo, i raggi proiettori sono tutti paralleli.

Proiezione di ombre

Come abbiamo visto, Processing offre un modello di illuminazione locale, e quindi non è possibile proiettare ombre (shadow casting) per via diretta. Tuttavia, la manipolazione delle matrici di trasformazione affine ci consente di proiettare abbastanza agevolmente ombre su piani. La tecnica che si usa è detta flashing in the eye, con questo termine intendendo che si sposta il centro ottico della scena nel punto in cui è collocata la sorgente luminosa, e si procede con una trasformazione prospettica con piano di proiezione coincidente con quello su cui si vuole proiettare l'ombra.

Esempio 3

Il codice seguente proietta sul pavimento l'ombra generata da una sorgente di luce collocata sull'asse y y. Il risultato è mostrato in Figura 2

Figura 2

Proiezione di un'ombra

size(200, 200, P3D);
float centro = 100; 
float yp = 70; // distanza del piano di proiezione (il pavimento) dal centro
float yl = 40; // altezza del centro di proiezione (la sorgente di luce) 
               // rispetto al centro

translate(centro, centro, 0); // spostamento dell'origine 
                              // al centro della finestra
noFill();
box(yp*2); //disegno del cubo-stanza
pushMatrix();
  fill(250); noStroke();
  translate(0, -yl, 0); // spostamento in alto (rispetto al centro)
                        // della "lampadina"
  sphere(4); // disegno della sfera che rappresenta la lampadina
  stroke(10);
popMatrix();

pushMatrix(); // disegno del cubo wireframe
  noFill();
  rotateY(PI/4); rotateX(PI/3);
  box(20);
popMatrix();

// PROIEZIONE DELL'OMBRA MEDIANTE
// COMPOSIZIONE DI TRE TRASFORMAZIONI (la terza è applicata per prima)

translate(0, -yl, 0); // riporta sorgente di luce e pavimento 
                      // nelle rispettive posizioni (vedi la traslazione
                      // sotto che viene applicata per prima all'ombra) 

applyMatrix(1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 1/(yp+yl), 0, 0); // proiezione sul pavimento
                                 // spostato in basso di yl
 
translate(0, yl, 0); // spostamento della sorgente di luce  
                     // (il centro di proiezione) al centro 
                     // della stanza (ovvero nell'origine) 
                     // e, solidalmente, del "pavimento" in basso di yl

pushMatrix();        // disegno del cubo grigio che genera l'ombra
  fill(120, 50);     // mediante le trasformazioni di cui sopra
  noStroke();
  rotateY(PI/4); rotateX(PI/3);
  box(20);
popMatrix();