{"id":257,"date":"2013-09-16T19:04:26","date_gmt":"2013-09-16T19:04:26","guid":{"rendered":"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/?page_id=257"},"modified":"2013-09-19T18:07:35","modified_gmt":"2013-09-19T18:07:35","slug":"c4","status":"publish","type":"page","link":"https:\/\/clases.etab.cl\/?page_id=257","title":{"rendered":"C4"},"content":{"rendered":"<p><strong>Ejercicio para la pr\u00f3xima semana:<\/strong> Subir al blog un sketch realizado con todos o algunos de los contenidos que se ver\u00e1n a continuaci\u00f3n. Se pueden combinar con lo visto anteriormente.<\/p>\n<p><strong>Algo de interactividad con Mouse y Teclado en Processing<\/strong><br \/>\n(Libro de referencia: Getting Started with Processing, O&#8217;reilly, Fry, Reas)<\/p>\n<p>En esta sesi\u00f3n veremos algunos ejemplos de interacci\u00f3n con Processing, pero antes recordemos para qu\u00e9 est\u00e1n las funciones void setup() y void draw ().<\/p>\n<p>Recordemos que estos dos bloques est\u00e1n ah\u00ed, porque cada uno tiene un funcionamiento diferente. Todo lo que est\u00e1 dentro de void setup() se ejecutar\u00e1 una vez. En cambio, el bloque que est\u00e9 dentro de void draw() se ir\u00e1 repitiendo en un loop hasta que el programa indique detenerse o se cierre el programa.<\/p>\n<p>Ejecuta el siguiente c\u00f3digo para hacerte una idea:<br \/>\n<script type=\"text\/javascript\" src=\"https:\/\/gist.github.com\/anonymous\/80789caa13d8d3f87e24.js\"><\/script><\/p>\n<p>Recuerda tambi\u00e9n que en sesiones anteriores aprendimos a usar variables que pueden ser &#8220;globales&#8221; o &#8220;locales&#8221;.<br \/>\n Ac\u00e1 puedes ver un ejemplo con variables globales. Estas variables que se inicializan fuera de void setup o de void draw pueden ser llamadas desde cualquier parte del programa.<\/p>\n<p>&nbsp;<\/p>\n<p>Conociendo estas caracter\u00edsticas podemos comenzar a pensar en comportamientos interactivos con Processing.<\/p>\n<p>&nbsp;<\/p>\n<p>Prueba agregar la funci\u00f3n &#8220;background()&#8221; dentro de void draw(); Recuerda que al escribirla dentro de void draw(), esta se estar\u00e1 ejecutando repetidamente por lo que se dejar\u00e1 de ver como si el mouse estuviera dibujando. En cambio, se ver\u00e1 como si un c\u00edrculo estuviera siguiendo al mouse.<\/p>\n<p>Para dibujar con el mouse, se puede usar tambi\u00e9n las variables &#8220;pmouseX&#8221; y &#8220;pmouseY&#8221;. Estas variables tienen la caracter\u00edstica de &#8220;recordar&#8221; la posici\u00f3n anterior del mouse (la &#8220;p&#8221; es por la palabra previous) y unirla con la posici\u00f3n actual, por lo que las l\u00edneas de dibujo se ven cont\u00ednuas a diferencia del ejemplo anterior en donde se ve\u00edan c\u00edrculos separados.<\/p>\n<p>&nbsp;<\/p>\n<p>Otro par\u00e1metro interesante con el que se puede experimentar al interactuar con el mouse, es la aceleraci\u00f3n o desaceleraci\u00f3n (easing).<br \/>\n En el siguiente ejemplo, se puede ver c\u00f3mo la elipse va desacelerando al acercarse al puntero del mouse y acelerando cuando est\u00e1 a mayor distancia.<\/p>\n<p>&nbsp;<\/p>\n<p>En el c\u00f3digo anterior aparece una nueva estructura que no hemos visto antes:<\/p>\n<p><strong>x += 1<\/strong><\/p>\n<p>Esta estructura es una simplificaci\u00f3n para decir:<\/p>\n<p><strong>x = x+1<\/strong><\/p>\n<p>&#8230; de esta manera se repite la variable &#8220;x&#8221; menos veces. Cuando se programa siempre hay que tratar de acortar el c\u00f3digo lo m\u00e1s posible, evitando repetir n\u00fameros o variables innecesariamente.<\/p>\n<p>En el caso del c\u00f3digo anterior, es en esa l\u00ednea (13) en donde el programa calcula la diferencia entre el objetivo (target) y el valor actual para luego multiplicar ese valor por la variable &#8220;easing&#8221; y luego sumarlo a la variable &#8220;x&#8221; para llevar la elipse m\u00e1s cerca del mouse (target).<\/p>\n<p>Mira este c\u00f3digo. Trata de prever lo que va a pasar al ejecutarlo:<br \/>\n<script type=\"text\/javascript\" src=\"https:\/\/gist.github.com\/anonymous\/282f20c4177c7ec94af0.js\"><\/script><\/p>\n<p>Ahora, adem\u00e1s de seguir los movimientos del mouse, tambi\u00e9n es posible en Processing saber si el bot\u00f3n del mouse est\u00e1 presionado o no. Para esto se usa la variable especial mousePressed:<\/p>\n<p>&nbsp;<\/p>\n<p>Operador L\u00f3gico Booleano<br \/>\nEn el c\u00f3digo anterior, en la l\u00ednea 17 aparece escrito;<\/p>\n<p>if (mousePressed == true)<\/p>\n<p>esto nos lleva a un nuevo tipo de dato llamado Booleano (por el <a href=\"http:\/\/en.wikipedia.org\/wiki\/George_Boole\" target=\"_blank\">se\u00f1or Boole<\/a>) que sirve para saber si algo es verdadero (true) o falso (false). No tiene m\u00e1s posiblidades que estas dos situaciones. Prueba cambiar en el c\u00f3digo el booleano &#8220;true&#8221; por &#8220;false&#8221;. Ve lo que pasa al ejecutar el c\u00f3digo.<\/p>\n<p>En el ejemplo a continuaci\u00f3n, se extienden las posiblidades del bloque &#8220;if&#8221; agregando otro bloque: &#8220;else&#8221;<\/p>\n<p>&nbsp;<\/p>\n<p>Prueba seguir <a href=\"http:\/\/processing.org\/reference\/mouseButton.html\" target=\"_blank\">esta referencia<\/a> de Processing para detectar distintos clicks del mouse.<\/p>\n<p>Otro ejemplo de interacci\u00f3n con el mouse:<\/p>\n<p>&nbsp;<\/p>\n<p>y otro:<br \/>\n<script type=\"text\/javascript\" src=\"https:\/\/gist.github.com\/anonymous\/e9b095b722ec2d67d7b5.js\"><\/script><\/p>\n<p>En el ejemplo anterior aparece el operador l\u00f3gico AND representado en el c\u00f3digo con &#8220;&amp;&amp;&#8221;. Con este se pueden comprobar varios estados y s\u00f3lo cuando todos se cumplen entonces se ejecuta lo que est\u00e1 dentro del bloque &#8220;if&#8221;.<\/p>\n<p><strong>Detectando el teclado<\/strong><br \/>\n En el pr\u00f3ximo ejemplo, en el c\u00f3digo aparece la variable &#8220;keyPressed&#8221;, con \u00e9sta Processing detecta si alguna tecla est\u00e1 siendo presionada. En el siguiente ejemplo, aparece el &#8220;keyPressed&#8221; dentro del bloque &#8220;if&#8221;, por loque se est\u00e1 comprobando constantemente si cualquier tecla est\u00e1 presionada y si esto es efectivo, se dibujan elipses de diferentes tama\u00f1os en la ventana.<br \/>\n<script type=\"text\/javascript\" src=\"https:\/\/gist.github.com\/anonymous\/7b754093e9e9ce1f618e.js\"><\/script><\/p>\n<p>Por \u00faltimo, tambi\u00e9n podemos detectar si alguna tecla en particular est\u00e1 siendo presionada. En el siguiente ejemplo, se comprueba si la tecla H est\u00e1 siendo presionada:<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ejercicio para la pr\u00f3xima semana: Subir al blog un sketch realizado con todos o algunos de los contenidos que se ver\u00e1n a continuaci\u00f3n. Se pueden combinar con lo visto anteriormente. Algo de interactividad con Mouse y Teclado en Processing (Libro de referencia: Getting Started with Processing, O&#8217;reilly, Fry, Reas) En esta sesi\u00f3n veremos algunos ejemplos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":65,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-257","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/257","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=257"}],"version-history":[{"count":37,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/257\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/257\/revisions\/346"}],"up":[{"embeddable":true,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/65"}],"wp:attachment":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}