{"id":647,"date":"2019-07-07T15:34:02","date_gmt":"2019-07-07T13:34:02","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=647"},"modified":"2019-08-17T19:36:46","modified_gmt":"2019-08-17T17:36:46","slug":"3-3-clic","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/3-3-clic\/","title":{"rendered":"3.3. Clic"},"content":{"rendered":"

Comen\u00e7ant<\/h2>\n

Hem vist que per a interactuar amb el moviment del ratol\u00ed fem servir les variables mouseX <\/span>i mouseY<\/span>. Per a detectar el clic del ratol\u00ed tamb\u00e9 tenim una variable, es diu mouseIsPressed <\/span>i, tot i que ja l\u2019hem fet servir en el repte 1, no hem explicat com funcionava. \u00c9s f\u00e0cil, com a tota variable, emmagatzema un valor que ser\u00e0 cert si algun bot\u00f3 del ratol\u00ed est\u00e0 premut i fals en cas contrari.<\/p>\n

L\u2019exemple 5-10 ens serveix per a veure de manera molt senzilla com fer servir aquesta instrucci\u00f3. Qu\u00e8 passa en aquest exemple quan premem el bot\u00f3 del ratol\u00ed?<\/p>\n

    \n
  1. La variable mouseIsPressed <\/span>agafa el valor de True <\/span>(cert).<\/li>\n
  2. Es determina que el color de pintura \u00e9s el negre.<\/li>\n<\/ol>\n

    Per qu\u00e8 la segona l\u00ednia canvia de color quan premem el bot\u00f3 esquerre del ratol\u00ed? Perqu\u00e8 es pinta despr\u00e9s de l\u2019if<\/span><\/strong> i si hem entrat dins de l\u2019if<\/span><\/strong> (perqu\u00e8 el bot\u00f3 estava premut) haurem seleccionat el color negre.<\/p>\n

    function setup() {\r\n  createCanvas(240, 120);\r\n  strokeWeight(30);\r\n}\r\nfunction draw() {\r\n  background(204);\r\n  stroke(102);               \/\/ Seleccionem el color gris\r\n  line(40, 0, 70, height);   \/\/ Dibuixem una l\u00ednia\r\n  if (mouseIsPressed == true) {\r\n   stroke(0);                \/\/ Seleccionem el color negre\r\n }\r\n  line(0, 70, width, 50);    \/\/ Dibuixem una segona l\u00ednia \r\n}<\/pre>\n
    L\u2019exercici 5-11 afegeix un else<\/span>. Per tant, quan el ratol\u00ed no estigui premut, el color seleccionat ser\u00e0 el blanc.<\/p>\n
    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
    A cada iteraci\u00f3 \u2013cada cop que la funci\u00f3 draw()<\/span> s\u2019executa (50 cops per segon)\u2013 es fa el proc\u00e9s seg\u00fcent:<\/p>\n
      \n
    1. Es pinta el fons (esborrant tot el que hi hagi a sobre)<\/li>\n
    2. Es selecciona el color gris<\/li>\n
    3. Es pinta la l\u00ednia vertical<\/li>\n
    4. Es comprova si el ratol\u00ed est\u00e0 premut<\/li>\n
    5. Si \u00e9s aix\u00ed, se selecciona el color negre<\/li>\n
    6. En cas contrari, se selecciona el color blanc<\/li>\n
    7. Es pinta la l\u00ednia horitzontal<\/li>\n<\/ol>\n
      Prova aquest exercici clicant qualsevol dels tres botons del ratol\u00ed.<\/p>\n
      L\u2019exemple 5-12, a m\u00e9s de comprovar si s\u2019ha clicat un bot\u00f3, es comprova espec\u00edficament si \u00e9s el bot\u00f3 esquerre. No cal dir que podem canviar LEFT<\/span> per RIGHT<\/span> o per CENTER<\/span> per a seleccionar un altre dels botons del ratol\u00ed. Prova-ho.<\/p>\n
      En la p\u00e0gina 72 ens mostren, amb diagrames diferents, casos que ens podem trobar quan fem servir la instrucci\u00f3 if<\/span><\/strong>. Podem niar els if<\/span><\/strong>, la qual cosa \u00e9s molt \u00fatil i alhora una complicaci\u00f3. Cal que tinguem molt clar com funciona aquesta instrucci\u00f3 per a entendre-la b\u00e9 quan estigui niada.<\/p>\n
      Exercicis<\/h2>\n
        \n
      1. Veient el que fa aquest programa, explica qu\u00e8 s\u00f3n les variables height<\/span> i width<\/span>.<\/li>\n
      2. Fes que en comptes de pintar-se de color blanc, la l\u00ednia es pinti de color groc. Pots consultar com pintar diferents colors en aquesta p\u00e0gina del manual de refer\u00e8ncia de p5.js: https:\/\/p5js.org\/reference\/#\/p5\/stroke<\/a>.<\/li>\n
      3. Modifica el codi perqu\u00e8 siguin les dues l\u00ednies les que canvi\u00efn de color quan cliquem el bot\u00f3 esquerre del ratol\u00ed.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
        Comen\u00e7ant Hem vist que per a interactuar amb el moviment del ratol\u00ed fem servir les variables mouseX i mouseY. Per a detectar el clic del ratol\u00ed tamb\u00e9 tenim una variable, es diu mouseIsPressed i, tot i que ja l\u2019hem fet servir en el repte 1, no hem explicat com funcionava. \u00c9s f\u00e0cil, com a tota […]<\/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\/647"}],"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=647"}],"version-history":[{"count":12,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/647\/revisions"}],"predecessor-version":[{"id":3878,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/647\/revisions\/3878"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}