Pillole di codice #3 Muoviamo oggetti in Javascript

In questa pillola impareremo ad animare delle forme geometriche sul canvas con Javascript ed il framework P5.js.

Javascript come la maggior parte dei linguaggi di programmazione ha una concezione del tempo basata sui frame, quindi la nostra unità di misura del tempo non saranno i secondi come siamo abituati nel mondo fisico, ma i frame.

Cosa sono i frame? Semplicemente sono i fotogrammi che vengono renderizzati (dalla scheda grafica e dal browser) per creare l’immagine che poi vediamo sul nostro schermo.

Nelle applicazioni “moderne” questo valore è di 60 FPS (frame al secondo). Ma noi possiamo impostare questo valore utilizzando una semplice funzione.

frameRate(NUMEROFRAME);

Una piccola cosa non specificata all’interno del video è che il valore di FPS (in esecuzione) possiamo anche ricavarlo usando questo set di comandi

/*non inserendo nessun parametro all'interno della funzione frameRate
questa funziona come GETTER invece di essere un SETTER*/
var FPS=frameRate();
console.log(FPS); //qui vedo nel log il valore reale di FPS di esecuzione

Inoltre vedremo per la prima volta l’utilizzo della funzione draw(), che possiamo considerare come funzione di chiamata “evento” che viene scatenata ogni volta che il software deve renderizzare un nuovo frame.

Prima di chiudere una piccola nota: il framerate impostato non è necessariamente il framerate di esecuzione.

Può capitare infatti che in applicazioni particolarmente “CPU/GPU intensive” (che fanno largo uso di CPU o GPU), o in alcuni casi in cui c’è un collo di bottiglia nell’architettura usata, tipo moltissimi accessi di lettura/scrittura su disco che possono rallentare l’esecuzione, l’applicazione non riesca a renderizzare il canvas agli intervalli prefissati. In questi casi possono verificarsi dei framedrop (mancanza di render di alcuni frame), che possono peggiorare l’esperienza utente.

In questi casi è fondamentale rivedere il software (potrebbero esserci degli sprechi di risorse non previsti) o l’architettura in generale.

Ecco il video

Compila il form qui sotto per ricevere subito nella tua casella email i files della lezione.