Salve a todos!
A causa di impegni lavorativi ho dovuto congelare per un bel pò l’attività del blog, cosa che mi ha addolorato non poco; ultimamente, spinto da un paio di mail sull’argomento, ho deciso di provare ancora a scrivere articoli, non potendo però garantire una cadenza regolare.

Questa quindicesima lezione sarà molto semplice e parlerà di un argomento assai per certi tratti banale rispetto ai predecessori ma che mi è stato portato all’attenzione tempo fa.

“Come possiamo in WEBGL disegnare un cerchio?”

Non esistono funzioni primitive per eseguire tale operazione ma con le nostre conoscenze attuali possiamo ottenere comunque un risultato sufficientemente discreto senza appesantire troppo lo script.


L’idea è elementare quanto efficace: visto che il cerchio è composto da un insieme infinito di punti che ovviamente non possiamo disegnare tutti, cercheremo di “approssimare” tale figura come un insieme di n triangoli, dove n è un numero piuttosto grande!Come possiamo fare ciò? Passeremo il raggio del cerchio che ci interessa e questo fatidico numero n ad una funzione, MakeCircle(…), che calcolerà n punti equidistanti posti sul cerchio e con essi realizzerà n triangoli che darà in pasto alla solita funzione DrawScene. E’ una soluzione rozza ma i primi videgiochi usavano trucchi simili per riprodurre delle superfici curve senza rovinare troppo le prestazioni.Mostriamo un piccolo disegno esemplificativo:

Già con n = 6 possiamo notare una certa approssimazione alla forma di un cerchio: con un valore di n adeguato alla dimensioni del raggio, riusciremo ad ottenere una forma abbastanza curvilinea da poterla considerare accettabile.Vediamo la funzione makeCircle:

function makeCircle(rag,punti,color){
raggio=rag;
num_punti = punti;
vertices = [];
colors = [];
var alfa = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

for (i=0;i

Le prime righe non sono nient’altro che inizializzazioni e assegnazioni che ci serviranno durante lo script.
La prima cosa da notare è la variabile alfa: esso rappresenta l’ampiezza dell’angolo al centro del cerchio compreso tra i due lati uguali di ogni triangolo.
Sceglieremo n punti sul cerchio che siano tutti equidistanti dal loro precedente e da quello che segue, in modo tale che abbiamo tutti triangolo uguali fra loro.
Questo ci permetterà di calcolare con facilità i punti e, a sua volta, di avere tutti i vertici necessari per i nostre forme primitive.

for (i=0;i

In questa istruzione, ad ogni ciclo dell’istruzione for inseriremo i tre vertici per disegnare un triangolo; essendo un esempio semplificato , notiamo che la componente z vale sempre 0 ( lavoriamo solo su in piano), inoltre uno dei punti è sempre il centro del cerchio. L’angolo alfa, che viene incrementato ad ogni giro per poter trovare il punto successivo sull’arco, è calcolato in radianti visto che le funzioni sin e cos non lavorano direttamente con i gradi.

for (i=0;i<num_punti * 3;i++) colors=colors.concat(color);

Questo ciclo for la usiamo per riempire l’array dei colori: poichè il numero dei punti in totale è pari al triplo dei numero dei triangoli, concateneremo fra loro 3 * n array color.

Aumentando il numero n , si potrà notare quanto il risultato si approssimi sempre di più al tanto agognato cerchio; per dimostrare ciò, nell’esempio ho aggiunto tramite la libreria JQuery delle slider con cui variare i tre parametri di input della makeCircle(), cioè il colore, il raggio ed il numero dei punti.
In questo modo potremo notare che con un raggio pari a 1, già un n = 35 il risultato è ottimo. Provate l’esempio per credere(link)!

Per potere vedere scaricare il codice che è stato presentato nell’articolo ( lo trovate come lesson13 e potete scaricare il pacchetto completo lesson13.zip), collegarsi al solito repository Lab .

Grazie per l’attenzione,

Andrea