E.5 - Trasformazioni

Obiettivo

Rielaborare i dati geometrici di un solido 3D in modo da ottenere una trasformazione visiva dell'oggetto rappresentato.

Modalità

Creare uno sketch che compia le seguenti operazioni:

• caricare un modello 3D in formato OBJ;
• clonare i vertici del modello caricato;
• trasformare progressivamente i vertici;
• impostare l'ambiente grafico (effetti o illuminazione 3D);
• disegnare una o più forme basate sui vertici.

var obj;                                   // modello 3D
var vertices = [];                         // vertici trasformabili

function preload() {
    obj = loadModel( 'vases.obj' );        // carica il modello 3D
}

function setup() {
	createCanvas( 720,720, WEBGL );

    for (var i=0; i<obj.vertices.length; ++i) {  // clona i vertici
        vertices[i] = obj.vertices[i].copy();  
    }
}

function draw() {

    for (var i=0; i<vertices.length; ++i) {  // trasforma i vertici
        vertices[i].y -= 3;
        if (vertices[i].y < -200) {
            vertices[i].y =  obj.vertices[i].y;
        }
    }

    background( 192,255,192 );             // imposta ambiente grafico
    ambientLight( 0,96,0 );
    directionalLight( 255,160,128, 1,1,-1 );
    directionalLight( 100,100,200, -1,-0.5,0.25 );
    noStroke();

    model(obj);                            // disegna forme basate su vertici
    for (var i=0; i<vertices.length; ++i) {
        var vert = vertices[i];
        push();
        translate( vert.x, vert.y, vert.z );
        sphere( 8 );
        pop();
    }
}

Su OpenProcessing si può trovare una versione interattiva un po' più completa.

Possibilità (non esclusive fra loro)

Scelta modello

Alcuni modelli già utilizzabili si possono trovare nel file Modelli 3D.zip

Altri si possono scaricare, anche gratuitamente, da siti come TurboSquid. Prima dell'utilizzo è necessario ridurre il numero di facce a meno di 50.000, capovolgere il modello (le coordinate y in p5.js sono invertite) e portarlo a una dimensione compatibile con la risoluzione scelta per il canvas.

Si consiglia di usare con attenzione i modelli complessi che rischiano di rendere le trasformazioni meno interessanti dell'originale.

Trasformazioni vettoriali

Oltre alle elaborazioni dirette dei valori delle coordinate dei vertici è possibile usare le funzioni e i metodi della classe p5.Vector. Tenete conto che l'angolo del vettore si può ottenere con la funzione heading() e la lunghezza con mag().

Cinetismi

Movimenti automatici del modello si possono ottenere attraverso le istruzioni di trasformazione geometrica con parametri ricavati dalla variabile frameCount, ad esempio:

rotateY(frameCount/100);
box(10);

Un'interazione minima si può ottenere lavorando sui parametri dell'istruzione camera() ma si consiglia di utilizzare l'istruzione orbitControl(), più limitata ma facile da implementare.

Accumulazione progressiva

Attraverso i cinetismi (automatici o interattivi) ed evitando di cancellare il fotogramma all'inizio di ogni draw() si possono produrre facilmente effetti di "scia" dei movimenti.

Visualizzazione 3D

In ambito 3D si possono ovviamente utilizzare le impostazione delle luci o dei materiali di p5.js. Anche l'uso dell'istruzione texture(), se non orientato a una resa realistica (difficile da ottenere in p5.js), può produrre risultati interessanti.

Trasformazioni raster

Purtroppo le istruzioni blendMode() e filter() non sono ancora implementate in modalità WEBGL. È comunque possibile utilizzare le coordinate 3D in modalità 2D usando, ad esempio, una coordinata per condizionare il disegno delle altre:

function setup() {
    createCanvas( 600,600 );
    ...
}
function draw() {
    ...
    var zOsc = frameCount%520 - 260;            // zOsc va da -260 a 260
    for (var i=0; i<vertices.length; ++i) {     // per ogni vertice...
        var vert = vertices[i].copy();
        if (abs(vert.z - zOsc) < 5) {           // se z è a meno di 5px da zOsc...
            var diam = sq( (260-vert.z) / 60 ); // accentua progressione
            ellipse( vert.x,vert.y, diam );     // disegna cerchio
        }
    }
}    

Su OpenProcessing si può trovare un esempio completo.

Consegna

L'esercitazione andrà caricata nel gruppo "Esercitazione 5" della classroom: openprocessing.org/class/57250

Per maggiori informazioni sul caricamento delle esercitazioni si può consultare la pagina sull'uso di OpenProcessing.