{"id":911,"date":"2014-08-18T01:15:04","date_gmt":"2014-08-18T01:15:04","guid":{"rendered":"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/?page_id=911"},"modified":"2014-10-05T00:24:39","modified_gmt":"2014-10-05T00:24:39","slug":"c3","status":"publish","type":"page","link":"https:\/\/clases.etab.cl\/?page_id=911","title":{"rendered":"C3 &#8211; OT 2014"},"content":{"rendered":"<p>En esta sesi\u00f3n veremos:<br \/>\n&#8211; Respuesta a dispositivos como el mouse y el teclado<br \/>\n&#8211; Funciones y eventos: void setup(), void draw(), mousePressed(), mouseReleased(), keyPressed(), keyReleased()<\/p>\n<p>El c\u00f3digo que responde a un imput del mouse, el teclado o cualquier otro dispositivo, debe estar constantemente corriendo. Para hacer que esto suceda, habr\u00e1 que poner las l\u00edneas de c\u00f3digo dentro de una funci\u00f3n (evento) de Processing llamada draw().<\/p>\n<p>La funci\u00f3n setup() corre s\u00f3lo una vez, por lo que ac\u00e1 se escriben las l\u00edneas de c\u00f3digo que definen lo que pasa desde el comienzo del c\u00f3digo y permanece igual durante todo el programa (como por ejemplo el tama\u00f1o de la ventana). En la funci\u00f3n draw(), en cambio, estar\u00e1 iterando durante todo el tiempo que el programa est\u00e9 corriendo, por lo que ser\u00e1 necesaria cada vez que necesitemos comprobar o comparar estados o simplemente repetir cosas.<\/p>\n<p>Para ejemplificar nos basaremos en los ejemplos que aparecen en el libro Getting started with Processing de Reas y Fry.<\/p>\n<p><strong>Descripci\u00f3n del comportamiento Sketch 1:<\/strong> al mover el mouse se van dibujando l\u00edneas que cambian su grosor y color seg\u00fan la velocidad del movimiento. Usamos: void draw();  void setup();  colorMode(HSB);  mouseX  mouseY  pmouseX  pmouseY.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/anonymous\/836e23d2e497f99b4850.js\"><\/script><\/p>\n<p>&#8212;&#8212;-<\/p>\n<p><strong>Descripci\u00f3n del comportamiento Sketch 2:<\/strong> una ellipse sigue la posici\u00f3n del mouse de manera org\u00e1nica por medio del uso de la variable &#8216;easing&#8217;. \u00c9sta puede ir de 0 a 1, en donde 0 es la aceleraci\u00f3n m\u00e1xima y 1 es cero aceleraci\u00f3n. El nombre de la variable &#8216;easing&#8217; es un nombre descriptivo, por lo que podr\u00eda llamarse de cualquier manera.<br \/>\nUsamos: mouseX, mouseY, easing con valor 0.1, void setup(); void draw();<\/p>\n<p><script src=\"https:\/\/gist.github.com\/anonymous\/312e8464a8ccf71dc1ed.js\"><\/script><\/p>\n<p>&#8212;&#8212;-<\/p>\n<p><strong>Descripci\u00f3n del comportamiento Sketch 3:<\/strong> Un segundo ejemplo en donde a partir del seguimiento del mouse, se dibuja una l\u00ednea. Se calcula la distancia de entre la posici\u00f3n presente y la reci\u00e9n pasada y controlamos la cantidad de cuadros por segundo.<br \/>\nUsamos: mouseX, mouseY, easing con valor 0.05, void setup(); void draw(); dist(); frameRate();<\/p>\n<p><script src=\"https:\/\/gist.github.com\/anonymous\/f0b8af8f50f155018f5a.js\"><\/script><\/p>\n<p>&#8212;&#8212;-<\/p>\n<p><strong>Descripci\u00f3n del comportamiento Sketch 4:<\/strong>  Se ejemplifica el uso del condicional &#8216;if&#8217;, en donde se pregunta si el click izquierdo del bot\u00f3n est\u00e1 presionado a trav\u00e9s de  == true; una condici\u00f3n booleana (puede tambi\u00e9n ser &#8216;false&#8217;).<br \/>\nUsamos: void setup(); void draw(); if (mousePressed == true) { } else { }<\/p>\n<p><script src=\"https:\/\/gist.github.com\/anonymous\/1f29618caf32c019b443.js\"><\/script><\/p>\n<p>&#8212;&#8212;-<\/p>\n<p><strong>Descripci\u00f3n del comportamiento Sketch 5:<\/strong>  Se cambia el comportamiento de los elementos en la ventana a partir de la ubicaci\u00f3n del mouse. Definimos una variable llamada offset que se utiliza para &#8216;cambiar la direcci\u00f3n de la flecha&#8217;.<br \/>\nUsamos: void setup(); void draw(); if (mousePressed == true) { } else { }<\/p>\n<p><script src=\"https:\/\/gist.github.com\/anonymous\/c14865f1189a42bd8dca.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta sesi\u00f3n veremos: &#8211; Respuesta a dispositivos como el mouse y el teclado &#8211; Funciones y eventos: void setup(), void draw(), mousePressed(), mouseReleased(), keyPressed(), keyReleased() El c\u00f3digo que responde a un imput del mouse, el teclado o cualquier otro dispositivo, debe estar constantemente corriendo. Para hacer que esto suceda, habr\u00e1 que poner las l\u00edneas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":792,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-911","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=911"}],"version-history":[{"count":11,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/911\/revisions"}],"predecessor-version":[{"id":995,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/911\/revisions\/995"}],"up":[{"embeddable":true,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/792"}],"wp:attachment":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}