Contingut.


Els mètodes de temps setTimeout(function, milliseconds) i setInterval(function, milliseconds) permeten temporalitzar l’execució de funcions, mentre que el mètode clearInterval(interval) permet aturar una temporalizació.

Amb aquests mètodes veurem que és possible:

  • Fer comptadors de temps.
  • Mostrar imatges de manera lenta, ràpida o molt ràpida.
  • Crear animacions amb seqüències.
  • Implementar funcions físiques de moviment.

Mètodes per temporalitzar

Mètode setTimeout(function,millisecons)

Mètode que fa esperar un determinat temps en milisegons i després executa la funció. Podem veure l’especificació d’aquest tipus d’intrucció aquí.
1
2
3
4
5
6
7
<p id="canvi">Canviaré al cap de tres segons que pitjis el botó</p>
<button onClick="setTimeout(canvia,3000)">botó</button>
<script>
function canvia(){
document.getElementById("canvi").innerHTML="He canviat ;)";
}
</script>

Implementació exemple:

Canviaré al cap de tres segons que pitjis el botó


Mètode setInterval(function,millisecons)

Mètode que permet dinamitzar una seqüencia de funcions “controlades”.
La declaració d’aquest mètode fa referència sempre a una variable que serà l’encarregada de mantenir l’interval. Aquesta variable servirà d’interruptor per encendre i apagar l’execució de la funció.
Al pròxim punt veurem un exemple complet.

window.clearInterval(variable)

Mètode que atura l’execució del mètode setInterval, aquesta instrucció es refereix a la variable que l’ha invocat. Fixa’t com ho fa a l’exemple.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Pitja el botó per posar en marxa el contador.
<p id="contador">Contador a 0.</p>
<button>Posa en Marxa</button>
<button>Atura</button>

<script>
var x=0; //variable contador.
//variableInterval:
//variable que controlarà la marxa
//i l'stop del mètode setInterval().
var variableInterval;

function start() {
  variableInterval = setInterval(interval, 1000);
}

function interval(){
    x++; //augmentam el valor de x.
    document.getElementById("contador").innerHTML="Contador a " + x + ".";
}

function stop(){
    window.clearTimeout(variableInterval);
}
</script>
Exercicis
Mira l’exemple de la implementació per realitzar els següents exercicis.

Exercici 9. Manejar la variable comptador.

Fes que quan s’aturi, el comptador es posi a zero.

Exercici 10. Controlar els clicks d’execució.

Fes que quan es posi en marxa sols funcioni una vegada. Afegint una variable global de control que sols deixi passar una vegada.

Exercici 11. Àmbit de les variables, crear contador de vegades que s’ha posat a zero.

Fixa’t en els aspectes, són importants.

  • La variable variableInterval està declarada a fora de la funció, per tant és accesible desde tot el codi.
  • Tot i que la declaram a fora és pot canviar el seu valor desde dins d’una funció.
  • Crea un comptador de vegades que s’ha posat a zero.

.

Aplicacions sobre un Canvas.

Canvi de imatges.

Podem emprar el canvas per mostrar i canviar imatges, aplicacions semblants a slider de imatges que estam acostumats a veure als webs.
Per realitzar un canvi d’imatges farem una funció que canvia i és executada per un temporitzador.
Hem de recordar que podem emprar el mètode window.onload per esperar a la càrrega de totes les imatges.

—> De fet, emprarem el mètode onload per saber quan es carrega cada imatge, i així podrem crear una finestra d’informació de càrrega.

1
2
3
4
<p id="info">Informació de càrrega.</p>
<img id="foto1" hidden="true" onload="carregat();" src="http://aula.gimnesia.net/fotos/1.jpg" />
<img id="foto2" hidden="true" onload="carregat();" src="http://aula.gimnesia.net/fotos/2.jpg" />
<img id="foto3" hidden="true" onload="carregat();" src="http://aula.gimnesia.net/fotos/3.jpg" />
Del següent codi d’implementació. onserva el seu comportament.
Fes propostes de solució dels següents aspectes:

  • No executar més d’una vegada el temporalitzador.
  • Mostrar una imatge al començament.
  • Trobar quina és la imatge que dona error de càrrega.
  • Crear un onload visual.

