{"id":653,"date":"2019-07-07T15:41:28","date_gmt":"2019-07-07T13:41:28","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=653"},"modified":"2019-08-17T19:43:55","modified_gmt":"2019-08-17T17:43:55","slug":"3-4-localitzacio-del-ratoli-a-la-pantalla","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/3-4-localitzacio-del-ratoli-a-la-pantalla\/","title":{"rendered":"3.4. Localitzaci\u00f3 del ratol\u00ed a la pantalla"},"content":{"rendered":"

Els exemples seg\u00fcents tracten de tenir localitzat el ratol\u00ed a la pantalla per a poder interactuar amb aquest.<\/p>\n

Tot i que \u00e9s molt senzill d\u2019entendre, comentarem una mica l\u2019exemple 5-13.<\/p>\n

var x;\r\nvar offset = 10;   \/\/ Aquesta variable determina la mida de la \r\n                   \/\/ fletxa.\r\nfunction setup() {\r\n      createCanvas(240, 120);\r\n      x = width\/2;\t\/\/ La mida del canvas dividida per dos. Aix\u00f2\r\n\t\t\t\/\/ situar\u00e0 inicialment la l\u00ednia al mig de la\r\n\t\t\t\/\/ pantalla.\r\n}\r\nfunction draw() {\r\n      background(204);\r\n      if (mouseX > x) {\t        \/\/ Si el ratol\u00ed est\u00e0 a la dreta de la\r\n\t\t\t\t\/\/ l\u00ednia\r\n\t   x += 0.5;\r\n\t   offset = -10;\r\n      }\r\n      if (mouseX < x) {\t        \/\/ Si el ratol\u00ed est\u00e0 a l\u2019esquerra de la\r\n\t\t\t\t\/\/ l\u00ednia\r\n\t   x -= 0.5;\r\n\t   offset = 10;\r\n      }\r\n      \/\/ Draw arrow left or right depending on \"offset\" value\r\n      line(x, 0, x, height); \/\/ L\u00ednia vertical\r\n      \/\/ Les tres instruccions seg\u00fcents serveixen per a dibuixar la\r\n      \/\/ fletxa.\r\n      line(mouseX, mouseY, mouseX + offset, mouseY - 10);\r\n      line(mouseX, mouseY, mouseX + offset, mouseY + 10);\r\n      line(mouseX, mouseY, mouseX + offset*3, mouseY);\r\n}<\/pre>\n
Com hem vist, detectem si el ratol\u00ed est\u00e0 a la dreta o a l\u2019esquerra d\u2019una determinada posici\u00f3, fent servir la variable mouseX<\/span> que ja hem fet servir.<\/p>\n
L\u2019exemple 5-14 ho complica una mica m\u00e9s, detecta si el ratol\u00ed est\u00e0 dins d\u2019un cercle que tenim dibuixat a la pantalla. La detecci\u00f3 la fa mitjan\u00e7ant la instrucci\u00f3 dist()<\/a> que determina la dist\u00e0ncia entre dos punts (fa servir la posici\u00f3 del ratol\u00ed i el centre del cercle).<\/p>\n
Finalment, l\u2019exemple 5-15, encara ho complica m\u00e9s, detectant si el ratol\u00ed est\u00e0 dins d\u2019un rectangle. Aquest exemple introdueix l\u2019operador &&<\/span> que ens servir\u00e0 per a indicar que volem que s\u2019hagin de complir totes les condicions que hem posat (4 en l\u2019exemple).<\/p>\n
En realitat, si us fixeu, la complicaci\u00f3 rau en el fet d\u2019haver de comprovar si el ratol\u00ed est\u00e0 o no dins el rectangle.<\/p>\n
Exercicis<\/h2>\n
Revisa el codi de l\u2019exemple 5-13 i respon aquestes preguntes:<\/p>\n
    \n
  1. Qu\u00e8 significa que mouseX<\/span> sigui m\u00e9s gran que x<\/span><\/strong>? Per qu\u00e8? Potser et va b\u00e9 dibuixar unes coordenades per a poder-ho respondre.<\/li>\n
  2. Per qu\u00e8 tenim dues instruccions if<\/span><\/strong>? Quina possibilitat no est\u00e0 directament prevista?<\/li>\n
  3. En l\u2019exemple 5-14, la circumfer\u00e8ncia creix si el ratol\u00ed est\u00e0 dins el cercle. Quin canvi faries perqu\u00e8 quan el ratol\u00ed estigui fora del cercle aquest es faci m\u00e9s petit? Prova-ho abans de mirar el codi que trobar\u00e0s al final d\u2019aquest repte (abans de l\u2019annex). Per\u00f2 no t\u2019espantis si el resultat no \u00e9s el que esperes.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Els exemples seg\u00fcents tracten de tenir localitzat el ratol\u00ed a la pantalla per a poder interactuar amb aquest. Tot i que \u00e9s molt senzill d\u2019entendre, comentarem una mica l\u2019exemple 5-13. var x; var offset = 10; \/\/ Aquesta variable determina la mida de la \/\/ fletxa. function setup() { createCanvas(240, 120); x = width\/2; \/\/ […]<\/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\/653"}],"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=653"}],"version-history":[{"count":15,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/653\/revisions"}],"predecessor-version":[{"id":3880,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/653\/revisions\/3880"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}