HTML5 canvas: animazione controllata da form

Seguendo il percorso iniziato con easel.js proviamo ad animare due oggetti in un canvas, uno avrà un FPS governato da una select, l’altro sarà sempre costante.

Quindi partendo dal solito html, aggiungiamo una funzione javascript che crea due oggetti timeCircle e tickCircle e poi procediamo con la solita animazione:

function init() {
stage = new createjs.Stage("myCanvas");

timeCircle = new createjs.Shape();
timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
timeCircle.y = 50;
stage.addChild(timeCircle);

tickCircle = new createjs.Shape();
tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
tickCircle.y = 150;
stage.addChild(tickCircle);

createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(20);
}

Le varibili stage, timeCircle, tickCircle, dovranno esser globali.

A questo punto inseriamo nell’html la select per regolare la velocità del primo cerchio:

<select onchange="createjs.Ticker.setFPS(Number(this.value));">
<option value="10">10 fps</option>
<option value="20" selected>20 fps</option>
<option value="30">30 fps</option>
<option value="40">40 fps</option>
<option value="50">50 fps</option>
<option value="60">60 fps</option>
</select>

All’onchange modifichiamo il FPS. Resta da definire la funzione tick:

function tick(event) {
// time based
timeCircle.x = timeCircle.x + (event.delta)/1000*100;
if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }

// not time based:
tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5
if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; }

stage.update();
}

Dove il secondo è sempre costante, mentre la velocità del primo è calcolata a partire dal valore passato dalla select (o dalla chiamata iniziale)

Ecco l’esempio