{"id":684,"date":"2019-07-07T16:37:39","date_gmt":"2019-07-07T14:37:39","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=684"},"modified":"2019-08-17T19:55:59","modified_gmt":"2019-08-17T17:55:59","slug":"3-6-p5-js-als-dispositius-mobils","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/3-6-p5-js-als-dispositius-mobils\/","title":{"rendered":"3.6. p5.js als dispositius m\u00f2bils"},"content":{"rendered":"

Podem fer servir la nostra aplicaci\u00f3 als dispositius m\u00f2bils. p5.js s\u2019encarrega de traduir els events<\/em> de pantalla a events<\/em> de teclat, de manera que un toc a la pantalla equivaldr\u00e0 a un clic del ratol\u00ed.<\/p>\n

<\/p>\n

Fe d\u2019errates<\/strong><\/p>\n

Al llibre es fan servir variables espec\u00edfiques de toc a la pantalla (touchIsDown<\/span>, touchX<\/span> i touchY<\/span>) que ja no funcionen. En canvi, les mateixes variables que fem servir pel ratol\u00ed, serveixen pels tocs a la pantalla. D\u2019aquesta manera la mateixa aplicaci\u00f3 serveix pel ratol\u00ed de l\u2019ordinador i pels tocs a la pantalla.<\/p>\n

Per a aconseguir que els exemples del llibre funcionin nom\u00e9s cal canviar la variable touchIsDown<\/span><\/span><\/strong> per mouseIsPressed<\/span><\/strong> i touchX<\/span><\/span><\/strong> i touchY<\/span><\/span><\/strong> per mouseX<\/span><\/strong> i mouseY<\/span><\/strong> respectivament.<\/p>\n

\n<\/div>\n

Els exemples 5-20 i 5-21 estan pensats per a fer-los servir amb dispositius m\u00f2bils.<\/p>\n

Funcions espec\u00edfiques per a dispositius m\u00f2bils<\/h2>\n

Malgrat podem fer servir les funcions i variables del ratol\u00ed per a interaccionar amb la pantalla d\u2019un dispositiu m\u00f2bil, p5.js ens proporciona algunes opcions interessants per a fer-ho.<\/p>\n

Nota<\/strong>: Alguns dels exemples que veurem dins d\u2019aquest apartat no es poden provar en un ordinador, cal fer-ho directament al m\u00f2bil, per la qual cosa ens caldr\u00e0 pujar tot el codi a un servidor. Al final d\u2019aquest repte teniu dos annexos. L\u2019un us explica com crear un entorn de desenvolupament local (al vostre ordinador) i en el segon hi teniu informaci\u00f3 de com fer servir el servidor que la UOC posa a la nostra disposici\u00f3.<\/p>\n<\/div>\n

Per tal que els programes que fem funcionin b\u00e9 als dispositius m\u00f2bils, tamb\u00e9 caldr\u00e0 una petita modificaci\u00f3 de l\u2019arxiu HTML que fem servir com a base i que \u00e9s el que sempre haureu de fer servir.<\/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> \u00e9s una variable del sistema que ens guarda informaci\u00f3 de les posicions on s\u2019ha tocat la pantalla. Les pantalles dels nostres dispositius m\u00f2bils s\u00f3n multit\u00e0ctils, la qual cosa vol dir que poden detectar m\u00e9s d\u2019un toc alhora. La variable touches<\/span> emmagatzema totes les posicions de la pantalla que s\u2019estan tocant. \u00c9s el que denominem array <\/em>i, tot i que ho veurem explicat amb m\u00e9s detall en el repte seg\u00fcent, vegem ara com funciona.<\/p>\n
Els arrays<\/em> s\u00f3n una estructura de dades que ens permet guardar m\u00e9s d\u2019una dada alhora. A la variable touches <\/span>hi podem guardar tots els tocs simultanis a la pantalla. Per a poder consultar els diferents valors que pot guardar una variable de tipus array<\/em> fem servir aquesta notaci\u00f3:<\/p>\n
touches[n];<\/pre>\n
On n<\/em> \u00e9s la posici\u00f3 que volem consultar. En el cas de touches<\/span>, a m\u00e9s a m\u00e9s tindrem un valor per a la posici\u00f3 x<\/strong> i un altre per a la posici\u00f3 y<\/strong>, aix\u00ed que per a consultar la posici\u00f3 x<\/strong> i y<\/strong> del primer toc que es faci a la pantalla, farem aquesta consulta:<\/p>\n
var posX = touches[0].x\r\nvar posY = touches[0].y<\/pre>\n
Si hi ha dos dits tocant la pantalla, com accedirem a la posici\u00f3 del segon dit? F\u00e0cil, si la primera posici\u00f3 era 0, la segona \u00e9s 1:<\/p>\n
var posX = touches[1].x\r\nvar posY = touches[1].y<\/pre>\n
Vegem un primer exemple amb la variable touches<\/span>. Volem que quan fem un toc a la pantalla es dibuixi un cercle a la posici\u00f3 on s\u2019ha fet el toc.<\/p>\n
\/\/ En el setup creem el canvas. El farem de l\u2019amplada i l\u2019al\u00e7ada\r\n\/\/ m\u00e0xima 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
Compte!<\/strong> L\u2019if<\/span><\/strong> \u00e9s molt important. Si l\u2019usuari no est\u00e0 tocant la pantalla a touches[0]<\/span> no hi ha res i el programa dona un error i s\u2019atura. Per tant, hem de comprovar que s\u2019estigui tocant la pantalla. Si \u00e9s aix\u00ed, pintem.<\/p>\n<\/div>\n
Si proveu aquest exemple us adonareu que la pantalla del m\u00f2bil es mou al moure el dit. \u00c9s un efecte estrany i lleig per a l\u2019usuari, per\u00f2 arreglar-ho \u00e9s molt f\u00e0cil. Hem d\u2019afegir aquesta funci\u00f3 al final (l\u2019explicarem millor m\u00e9s endavant):<\/p>\n
function touchMoved() {\r\nreturn false;\r\n}<\/pre>\n
Ara, amb tot el codi, si provem l\u2019exemple funcionar\u00e0 millor.<\/p>\n
Exercicis<\/h4>\n
    \n
  1. Modificar el codi per tal que, en comptes de pintar un cercle, pinti un punt negre.<\/li>\n
  2. Modificar el codi perqu\u00e8 dibuixi dos cercles si s\u2019est\u00e0 tocant la pantalla amb dos dits.<\/li>\n
  3. Modificar el codi perqu\u00e8 el primer dit faci dibuixar un cercle i el segon dit faci que canvi\u00ef el color (negre si no hi ha un segon dit, vermell en cas contrari).<\/li>\n
  4. Modificar el codi per tal que el color de fons canvi\u00ef segons el nombre de dits (fins a 4) que toquen la pantalla.<\/li>\n<\/ol>\n
    touchStarted()<\/span><\/h3>\n
    La funci\u00f3 touchStarted()<\/span><\/a>, per defecte, no t\u00e9 cap codi associat a p5.js, aix\u00ed que haurem d\u2019escriure nosaltres el codi si la volem fer servir. Aquesta funci\u00f3 \u00e9s cridada en el moment que es detecta un toc a la pantalla o un clic amb el ratol\u00ed<\/em>. Si aquesta funci\u00f3 no existeix, \u00e9s a dir, si no l\u2019hem escrit nosaltres, aleshores es busca la variable mouseIsPressed<\/span><\/a>. El funcionament per\u00f2 \u00e9s diferent i, per tant, la programaci\u00f3 tamb\u00e9 ser\u00e0 diferent si es fa servir la funci\u00f3 o la variable.<\/p>\n
    Vegem ara un parell d\u2019exemples extrets del manual de refer\u00e8ncia de p5.js:<\/p>\n
    Exemple 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
    Com podem veure, quan es fa un toc a la pantalla es canvia el color del quadre. Veureu que amb el ratol\u00ed funciona molt b\u00e9, per\u00f2 al m\u00f2bil nom\u00e9s funciona b\u00e9 si mantenim tocant amb el dit la pantalla almenys un segon.<\/p>\n
    El segon codi \u00e9s aquest:<\/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 aquest cas, cada cop que fem un clic amb el ratol\u00ed o toquem la pantalla es dibuixar\u00e0 un cercle. Prova l\u2019exemple i comprova qu\u00e8 passa quan, mantenint un dit tocant la pantalla, fas un toc amb un altre dit.<\/p>\n
    touchMoved()<\/span><\/h3>\n
    La funci\u00f3 definible touchMoved()<\/span><\/a>, es crida quan movem el dit per sobre de la pantalla. Si no est\u00e0 definida es crida a la funci\u00f3 mouseDragged()<\/span><\/a>. Sens dubte, la millor manera d\u2019entendre el funcionament d\u2019aquesta funci\u00f3 \u00e9s amb un exemple, que ser\u00e0 el segon que hem fet servir per la funci\u00f3 touchStarted()<\/span>, per\u00f2 canviant la funci\u00f3 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
    Afegim una funci\u00f3 touchStarted()<\/span> per a esborrar el contingut:<\/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\u00f3 touchEnded()<\/span><\/a> es crida quan el toc finalitza. De nou, farem servir un exemple per a veure millor el seu funcionament:<\/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\t\tprint(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
    Fixeu-vos que hem fet servir mouseX <\/span>i mouseY<\/span> per a con\u00e8ixer la posici\u00f3 del dit a la pantalla en cada moment. Cal dir que aquest codi funcionar\u00e0 tant en un dispositiu m\u00f2bil com en un ordinador, en el dispositiu m\u00f2bil reaccionar\u00e0 als tocs de pantalla i a l\u2019ordinador als clics i moviments del ratol\u00ed.<\/p>\n
    La funci\u00f3 map()<\/span><\/h3>\n
    La funci\u00f3 map()<\/span> es fa servir per a canviar l\u2019escala d\u2019un valor. A fi d\u2019explicar-ho, al llibre hi ha un exemple (el 5-22) que no fa servir aquesta funci\u00f3 per\u00f2 fa una cosa semblant.<\/p>\n
    Per\u00f2 l\u2019exemple 5-23, que s\u00ed que fa servir la funci\u00f3 map()<\/span> \u00e9s m\u00e9s clar. Tenim dues ratlles, una, la blanca que fem que arribi des de la posici\u00f3 0 fins a la posici\u00f3 m\u00e0xima del canvas<\/em>. I una segona, negra, que nom\u00e9s volem que es mogui entre el rang de 60 a 180. Aix\u00ed, el que farem ser\u00e0 indicar el valor d\u2019x<\/strong> que, pot estar entre 0 i 240, a un nombre que anir\u00e0 entre el 60 i el 180.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Podem fer servir la nostra aplicaci\u00f3 als dispositius m\u00f2bils. p5.js s\u2019encarrega de traduir els events de pantalla a events de teclat, de manera que un toc a la pantalla equivaldr\u00e0 a un clic del ratol\u00ed. Els exemples 5-20 i 5-21 estan pensats per a fer-los servir amb dispositius m\u00f2bils. Funcions espec\u00edfiques per a dispositius m\u00f2bils […]<\/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\/wp-json\/wp\/v2\/pages\/684"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/comments?post=684"}],"version-history":[{"count":25,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/684\/revisions"}],"predecessor-version":[{"id":3885,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/684\/revisions\/3885"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}