Animació de personatges

Per crear animacions es pot combinar l’element canvas, imatges, el javascript i els seus mètodes d’intervals.
En aquesta secció aprendrem a controlar les imatges sobre un canvas. Les posicions 2d i els canvis de imatges.

El primer exemple combina una seqüència de imatges dins intervals de temps que creen una animació.
Aquesta seqüència s’ha fet combinant intervals d’execució sobre un canvas. Són 9 imatges de la mateixa mida que van apareixent una darrera l’altra. Entre imatge i imatge s’esborra el canvas emprat.

Exercici 12. Llevar el borrat de imatge.

A la implementació del codi: implementació dibuix animat, fes la prova de llevar el borrat de imatge i prova que fa.
Veuràs que combina les imatges i redibuixa cada vegada. Per això és important saber pintar i saber borrar els elements per aconseguir el resultat desitjat.

Exercici 12b. Canvis d’imatge d’animals.

Amb el codi que vas crear per les imatges de gimnesia animals.
Fes que cada segon canvii d’imatge aleatoria.
Fes les proves amb borrat i sense borrat.
Prova a canviar a alta velocitat.

Esdeveniments de temps aplicant fòrmules físiques.

Les posicions (x,y) dels objectes sobre el canvas poden variar durant l’execució de l’script. Aquestes posicions es poden calcular aplicant les fòrmules físiques de posició, posicions aleatòries, pararàmetres externs, clicks del ratolí, etc.

El primer exemple que veurem és el d’aplicar la “fórmula de velocitat lineal”.

velocitat = espai / temps

Per aplicar la fòrmula l’hem de “desfer” i així aconseguim un moviment damunt el canvas.

Volem calcular el moviment sobre l’eix x, l’eix y serà constant.

espai = temps * velocitat + posició inicial.

x= (t*v) + x0

Comentaris sobre la implementació:

  • Declaració de variables: Per poder actualitzar les posicions tendrem declarades les variables. Aquestes han de ser globals per ser accesibles desde totes les funcions.
    1
    2
    3
    4
    5
    6
    7
    8
    <script><br />
    var x0=0;      //posició inicial de x.<br />
    var x=0;       //posició actualitzada de x<br />
    var y=200;     //posició de y, constant<br />
    var y0=200;    //posició inicial de y.<br />
    var v=3;       //Velocitat per defecte.<br />
    var t=0;       //temps inicial<br />
    var interval;  //Variable de control de l'interval.<br />
  • Integració amb el canvas: agafam el contexte del canvas mitjançant el seu id de l’estructura html.
    1
    2
    3
    <br />
    var canvas = document.getElementById("cami1");<br />
    var ctx = canvas.getContext("2d");<br />
  • Càlcul de la nova posició: Cream una funció que a cada crida actualitzarà la posició i, en el nostre cas, la fórmula depén de la variable t que augmenta en 1 a cada crida de la funció.
    A la mateixa funció pintam l’objecte damunt el canvas.

    1
    2
    3
    4
    5
    6
    7
    8
    <br />
    function fInt(){<br />
        ctx.clearRect(x,y,10,10);   //borram punt anterior<br />
        t++;                        //augmentam 1 la variable t de temps<br />
        x = x0 + v*t;               //calculam posició x<br />
        y = y0;                     //calculam posició y<br />
        ctx.fillRect(x,y,10,10);    //pintam punt actual<br />
    }<br />
  • Funció inici de l’execució: És la funció que iniciciarà l’interval, la variable que controla l’interval és controlInterval declarada a la capçalera de l’script.

    Hem d’explicar per tal que quedi clar que:

    • Hem afegit un input amb id=”velocitat” per canviar la velocitat.
    • A l’estructura HTML hi ha un botó que onClick crida a la funció fInt().
    • La variable controlInterval fa que no s’executi més de dues vegades l’interval, això faria que s’executàs a doble velocitat, a triple, …. a cada vegada que pitjassim el botó.
    • x= ens posa a l’inici l’element a moure.
    • atura(): Atura l’nterval actual.
    • 1
      2
      3
      4
      5
      6
      7
      8
      <br />
      function inici(){<br />
          if (controlInterval==1){atura();}       //controlam que no estigui en marxa<br />
          controlInterval=1;                      //ja està en marxa, segur<br />
          x=0;<br />
          v = document.getElementById("velocitat").value;<br />
          interval = setInterval(fInt,500);<br />
      }<br />
    • Temps assignat a l’interval: La funció setInterval() assigna la Velocitat de reproducció de la imatge, i dependrà dels frames per segon que emprem, és el refresc de la imatge. Si volem 60fps hauriem de posar un interval de 1000/60. En aquest cas farem la simulació amb un refresc a cada mig segon, interval = 500.

    Codi exemple d’implementació d’una funció de “moviment en velocitat constant”:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <br />
    Velocitat:<input id="velocitat" type="text"></input><br />
    <button onClick="inici();">posa en marxa</button><br />
    <canvas id="cami1" width="600" height="400" style="border:8px solid #d3d3d3;left: 0px; top: 0px; z-index: 0;" ></canvas><br />
    <script><br />
    var controlInterval=0;<br />
    var x=0;<br />
    var x0=0;<br />
    var y=200;<br />
    var y0=200;<br />
    var v=3;<br />
    var t=0;<br />
    var interval;<br />
    var canvas = document.getElementById("cami1");<br />
    var ctx = canvas.getContext("2d");<br />
    pinta();</p>
    <p>function atura(){<br />
        ctx.clearRect(x,y,10,10);   //borram punt anterior<br />
        pinta();<br />
        x=0;y=200;x0=0;y0=200;t=0;<br />
        window.clearTimeout(interval);<br />
    }</p>
    <p>function inici(){<br />
        if (controlInterval==1){atura();}       //controlam que no estigui en marxa<br />
        controlInterval=1;                      //ja està en marxa, segur<br />
        x=0;<br />
        v = document.getElementById("velocitat").value;<br />
        interval = setInterval(fInt,500);<br />
    }</p>
    <p>function fInt(){<br />
        ctx.clearRect(x,y,10,10);   //borram punt anterior<br />
        t++;                        //augmentam 1 segon<br />
        x = x0 + v*t;               //calculam posició x<br />
        y = y0;                     //calculam posició y<br />
        ctx.fillRect(x,y,10,10);    //pintam punt actual<br />
    }</p>
    <p>function pinta(){<br />
        ctx.fillRect(x0,y0,10,10);<br />
    }</p>
    <p>

