{"id":406,"date":"2022-10-06T09:43:19","date_gmt":"2022-10-06T07:43:19","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=406"},"modified":"2022-10-06T09:43:19","modified_gmt":"2022-10-06T07:43:19","slug":"5-6-temporizadores","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/5-6-temporizadores\/","title":{"rendered":"5.6. Temporizadores"},"content":{"rendered":"

Aunando los distintos conocimientos que hasta ahora hemos adquirido podemos desarrollar programas que cambien a lo largo del tiempo. Mediante el uso de variables y condicionales seremos capaces de crear sketches <\/em>que detecten que ha pasado una cantidad determinada de tiempo y ejecutar ciertas acciones cuando esto ocurra. Podr\u00edamos por ejemplo quitar el noLoop()<\/span> que utilizamos en el \u00faltimo ejemplo y hacer que obtengamos un valor aleatorio para el relleno del c\u00edrculo cada 2 segundos manteniendo el sketch<\/em> corriendo a 60 frames<\/em> por segundo.<\/p>\n

Para ello, podemos hacer uso del m\u00e9todo millis()<\/span> o tambi\u00e9n podemos usar la variable propia del sistema frameCount<\/span>. Ambas maneras permiten llevar la cuenta del tiempo transcurrido en nuestro sketch<\/em> pero lo hacen de distinta manera. La variable del sistema (como width<\/span> o height<\/span>) frameCount<\/span> almacena el n\u00famero de frame<\/em> actual en el que nos encontramos. Recordemos que por defecto en P5 la velocidad de refresco es de 60 fotogramas por segundo (algo que podemos cambiar si usamos el m\u00e9todo frameRate()<\/span>), por lo que frameCount<\/span> aumentar\u00e1 60 unidades cada segundo que transcurra.<\/p>\n

El n\u00famero de frames<\/em> por segundo (FPS) que podemos alcanzar depende de la capacidad de nuestro ordenador para procesar todas las instrucciones que tenemos en nuestro sketch.<\/em> Si le pedimos que haga demasiadas cosas, no le da tiempo a hacerlo todo en 1\/60 de segundo y el frame rate<\/em> baja. 60 frames<\/em> por segundo es un est\u00e1ndar en el mundo audiovisual (los televisores de 60 Hz por ejemplo, que muestran 60 im\u00e1genes por segundo), pero dependiendo del caso podr\u00eda ser aceptable trabajar a 30 FPS o incluso a 15 FPS (muchas pel\u00edculas de animaci\u00f3n usan 12 FPS). En nuestro caso, intentaremos mantener los 60 FPS siempre que podamos.<\/p>\n

El m\u00e9todo millis()<\/span> es similar a utilizar frameCount<\/span>, pero lo que nos devuelve millis()<\/span> son los milisegundos (mil\u00e9simas de segundo) que han transcurrido desde que iniciamos el sketch<\/em>.<\/p>\n

\"\"
Figura 58. frameCount<\/span> y millis()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En el ejemplo de la figura anterior vemos en funcionamiento tanto la variable del sistema frameCount<\/span> como el m\u00e9todo millis()<\/span>. Se puede observar un peque\u00f1o desfase (60 frames<\/em> no son exactamente 1.000 milisegundos), que tiene que ver con lo comentado anteriormente sobre la capacidad de nuestro ordenador. Siempre tratar\u00e1 de alcanzar los 60 frames<\/em> por segundo, pero si le exigimos mucho tratando de realizar muchas cosas simult\u00e1neamente, el frame rate <\/em>caer\u00e1.<\/p>\n

Veamos un par de ejemplos sencillos en los que cambiaremos el color de fondo aleatoriamente cada segundo utilizando temporizadores tanto con frameCount<\/span> como con millis()<\/span>:<\/p>\n

\"\"
Figura 59. Contador con frameCount<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Este quiz\u00e1 sea el ejemplo m\u00e1s sencillo para hacer un contador. Primero determinamos cada cu\u00e1ntos frames<\/em> queremos que se produzca un cambio. En nuestro caso, como queremos que el cambio se produzca cada segundo y sabemos que el sketch<\/em> corre a 60 FPS, ser\u00e1n 60 frames<\/em>. A continuaci\u00f3n, en el draw()<\/span> creamos una condici\u00f3n en la que utilizamos frameCount % framesToEvent == 0<\/span>. El operador %, si recordamos de pasados temas, es el operador m\u00f3dulo, que nos da el resto de la divisi\u00f3n de frameCount<\/span> entre framesToEvent<\/span>. El resto de esta divisi\u00f3n ser\u00e1 0 siempre que el frameCount<\/span>, el n\u00famero de frame<\/em>\u00a0actual, sea m\u00faltiplo de framesToEvent<\/span>. En nuestro caso, el resto de 60 entre 60 ser\u00e1 0, el de 120 entre 60 tambi\u00e9n 0, el de 180, 240, etc. De esta manera, la condici\u00f3n se cumple \u00fanicamente cada vez que transcurren 60 frames<\/em>, un segundo, tal como se puede observar en la consola.<\/p>\n

Pasemos a ver c\u00f3mo podemos hacer lo mismo pero utilizando millis()<\/span> en lugar de frameCount<\/span>:<\/p>\n

\"\"
Figura 60. Contador con millis()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En este caso lo que hacemos es crear una variable que lleva la cuenta de los milisegundos transcurridos rest\u00e1ndole los milisegundos transcurridos cuando ocurri\u00f3 el \u00faltimo evento. En la condici\u00f3n del if<\/span> testamos si este tiempo es mayor que 1.000 milisegundos y, si fuese as\u00ed, se cambia el color de fondo y se registra el tiempo en el que se ha producido el cambio para rest\u00e1rselo al tiempo actual y realizar de nuevo la comparaci\u00f3n. En la consola se puede observar c\u00f3mo una vez llegados a los 1.000 milisegundos transcurridos, se produce el cambio y el valor se reestablece.<\/p>\n","protected":false},"excerpt":{"rendered":"

Aunando los distintos conocimientos que hasta ahora hemos adquirido podemos desarrollar programas que cambien a lo largo del tiempo. Mediante el uso de variables y condicionales seremos capaces de crear sketches que detecten que ha pasado una cantidad determinada de tiempo y ejecutar ciertas acciones cuando esto ocurra. Podr\u00edamos por ejemplo quitar el que utilizamos […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/406"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=406"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/406\/revisions"}],"predecessor-version":[{"id":407,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/406\/revisions\/407"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}