10.4. Espansione circolare dal centro

Effetto classico dei cartoon anni '70 che ho voluto includere per la sua caratteristica e per il poco utilizzo che se ne fa; in realtà un effetto del genere si addice solamente a videogames "poco seri" destinati ad un pubblico infantile, oppure a concept stravaganti (vedi il videogioco per XBox 360 Beautiful Katamari).

  1 // Sampler delle immagini sorgente e destinazione
  2 sampler2D sourceSampler;
  3 sampler2D destSampler;
  4 
  5 // Inverso della dimensione del viewport
  6 uniform float2 invViewSize;
  7 
  8 // Posizione della transizione 0.0 ... 1.0
  9 uniform float transition;
 10 
 11 // Valore del coseno di 45° sessagesimali
 12 const float cos45Deg = 0.7071067811;
 13 
 14 float4 ps_main(float2 TexCoords : TEXCOORD0) : COLOR0
 15 {
 16     // Recupero le informazioni dai render-targets per il pixel corrente
 17     float4 srcColor = tex2D(sourceSampler, TexCoords);
 18     float4 destColor = tex2D(destSampler, TexCoords);
 19 
 20     // Calcola il raggio del cerchio in texture-space basandosi sulla
 21     // distanza dal centro del viewport. La divisione per cos45Deg
 22     // è necessaria per fare in modo che quando il cerchio passi
 23     // per i quattro spigoli del viewport radius sia uguale a 1.0.
 24     float radius = length(TexCoords - float2(0.5, 0.5)) / cos45Deg;
 25 
 26     // Confrontando il raggio con la posizione della transizione
 27     // possiamo determinare quale texture renderizzare dato che le
 28     // due variabili hanno lo stesso range.
 29     if (radius >= transition)
 30         return srcColor;
 31     else
 32         return destColor;
 33 }

La realizzazione si basa sul calcolo della distanza tra le coordinate di texture (0.5, 0.5), che rappresentano il centro del viewport corrente, e quelle del pixel attuale; questa distanza rappresenta il raggio del cerchio/ellisse e, nel caso sia maggiore della variabile transition, indica la necessità di visualizzare l'immagine sorgente, altrimenti quella destinazione.

Come visibile dal codice, è stata inserita una costante che rappresenta il coseno di 45° (la diagonale in texture-space) e che, in questo caso rappresenta il punto dell'animazione in cui il cerchio passa per i quattro spigoli del monitor, ed è utile per riscalare la variabile radius in modo da poterla comparare con la variabile transition.

Visualizzazione dell'effetto:

È da notare che questo come i precedenti effetti si basano tutti sul texture-space; questa caratteristica li rende funzionanti qualsiasi sia la risoluzione e le dimensioni del viewport corrente, in questo caso specifico, se il viewport non è quadrato a posto di un cerchio otterremo un'ellisse.