{"id":1983,"date":"2019-07-10T14:46:58","date_gmt":"2019-07-10T12:46:58","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1983"},"modified":"2019-08-17T19:55:10","modified_gmt":"2019-08-17T17:55:10","slug":"p5-js-en-los-dispositivos-moviles","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/p5-js-en-los-dispositivos-moviles\/","title":{"rendered":"3.6. p5.js en los dispositivos m\u00f3viles"},"content":{"rendered":"

Podemos usar nuestra aplicaci\u00f3n en dispositivos m\u00f3viles. p5.js se encarga de traducir los eventos<\/em> de pantalla a eventos<\/em> de teclado, con lo que un toque en la pantalla equivaldr\u00e1 a un clic del rat\u00f3n.<\/p>\n

<\/p>\n

Fe de erratas<\/strong><\/p>\n

En el libro se usan variables espec\u00edficas de toque en pantalla (touchIsDown<\/span>, touchX<\/span> y touchY<\/span>) que ya no funcionan. En cambio, las mismas variables que usamos para el rat\u00f3n sirven para los toques en la pantalla. De este modo, la misma aplicaci\u00f3n sirve para el rat\u00f3n del ordenador y para los toques en la pantalla.<\/p>\n

Para conseguir que los ejemplos del libro funcionen solo hay que cambiar la variable touchIsDown<\/span><\/span><\/strong> por\u00a0mouseIsPressed<\/span><\/strong> y touchX<\/span><\/span><\/strong> y\u00a0touchY<\/span><\/span><\/strong> por mouseX<\/span><\/strong> y mouseY<\/span><\/strong> respectivamente.<\/p>\n

\n<\/div>\n

Los ejemplos 5-20 y 5-21 est\u00e1n pensados para usarlos con dispositivos m\u00f3viles.<\/p>\n

Funciones espec\u00edficas para dispositivos m\u00f3viles<\/h2>\n

Aunque podemos usar las funciones y variables de rat\u00f3n para interaccionar con la pantalla de un dispositivo m\u00f3vil, p5.js nos proporciona algunas opciones interesantes para hacerlo.<\/p>\n

Nota<\/strong>: Algunos de los ejemplos que veremos dentro de este apartado no se pueden probar en un ordenador, hay que hacerlo directamente en el m\u00f3vil, para lo cual ser\u00e1 necesario subir todo el c\u00f3digo a un servidor. Al final de este reto ten\u00e9is dos anexos. Uno de ellos os explica c\u00f3mo crear un entorno de desarrollo local (en vuestro ordenador) y el segundo da informaci\u00f3n de c\u00f3mo usar el servidor que la UOC pone a nuestra disposici\u00f3n.<\/p>\n<\/div>\n

Para que los programas que hacemos funcionen bien para dispositivos m\u00f3viles, har\u00e1 falta tambi\u00e9n una peque\u00f1a modificaci\u00f3n del archivo HTML que usamos como base y que es el que habr\u00edais de usar siempre.<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n <head>\r\n  <meta charset=\"utf-8\">\r\n  <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width\">\r\n  <style>\r\n    body {margin: 0; padding: 0;}\r\n  <\/style>\r\n  <script src=\"js\/p5.min.js\"><\/script>\r\n  <script src=\"js\/sketch.js\"><\/script>\r\n <\/head>\r\n <body>\r\n <\/body>\r\n<\/html><\/pre>\n
touches<\/span><\/h3>\n
touches<\/span><\/a> es una variable del sistema que nos guarda informaci\u00f3n de las posiciones donde se ha tocado la pantalla. Las pantallas de nuestros dispositivos m\u00f3viles son multit\u00e1ctiles, lo que quiere decir que pueden detectar m\u00e1s de un toque a la vez. La variable touches<\/span> almacena todas las posiciones de la pantalla que se est\u00e1n tocando. Es lo que llamamos array <\/em>y, a pesar de que lo veremos explicado con m\u00e1s detalle en el siguiente reto, vamos a ver ahora c\u00f3mo funciona.<\/p>\n
Los arrays<\/em> son una estructura de datos que nos permite guardar m\u00e1s de un dato a la vez. En la variable touches <\/span>podemos guardar todos los toques simult\u00e1neos en la pantalla. Para poder consultar los diferentes valores que puede guardar una variable de tipo array<\/em>, usamos esta notaci\u00f3n:<\/p>\n
touches[n];<\/pre>\n
Donde n<\/em> es la posici\u00f3n que queremos consultar. En el caso de touches<\/span>, adem\u00e1s tendremos un valor para la posici\u00f3n x<\/strong> y otro para la posici\u00f3n y<\/strong>; as\u00ed que para consultar la posici\u00f3n x <\/strong>e y<\/strong> del primer toque que se haga en la pantalla, haremos esta consulta:<\/p>\n
var posX = touches[0].x\r\nvar posY = touches[0].y<\/pre>\n
Si hay dos dedos tocando la pantalla, \u00bfc\u00f3mo accederemos a la posici\u00f3n del segundo dedo? F\u00e1cil, si la primera posici\u00f3n era 0, la segunda es 1:<\/p>\n
var posX = touches[1].x\r\nvar posY = touches[1].y<\/pre>\n
Vamos a ver un primer ejemplo con la variable touches<\/span>. Queremos que al hacer un toque en la pantalla, se dibuje en la posici\u00f3n donde se ha hecho el toque un c\u00edrculo.<\/p>\n
\/\/ En el setup creamos el canvas. Lo haremos de la anchura y la altura\r\n\/\/ m\u00e1xima de la pantalla.\r\n\r\nfunction setup() {\r\n createCanvas(windowWidth, windowHeight);\r\n background(\"white\");\r\n fill(255);\r\n}\r\nfunction draw() {\r\n if (touches.length>0) {\r\n   ellipse(touches[0].x, touches[0].y, 50, 50);\r\n }\r\n}\r\n<\/pre>\n
\u00a1Cuidado<\/strong>!<\/strong> El if<\/span><\/strong> es muy importante. Si el usuario no est\u00e1 tocando la pantalla en\u00a0touches [0]<\/span> no hay nada y el programa da un error y se para. Por lo tanto, tenemos que comprobar que la pantalla se est\u00e9 tocando. Si es as\u00ed, pintamos.<\/p>\n<\/div>\n
Si prob\u00e1is este ejemplo, os dar\u00e9is cuenta de que la pantalla del m\u00f3vil se mueve al mover el dedo. Es un efecto extra\u00f1o y feo de cara al usuario, pero arreglarlo es muy f\u00e1cil. Tenemos que a\u00f1adir esta funci\u00f3n al final (la explicaremos mejor m\u00e1s adelante):<\/p>\n
function touchMoved() {\r\n  return false;\r\n}<\/pre>\n
Ahora, con todo el c\u00f3digo, si probamos el ejemplo funcionar\u00e1 mejor.<\/p>\n
Ejercicios<\/h4>\n
    \n
  1. Modificar el c\u00f3digo para hacer que, en vez de pintar un c\u00edrculo, pinte un punto negro.<\/li>\n
  2. Modificar el c\u00f3digo para que dibuje dos c\u00edrculos si se est\u00e1 tocando la pantalla con dos dedos.<\/li>\n
  3. Modificar el c\u00f3digo para que el primer dedo haga dibujar un c\u00edrculo y el segundo dedo haga que cambie el color (negro si no hay un segundo dedo, rojo en caso contrario).<\/li>\n
  4. Modificar el c\u00f3digo para que el color de fondo cambie seg\u00fan el n\u00famero de dedos (hasta 4) que tocan la pantalla.<\/li>\n<\/ol>\n
    touchStarted()<\/span><\/h3>\n
    La funci\u00f3n\u00a0touchStarted()<\/span><\/a>, por defecto no tiene ning\u00fan c\u00f3digo asociado a p5.js, as\u00ed que tendremos que escribir nosotros el c\u00f3digo si la queremos usar. Esta funci\u00f3n es llamada en el momento en que se detecta un toque en la pantalla o un clic en el rat\u00f3n<\/em>. Si esta funci\u00f3n no existe, es decir, si no la hemos escrito nosotros, entonces se busca la\u00a0variable mouseIsPressed<\/span><\/a>.\u00a0El funcionamiento, sin embargo, es diferente y, por lo tanto, la programaci\u00f3n ser\u00e1 tambi\u00e9n diferente si se usa la funci\u00f3n o la variable.<\/p>\n
    Veremos ahora un par de ejemplos extra\u00eddos del manual de referencia de p5.js:<\/p>\n
    Ejemplo 1<\/p>\n
    var value = 0;\r\nfunction setup() {\r\n createCanvas(windowWidth, windowHeight);\r\n background(\"white\");\r\n}\r\nfunction draw() {\r\n fill(value);\r\n rect(25, 25, 50, 50);\r\n}\r\nfunction touchStarted() {\r\n if (value === 0) {\r\n  value = 255;\r\n } else {\r\n  value = 0;\r\n }\r\n}\r\n<\/pre>\n
    Como podemos ver, cuando se hace un toque en la pantalla, se cambia el color del cuadro. Ver\u00e9is que con el rat\u00f3n funciona muy bien, pero en el m\u00f3vil solo funciona bien si mantenemos tocando con el dedo al menos un segundo.<\/p>\n
    El segundo c\u00f3digo es este:<\/p>\n
    function setup() {\r\n createCanvas(windowWidth, windowHeight);\r\n background(124);\r\n fill(255);\r\n}\r\n\r\nfunction touchStarted() {\r\n ellipse(mouseX, mouseY, 5, 5);\r\n \/\/ prevent default\r\n return false;\r\n}<\/pre>\n
    En este caso, cada vez que hacemos un clic con el rat\u00f3n o tocamos la pantalla, se dibujar\u00e1 un c\u00edrculo. Probad el ejemplo y comprobad qu\u00e9 pasa cuando, manteniendo un dedo tocando la pantalla, hac\u00e9is un toque con otro dedo.<\/p>\n
    touchMoved()<\/span><\/h3>\n
    La funci\u00f3n definible touchMoved()<\/span><\/a>, se llama cuando movemos el dedo por encima de la pantalla. Si no est\u00e1 definida, se llama a la funci\u00f3n\u00a0mouseDragged()<\/span><\/a>. Sin duda, la mejor manera de entender el funcionamiento de esta funci\u00f3n es con un ejemplo, que ser\u00e1 el segundo que hemos usado para la funci\u00f3n touchStarted()<\/span>, pero cambiando la funci\u00f3n definida:<\/p>\n
    function setup() {\r\n createCanvas(windowWidth, windowHeight);\r\n background(124);\r\n fill(255);\r\n}\r\n\r\nfunction touchMoved() {\r\n ellipse(mouseX, mouseY, 5, 5);\r\n \/\/ prevent default\r\n return false;\r\n}<\/pre>\n
    A\u00f1adimos una funci\u00f3n\u00a0touchStarted()<\/span> para borrar el contenido:<\/p>\n
    function setup() {\r\n createCanvas(windowWidth, windowHeight);\r\n background(124);\r\n fill(255);\r\n}\r\n\r\nfunction touchMoved() {\r\n ellipse(mouseX, mouseY, 5, 5);\r\n \/\/ prevent default\r\n return false;\r\n}\r\n\r\nfunction touchStarted() {\r\n background(124);\r\n}\r\n<\/pre>\n
    touchEnded()<\/span><\/h3>\n
    La funci\u00f3n\u00a0touchEnded()<\/span><\/a> se llama cuando un toque finaliza. De nuevo usaremos un ejemplo para ver mejor su funcionamiento:<\/p>\n
    var xIni, yIni = 0;\r\nvar xFin, yFin = 0;\r\n\r\nfunction setup() {\r\n createCanvas(windowWidth, windowHeight);\r\n background(124);\r\n fill(255);\r\n}\r\n\r\nfunction touchStarted() {\r\n background(124);\r\n  xIni = mouseX;\r\n  yIni = mouseY;\r\n         print(xIni);\r\n}\r\n\r\nfunction touchMoved() {\r\n ellipse(mouseX, mouseY, 5, 5);\r\n    xFin = mouseX;\r\n    yFin = mouseY;\r\n return false;\r\n}\r\n\r\nfunction touchEnded() {\r\n  line (xIni, yIni, xFin, yFin);\r\n}\r\n<\/pre>\n
    Fijaos en que hemos usado mouseX <\/span>y\u00a0 mouseY<\/span> para conocer la posici\u00f3n del dedo en la pantalla en cada momento. Hay que decir que este c\u00f3digo funcionar\u00e1 tanto en un dispositivo m\u00f3vil como en un ordenador; en el dispositivo m\u00f3vil reaccionar\u00e1 a los toques de pantalla, y en el ordenador a los clics y movimientos del rat\u00f3n.<\/p>\n
    La funci\u00f3n map()<\/span><\/h3>\n
    La funci\u00f3n\u00a0map()<\/span>se usa para cambiar la escala de un valor. Para explicarlo, en el libro se pone un ejemplo (el 5-22) que no utiliza esta funci\u00f3n pero hace algo parecido.<\/p>\n
    Pero el ejemplo 5-23, que s\u00ed usa la funci\u00f3n\u00a0map()<\/span>es m\u00e1s claro. Tenemos dos rayas: una, la blanca, que hacemos que llegue desde la posici\u00f3n 0 hasta la posici\u00f3n m\u00e1xima del canvas<\/em>; y una segunda, negra, que solo queremos que se mueva entre el rango de 60 a 180. As\u00ed, lo que haremos ser\u00e1 pasar el valor de x<\/strong>, que puede estar entre 0 y 240 a un n\u00famero que ir\u00e1 entre 60 y 180.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Podemos usar nuestra aplicaci\u00f3n en dispositivos m\u00f3viles. p5.js se encarga de traducir los eventos de pantalla a eventos de teclado, con lo que un toque en la pantalla equivaldr\u00e1 a un clic del rat\u00f3n. Los ejemplos 5-20 y 5-21 est\u00e1n pensados para usarlos con dispositivos m\u00f3viles. Funciones espec\u00edficas para dispositivos m\u00f3viles Aunque podemos usar las […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1983"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=1983"}],"version-history":[{"count":18,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1983\/revisions"}],"predecessor-version":[{"id":3883,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1983\/revisions\/3883"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}