{"id":414,"date":"2022-10-06T10:11:46","date_gmt":"2022-10-06T08:11:46","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=414"},"modified":"2022-11-13T13:14:19","modified_gmt":"2022-11-13T11:14:19","slug":"6-3-interactuando-con-el-raton","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/6-3-interactuando-con-el-raton\/","title":{"rendered":"6.3. Interactuando con el rat\u00f3n"},"content":{"rendered":"

Para poder utilizar el rat\u00f3n de manera interactiva en nuestros programas, P5 nos ofrece algunas variables del sistema <\/strong>que almacenan par\u00e1metros relativos al movimiento y posici\u00f3n del rat\u00f3n y varias funciones <\/strong>que se ejecutan al detectar ciertos eventos relacionados con este.<\/p>\n

Posici\u00f3n del rat\u00f3n<\/h3>\n

Podemos obtener la posici\u00f3n del rat\u00f3n en nuestro canvas<\/em> por medio de las variables mouseX<\/span> y mouseY<\/span>:<\/p>\n

\"\"
Figura 66. mouseX<\/span> y mouseY<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En la figura 66 observamos c\u00f3mo el c\u00edrculo que dibujamos sigue la posici\u00f3n de nuestro rat\u00f3n sobre el canvas<\/em>, ya que como par\u00e1metros de sus coordenadas x<\/em> e y<\/em> estamos utilizando las variables mouseX<\/span> y mouseY<\/span>. Al haber dibujado el background()<\/span> en el setup()<\/span>, este se dibujar\u00e1 una \u00fanica vez y podemos ver c\u00f3mo en cada frame<\/em> se dibuja un c\u00edrculo fielmente en la posici\u00f3n del rat\u00f3n. Veamos qu\u00e9 ocurre si modificamos el frame rate<\/em> de nuestro sketch<\/em> utilizando el m\u00e9todo frameRate()<\/span> y d\u00e1ndole una velocidad de dos fotogramas por segundo:<\/p>\n

\"\"
Figura 67. mouseX<\/span> y mouseY<\/span> con un menor frame rate<\/em>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Ahora podemos observar que el seguimiento del rat\u00f3n es mucho menos fiel. Esto se debe a que, como hemos establecido una ejecuci\u00f3n a una velocidad de dos frames<\/em> por segundo, la posici\u00f3n del rat\u00f3n se registra \u00fanicamente una vez cada medio segundo (dos veces cada segundo).<\/p>\n

Podemos tambi\u00e9n mover el c\u00f3digo que dibuja el fondo desde el setup()<\/span> al draw()<\/span>:<\/p>\n

function draw() {\r\n  background(100);\r\n  ellipse(mouseX, mouseY, 50, 50);\r\n}<\/pre>\n
De esta manera, los c\u00edrculos dejar\u00e1n de acumularse en el canvas<\/em>, ya que en cada frame<\/em> estamos pintando de nuevo el fondo, que tapa el c\u00edrculo que se dibuj\u00f3 en el anterior frame<\/em>. Podemos hacer un uso creativo de esta circunstancia si al color de fondo le damos un poco de transparencia:<\/p>\n
function draw() {\r\n  background(100, 40); \/\/ Gris con transparencia\r\n  ellipse(mouseX, mouseY, 50, 50);\r\n}<\/pre>\n
\"\"
Figura 68. Dejando el rastro del rat\u00f3n
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En la figura se puede observar que el rastro de los c\u00edrculos se va desvaneciendo debido a que el background()<\/span>, que no es opaco al 100 %, se superpone en cada frame <\/em>y su opacidad se acumula hasta ocultar del todo los c\u00edrculos que se dibujaron en los frames<\/em> anteriores. Si cambiamos el valor de transparencia del fondo, podremos obtener rastros m\u00e1s o menos largos.<\/p>\n
P5 tambi\u00e9n nos ofrece otro par de variables pmouseX<\/span>, pmouseY<\/span> que almacenan la posici\u00f3n que ten\u00eda el rat\u00f3n en el frame<\/em> anterior, lo que nos puede resultar \u00fatil si queremos, por ejemplo, dibujar una l\u00ednea continua que siga el movimiento del rat\u00f3n:<\/p>\n
\"\"
Figura 69. L\u00edneas continuas con pmouseX<\/span> y pmouseY<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Adem\u00e1s de para crear \u00abpinceles\u00bb, podemos darle a estas variables el uso que necesitemos en nuestros sketches<\/em>. Veamos un ejemplo sencillo en el que cambiamos el color del fondo dependiendo de la posici\u00f3n del rat\u00f3n en el canvas<\/em>:<\/p>\n
function setup() {\r\n\tcreateCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n\tif(mouseX < width * 0.5){\r\n\t\tbackground(\"lightblue\");\r\n\t} else {\r\n\t\tbackground(\"lightpink\");\r\n\t}\r\n}<\/pre>\n
Si ejecutamos este c\u00f3digo y movemos el rat\u00f3n por el canvas<\/em>, observaremos que cuando el rat\u00f3n se encuentra en la mitad izquierda del canvas<\/em>, el color de fondo es azul, mientras que si lo movemos a la mitad derecha, el color de fondo cambia a rosa.<\/p>\n
Clics del rat\u00f3n<\/h3>\n
Adem\u00e1s de poder usar la posici\u00f3n, tambi\u00e9n podemos detectar cu\u00e1ndo hemos hecho clic con alguno de los botones del rat\u00f3n. Para ello, P5 nos ofrece la variable booleana mouseIsPressed<\/span>, que tendr\u00e1 un valor true<\/span> cuando pulsemos cualquiera de los botones del rat\u00f3n y false<\/span> en caso contrario. Podemos utilizar una estructura condicional para evaluar esta variable y cambiar alg\u00fan par\u00e1metro de nuestro dibujo en consecuencia. En el siguiente caso cambiamos el tama\u00f1o de un c\u00edrculo cuando alg\u00fan bot\u00f3n del rat\u00f3n sea pulsado:<\/p>\n
let size = 50;\r\nif (mouseIsPressed == true) {\r\n  size = 100;\r\n}\r\ncircle(width * 0.5, height * 0.5, size);<\/pre>\n
Cuando en una estructura condicional evaluamos una variable booleana, podemos prescindir del operador de comparaci\u00f3n:<\/p>\n
if (mouseIsPressed) {\r\n}\r\n\/\/ Equivale a:\r\nif (mouseIsPressed == true){\r\n}<\/pre>\n
Podemos combinar las variables de posici\u00f3n del rat\u00f3n con esta nueva variable booleana para detectar si hacemos clic en alguna zona de nuestro canvas<\/em>. Veamos un ejemplo en el que cambiamos el color de fondo solo si detectamos que se ha hecho clic con el rat\u00f3n dentro de un cuadrado:<\/p>\n
\"\"
Figura 70. Detectando el clic del rat\u00f3n dentro de una figura
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En este ejemplo, hemos encadenado varias condiciones con operadores l\u00f3gicos para \u00abdelimitar\u00bb el \u00e1rea donde queremos que se detecte el clic del rat\u00f3n. Para otros casos similares podemos utilizar tambi\u00e9n el m\u00e9todo dist()<\/span><\/a>, al que le pasamos como par\u00e1metros las coordenadas de dos puntos y nos retorna la distancia entre dichos puntos:<\/p>\n
\/\/ Punto (100, 200);\r\nlet x1 = 100;\r\nlet y1 = 200;\r\n\/\/ Punto (200, 200);\r\nlet x2 = 200;\r\nlet y2 = 200;\r\n\r\nlet distance = dist(x1, y1, x2, y2); \/\/ Devolver\u00e1 100<\/pre>\n
El m\u00e9todo dist()<\/span> puede resultar \u00fatil por ejemplo para detectar si el rat\u00f3n est\u00e1 dentro o no de un c\u00edrculo, algo que ser\u00eda m\u00e1s complejo de delimitar encadenando condiciones:<\/p>\n
\"\"
Figura 71. Detectando la posici\u00f3n del rat\u00f3n con dist()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Diferenciando entre botones<\/h3>\n
Tambi\u00e9n podemos detectar con qu\u00e9 bot\u00f3n del rat\u00f3n hemos hecho clic, para lo que podemos usar mouseButton<\/span>:<\/p>\n
if(mouseIsPressed) {\r\n  if(mouseButton == LEFT) {\r\n    \/\/ Bot\u00f3n izquierdo\r\n  }\r\n  if(mouseButton == RIGHT) {\r\n    \/\/ Bot\u00f3n derecho\r\n  }\r\n  if(mouseButton == CENTER) {\r\n    \/\/ Bot\u00f3n central\r\n  }\r\n}<\/pre>\n
Eventos de rat\u00f3n<\/h3>\n
Adem\u00e1s de las variables mouseX<\/span>, mouseY<\/span>, pmouseX<\/span>, pmouseY<\/span> y la variable booleana mouseIsPressed<\/span>, P5 tambi\u00e9n nos ofrece varias funciones que se ejecutan con distintos eventos del rat\u00f3n. Pod\u00e9is consultar todas estas funciones en la referencia de P5<\/a>, dentro del apartado \u00abEvents\u00bb. Veamos por ejemplo un posible uso de la funci\u00f3n mousePressed()<\/span>:<\/p>\n
\"\"
Figura 72. La funci\u00f3n mousePressed()<\/span>
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>El c\u00f3digo que escribamos dentro de la funci\u00f3n mousePressed()<\/span> se ejecutar\u00e1 \u00fanicamente cuando presionemos alguno de los botones del rat\u00f3n. En este caso, hemos creado al principio del sketch<\/em> una variable booleana showCircle<\/span> que hemos inicializado con el valor false<\/span>. Cuando hagamos clic con el rat\u00f3n se ejecutar\u00e1 la instrucci\u00f3n showCircle = !showCircle<\/span>, que asigna a la variable showCircle<\/span> el valor contrario al que actualmente tiene: si es false<\/span>, pasar\u00e1 a ser true<\/span> y viceversa. De esta manera, podemos alternar f\u00e1cilmente entre un estado y otro y mostrar o no el c\u00edrculo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Para poder utilizar el rat\u00f3n de manera interactiva en nuestros programas, P5 nos ofrece algunas variables del sistema que almacenan par\u00e1metros relativos al movimiento y posici\u00f3n del rat\u00f3n y varias funciones que se ejecutan al detectar ciertos eventos relacionados con este. Posici\u00f3n del rat\u00f3n Podemos obtener la posici\u00f3n del rat\u00f3n en nuestro canvas por medio […]<\/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\/414"}],"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=414"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/414\/revisions"}],"predecessor-version":[{"id":763,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/414\/revisions\/763"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}