El incrustat a js.do codi aquí. Per realitzar els exercicis.

Exercici 14. Canviar FPS.

.
Afegeix a l’estructura html text cronòmetre que mostri les actualitzacions del canvas.
Afegeix un text que mostri la posició de x i de y.
Al codi canvia els valors de l’interval a 1000/30 i la variable velocitat ha de quadrar amb el canvi.
Fes una funció que calculi automàticament aquesta variació.

Exercici 15. Canvi de posició de y.

Amb el codi de l’exercici 13, s’han de relitzar uns canvis per tal que a cada click sobre el canvas el punt puji 5 pícsels la seva posició.
Ho heu de fer amb una funció que la podeu anomenar pujaY(), aquesta serà cridada amb l’esdeveniment onclick() posat dins del canvas.

Per elevar un poc el nivell de la fòrmula i, a petició de n’Albert, farem un estudi de una bolla que bota. Per tant el que farem serà cercar informació sobre el tema.
És molt interessant l’estudi a The mystery of the Bouncing Ball on ens mostra gràficament una simulació del comportament de la bolla.

Seguint les reocmanacions de The mechanics of bouncing objects

  • El desplaçament gràfic d’una bolla rebotant consisteix en un infinit nombre de subfuncions, cada una d’elles descriu el desplaçament entre dos bots consecutius.

  • Del gràfic:

    • y: desplaçament.
    • t: temps.
    • a: acceleració.
    • h: altura inicial.
    • e: Coeficient de restitució.
    • b: Nombres de bots fets.
    • Exercici 16. Fòrmula Bouncing Ball.

      Per implementar una bolla que rebota.
      Pots investigar a https://www.webfx.com/blog/web-design/bouncing-a-ball-around-with-html5-and-javascript/ , http://asgaard.co.uk/misc/html5canvas.php i a

      Bouncing a Ball Around with HTML5 and JavaScript