{"id":1977,"date":"2019-07-10T14:24:09","date_gmt":"2019-07-10T12:24:09","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1977"},"modified":"2019-08-17T19:44:06","modified_gmt":"2019-08-17T17:44:06","slug":"3-4-localizacion-del-raton-en-la-pantalla","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/3-4-localizacion-del-raton-en-la-pantalla\/","title":{"rendered":"3.4. Localizaci\u00f3n del rat\u00f3n en la pantalla"},"content":{"rendered":"<p>Los siguientes ejemplos tratan de tener localizado el rat\u00f3n en la pantalla para poder interactuar con \u00e9l.<\/p>\n<p>A pesar de que es muy sencillo de entender, comentaremos un poco el ejemplo 5-13.<\/p>\n<pre>var x;\r\nvar offset = 10;   \/\/ Esta variable determina el tama\u00f1o de la \r\n                   \/\/ flecha.\r\nfunction setup() {\r\n      createCanvas(240, 120);\r\n      x = width\/2;\t\/\/ El tama\u00f1o del canvas dividido por dos. Esto\r\n\t\t\t\/\/ situar\u00e1 inicialmente la l\u00ednea en medio de la\r\n\t\t\t\/\/ pantalla.\r\n}\r\nfunction draw() {\r\n      background(204);\r\n      if (mouseX &gt; x) {\t        \/\/ Si el rat\u00f3n est\u00e1 a la derecha de la\r\n\t\t\t\t\/\/ l\u00ednea\r\n\t   x += 0.5;\r\n\t   offset = -10;\r\n      }\r\n      if (mouseX &lt; x) {\t        \/\/ Si el rat\u00f3n est\u00e1 a la izquierda de la\r\n\t\t\t\t\/\/ l\u00ednea\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\u00ednea vertical\r\n      \/\/ Las tres siguientes instrucciones sirven para dibujar la\r\n      \/\/ flecha.\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<p>C\u00f3mo hemos visto, detectamos si el rat\u00f3n est\u00e1 a la derecha o a la izquierda de una determinada posici\u00f3n, usando la variable <span style=\"font-family: Courier, Arial;\">mouseX<\/span> que ya hab\u00edamos usado.<\/p>\n<p>En el ejemplo 5-14 lo complica algo m\u00e1s; detecta si el rat\u00f3n est\u00e1 dentro de un c\u00edrculo que tenemos dibujado en la pantalla. La detecci\u00f3n la hace mediante la instrucci\u00f3n\u00a0<a href=\"https:\/\/p5js.org\/es\/reference\/#\/p5\/dist\" target=\"_blank\" rel=\"noopener\"><span style=\"font-family: Courier, Arial;\">dist()<\/span><\/a> que determina la distancia entre dos puntos (usa la posici\u00f3n del rat\u00f3n y el centro del c\u00edrculo).<\/p>\n<p>Finalmente, en el ejemplo 5-15, lo complica todav\u00eda m\u00e1s, detectando si el rat\u00f3n est\u00e1 dentro de un rect\u00e1ngulo. En este ejemplo introduce el operador <span style=\"font-family: Courier, Arial;\">&amp;&amp;<\/span> que nos servir\u00e1 para indicar que queremos que se tengan que cumplir todas las condiciones que hemos puesto (4 en el ejemplo).<\/p>\n<p>En realidad, si os fij\u00e1is, la complicaci\u00f3n radica en el hecho de tener que comprobar si el rat\u00f3n est\u00e1 o no dentro del rect\u00e1ngulo.<\/p>\n<h2>Ejercicios<\/h2>\n<p>Revisad el c\u00f3digo del ejemplo 5-13 y responded a estas preguntas:<\/p>\n<ol>\n<li>\u00bfQu\u00e9 significa que <span style=\"font-family: Courier, Arial;\">mouseX<\/span> sea m\u00e1s grande que <strong>x<\/strong>? \u00bfPor qu\u00e9? Quiz\u00e1s os va bien dibujar unas coordenadas para responder.<\/li>\n<li>\u00bfPor qu\u00e9 tenemos dos instrucciones <strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong>? \u00bfQu\u00e9 posibilidad no est\u00e1 directamente contemplada?<\/li>\n<li>En el ejemplo 5-14 la circunferencia crece si el rat\u00f3n est\u00e1 dentro del c\u00edrculo. \u00bfQu\u00e9 cambio har\u00edais para hacer que, cuando el rat\u00f3n est\u00e9 fuera del c\u00edrculo, este se haga m\u00e1s peque\u00f1o? Probadlo antes de mirar el c\u00f3digo que encontrar\u00e9is al final de este reto (antes del anexo). Pero no os asust\u00e9is si el resultado no es lo que esper\u00e1is.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Los siguientes ejemplos tratan de tener localizado el rat\u00f3n en la pantalla para poder interactuar con \u00e9l. A pesar de que es muy sencillo de entender, comentaremos un poco el ejemplo 5-13. var x; var offset = 10; \/\/ Esta variable determina el tama\u00f1o de la \/\/ flecha. function setup() { createCanvas(240, 120); x = [&hellip;]<\/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\/1977"}],"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=1977"}],"version-history":[{"count":10,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1977\/revisions"}],"predecessor-version":[{"id":3881,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1977\/revisions\/3881"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}