{"id":1974,"date":"2019-07-10T14:07:21","date_gmt":"2019-07-10T12:07:21","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1974"},"modified":"2019-08-17T19:34:25","modified_gmt":"2019-08-17T17:34:25","slug":"3-3-clic","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/3-3-clic\/","title":{"rendered":"3.3. Clic"},"content":{"rendered":"<h2>Empezando<\/h2>\n<p>Hemos visto que para interactuar con el movimiento del rat\u00f3n usamos las variables <span style=\"font-family: Courier, Arial;\">mouseX <\/span>y <span style=\"font-family: Courier, Arial;\">mouseY<\/span>. Para detectar el clic del rat\u00f3n tambi\u00e9n tenemos una variable; se llama <span style=\"font-family: Courier, Arial;\">mouseIsPressed <\/span>y, a pesar de que ya se hab\u00eda usado en el reto 1, no hab\u00edamos explicado c\u00f3mo funcionaba. Es f\u00e1cil; como toda variable, almacena un valor que ser\u00e1 cierto si alg\u00fan bot\u00f3n del rat\u00f3n est\u00e1 pulsado y falso en caso contrario.<\/p>\n<p>El ejemplo 5-10 nos sirve para ver de manera muy sencilla una manera de usar esta instrucci\u00f3n. \u00bfQu\u00e9 pasa en este ejemplo cuando pulsamos el bot\u00f3n del rat\u00f3n?<\/p>\n<ol>\n<li>La variable <span style=\"font-family: Courier, Arial;\">mouseIsPressed <\/span>coge el valor de <span style=\"font-family: Courier, Arial;\">True<\/span> (cierto).<\/li>\n<li>Se determina que el color de pintura sea el negro.<\/li>\n<\/ol>\n<p>\u00bfPor qu\u00e9 la segunda l\u00ednea cambia de color cuando pulsamos el bot\u00f3n izquierdo del rat\u00f3n? Porque se pinta despu\u00e9s del\u00a0<strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong> y si hemos entrado dentro del\u00a0<strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong> (porque el bot\u00f3n estaba apretado), habremos seleccionado el color negro.<\/p>\n<pre>function setup() {\r\n  createCanvas(240, 120);\r\n  strokeWeight(30);\r\n}\r\nfunction draw() {\r\n  background(204);\r\n  stroke(102);               \/\/ Seleccionamos el color gris\r\n  line(40, 0, 70, height);   \/\/ Dibujamos una l\u00ednea\r\n  if (mouseIsPressed == true) {\r\n   stroke(0);               \/\/ Seleccionamos el color negro\r\n }\r\n  line(0, 70, width, 50);   \/\/ Dibujamos una segunda l\u00ednea  \r\n}<\/pre>\n<p>El ejercicio 5-11 a\u00f1ade un <span style=\"font-family: Courier, Arial;\">else<\/span>\u00a0para que, cuando el rat\u00f3n no est\u00e9 apretado, el color seleccionado sea blanco.<\/p>\n<pre>function setup() {\r\n createCanvas(240, 120);\r\n strokeWeight(30);\r\n}\r\nfunction draw() {\r\n background(204);     \/\/ 1\r\n stroke(102);       \/\/ 2\r\n line(40, 0, 70, height); \/\/ 3\r\n if (mouseIsPressed) {  \/\/ 4\r\n  stroke(0);       \/\/ 5 \r\n } else {\r\n  stroke(255);      \/\/ 6\r\n }\r\nline(0, 70, width, 50);  \/\/ 7\r\n}<\/pre>\n<p>En cada iteraci\u00f3n \u2013cada vez que la funci\u00f3n\u00a0<span style=\"font-family: Courier, Arial;\">draw()<\/span> se ejecuta (50 veces por segundo)\u2013 se hace el siguiente proceso:<\/p>\n<ol>\n<li>Se pinta el fondo (borrando todo lo que haya encima)<\/li>\n<li>Se selecciona el color gris<\/li>\n<li>Se pinta la l\u00ednea vertical<\/li>\n<li>Se comprueba si el rat\u00f3n est\u00e1 pulsado<\/li>\n<li>Si es as\u00ed se selecciona el color negro<\/li>\n<li>En caso contrario, se selecciona el color blanco<\/li>\n<li>Se pinta la l\u00ednea horizontal<\/li>\n<\/ol>\n<p>Probad este ejercicio apretando cualquiera de los tres botones del rat\u00f3n.<\/p>\n<p>El ejemplo 5-12, adem\u00e1s de comprobar si se ha pulsado un bot\u00f3n, se comprueba espec\u00edficamente si es el bot\u00f3n izquierdo. Huelga decir que podemos cambiar <span style=\"font-family: Courier, Arial;\">LEFT<\/span> por\u00a0<span style=\"font-family: Courier, Arial;\">RIGHT<\/span> o por\u00a0<span style=\"font-family: Courier, Arial;\">CENTER<\/span> para seleccionar otro de los botones del rat\u00f3n. Probadlo.<\/p>\n<p>En la p\u00e1gina 72 nos muestran con diagramas diferentes casos que nos podemos encontrar cuando usemos la instrucci\u00f3n\u00a0<strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong>. Podemos anidar los\u00a0<strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong>, lo cual es muy \u00fatil y a la vez una complicaci\u00f3n. Hace falta que tengamos muy claro c\u00f3mo funciona esta instrucci\u00f3n para entenderla bien cuando est\u00e9 anidada.<\/p>\n<h2>Ejercicios<\/h2>\n<ol>\n<li>Viendo lo que hace este programa, explicad qu\u00e9 son las variables <span style=\"font-family: Courier, Arial;\">height<\/span>\u00a0y \u00a0<span style=\"font-family: Courier, Arial;\">width<\/span>.<\/li>\n<li>Haced que, en vez de pintarse de color blanco, la l\u00ednea se pinte de color amarillo. Pod\u00e9is consultar c\u00f3mo pintar diferentes colores en esta p\u00e1gina del manual de referencia de p5.js: <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/stroke\" target=\"_blank\" rel=\"noopener\">https:\/\/p5js.org\/reference\/#\/p5\/stroke<\/a>.<\/li>\n<li>Modificad el c\u00f3digo para que sean las dos l\u00edneas las que cambien de color cuando pulsemos el bot\u00f3n izquierdo del rat\u00f3n.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Empezando Hemos visto que para interactuar con el movimiento del rat\u00f3n usamos las variables mouseX y mouseY. Para detectar el clic del rat\u00f3n tambi\u00e9n tenemos una variable; se llama mouseIsPressed y, a pesar de que ya se hab\u00eda usado en el reto 1, no hab\u00edamos explicado c\u00f3mo funcionaba. Es f\u00e1cil; como toda variable, almacena un [&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\/1974"}],"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=1974"}],"version-history":[{"count":8,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1974\/revisions"}],"predecessor-version":[{"id":3877,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1974\/revisions\/3877"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}