{"id":852,"date":"2014-08-12T19:58:46","date_gmt":"2014-08-12T19:58:46","guid":{"rendered":"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/?page_id=852"},"modified":"2014-10-05T00:24:19","modified_gmt":"2014-10-05T00:24:19","slug":"c2","status":"publish","type":"page","link":"https:\/\/clases.etab.cl\/?page_id=852","title":{"rendered":"C2 &#8211; OT 2014"},"content":{"rendered":"<p>Durante esta sesi\u00f3n hicimos una introducci\u00f3n a las variables, los operadores l\u00f3gicos y mencionamos los relacionales. Vimos tambi\u00e9n las posibilidades de programar rutinas iterativas mediante ciclo for.<\/p>\n<p>Para la pr\u00f3xima clase, la idea es que programen inspirados en el trabajo de Matilde P\u00e9rez o de Gustavo Poblete, en donde se pueden encontrar situaciones compositivas apropiadas para, desde el c\u00f3digo, aplicar variables, ciclos for y todo lo aprendido en esta sesi\u00f3n.<\/p>\n<p>Si tienen problemas para incrustar el Gist en su blog, <a href=\"https:\/\/www.evernote.com\/shard\/s140\/sh\/ffc57249-0f61-42c3-96dc-2cb9cc775747\/0989f44bbcc6ade8bd7098694005d5fa\" target=\"_blank\">aqu\u00ed est\u00e1n<\/a> las indicaciones para poder publicarlo (gracias Felipe!).<\/p>\n<p><strong>Variables<\/strong><br \/>\nUna variable guarda un valor en la memoria del computador para que luego pueda ser usada en el programa. La variable puede ser usada durante todo un programa y el tiene la propiedad de que su valor puede ser cambiado f\u00e1cilmente mientras el programa est\u00e9 corriendo.<\/p>\n<p>Hasta ahora, dibujar\u00edamos la siguiente imagen, con el c\u00f3digo que sigue &#8230;<\/p>\n<p><a href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-6.43.08-PM.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-6.43.08-PM-300x74.png\" alt=\"Captura de pantalla 2014-08-12 a la(s) 6.43.08 PM\" width=\"300\" height=\"74\" class=\"alignnone size-medium wp-image-881\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-6.43.08-PM-300x74.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-6.43.08-PM.png 478w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><script src=\"https:\/\/gist.github.com\/anonymous\/f1febed1888f9ba7451a.js\"><\/script>Cuando hay elementos que se repiten en un c\u00f3digo, es preferible usar variables (&#8230; que es el 99% de las veces).<script src=\"https:\/\/gist.github.com\/anonymous\/01fcafeb74c9ed2fd2fb.js\"><\/script><br \/>\nEn este c\u00f3digo se puede ver c\u00f3mo a la variable &#8216;y&#8217; que es un entero, se le asigna el valor 60 y a &#8216;d&#8217; el valor 80. Si se cambia el valor de cualquiera de estas variables, cambiar\u00e1 el tama\u00f1o de todas las elipses, porque todas tienen el mismo valor en &#8216;y&#8217;; y en ancho y alto &#8216;d&#8217;.<br \/>\nLas variables deben nombrarse de manera que se pueda entender a qu\u00e9 se refieren. En el ejemplo anterior, se utiliz\u00f3 el nombre &#8216;d&#8217; para la variable di\u00e1metro.<br \/>\nAdem\u00e1s, al definir una variable, se debe indicar qu\u00e9 de qu\u00e9 tipo es:<br \/>\n(vistos en clases)<br \/>\n<a href=\"http:\/\/processing.org\/reference\/int.html\" target=\"_blank\">int<\/a>(un valor entero)<br \/>\n<a href=\"http:\/\/processing.org\/reference\/float.html\" target=\"_blank\">float<\/a>(decimales)<br \/>\nOtros tipos de datos primitivos: boolean, byte, char, color, double, float, long<\/p>\n<p><strong>Variables especiales width y height<\/strong><br \/>\nCon las variables de Processing width y height, podemos relacionar todo lo que se dibuje en relaci\u00f3n al ancho y alto de la ventana en donde se visualiza el programa.<br \/>\n<a href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.23.38-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-860\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.23.38-PM-300x76.png\" alt=\"Captura de pantalla 2014-08-12 a la(s) 4.23.38 PM\" width=\"300\" height=\"76\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.23.38-PM-300x76.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.23.38-PM.png 481w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<script src=\"https:\/\/gist.github.com\/anonymous\/9c7b240316024e21fece.js\"><\/script>Ejemplo de Getting Started with Processing. Reas y Fry.<\/p>\n<p><strong>Aritm\u00e9tica b\u00e1sica: operadores l\u00f3gicos:<br \/>\n <\/strong>+ suma<br \/>\n &#8211; resta<br \/>\n \/ divisi\u00f3n<br \/>\n * multiplicaci\u00f3n<br \/>\n = igual a (asigna un valor)<br \/>\n (Tambi\u00e9n hay que recordar los operadores relacionales. Se explicar\u00e1n m\u00e1s abajo en la secci\u00f3n de ciclo for)<\/p>\n<p><a href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.51.56-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-865\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.51.56-PM-300x72.png\" alt=\"Captura de pantalla 2014-08-12 a la(s) 4.51.56 PM\" width=\"300\" height=\"72\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.51.56-PM-300x72.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.51.56-PM.png 477w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<script src=\"https:\/\/gist.github.com\/anonymous\/6cd785f88817d17ac5ed.js\"><\/script><\/p>\n<p>Algunos c\u00e1lculos aritm\u00e9ticos son usados con frecuencia, por lo que se han creado abreviaciones:<\/p>\n<p>x = x + 10; puede escribirse como x += 10;<br \/>\n y = y &#8211; 15; puede escribirse como y -=15;<\/p>\n<p>tambi\u00e9n:<br \/>\n x = x+1; puede escribirse como x++;<br \/>\n y = y-1; puede escribirse como y&#8211;;<\/p>\n<p><strong><br \/>\n Repetici\u00f3n (estructuras iterativas)<\/strong><br \/>\n Hasta ahora cuando dibujamos objetos que tienen las mismas caracter\u00edsticas lo hacemos as\u00ed:<\/p>\n<p><a href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.11.40-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-857\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.11.40-PM-300x76.png\" alt=\"Captura de pantalla 2014-08-12 a la(s) 4.11.40 PM\" width=\"300\" height=\"76\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.11.40-PM-300x76.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-4.11.40-PM.png 478w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<script src=\"https:\/\/gist.github.com\/anonymous\/618800925a706838cb60.js\"><\/script>&#8230; pero existe una estructura llamada ciclo for que permite realizar este tipo de operaci\u00f3n en s\u00f3lo 3 l\u00edneas de c\u00f3digo, obteniendo el mismo dibujo que el c\u00f3digo anterior.<script src=\"https:\/\/gist.github.com\/anonymous\/562fdd1dabe0c138d36e.js\"><\/script><\/p>\n<p><strong>Ciclo for<\/strong><br \/>\n En un ciclo for se est\u00e1 constantemente comprobando si una condici\u00f3n es cierta o no, por ejemplo si x es mayor que 400. Es por esto que se necesitan los operadores relacionales:<\/p>\n<p>&lt; menor que &gt; mayor que<br \/>\n &lt;= menor o igual que &gt;= mayor o igual que<br \/>\n == igual que (compara)<br \/>\n != no igual que<\/p>\n<p><a href=\"http:\/\/processing.org\/reference\/for.html\" target=\"_blank\">http:\/\/processing.org\/reference\/for.html<\/a><br \/>\n Documento explicativo de la estructura y funcionamiento del ciclo <a href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/pdfs\/clase_ciclo-for_processing.pdf\" target=\"_blank\">[pdf]<\/a><\/p>\n<p><strong>Ejemplo ciclo for para gradiente de color<\/strong><br \/>\n<a href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-14-a-las-3.17.23-PM.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-14-a-las-3.17.23-PM-300x74.png\" alt=\"Captura de pantalla 2014-08-14 a la(s) 3.17.23 PM\" width=\"300\" height=\"74\" class=\"alignnone size-medium wp-image-909\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-14-a-las-3.17.23-PM-300x74.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-14-a-las-3.17.23-PM.png 478w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<script src=\"https:\/\/gist.github.com\/anonymous\/2787f81b7b8b16ee8b05.js\"><\/script><\/p>\n<p><strong>Ciclo for dentro de un ciclo for<\/strong><br \/>\n <a href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-3.59.49-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-855\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-3.59.49-PM-300x74.png\" alt=\"Captura de pantalla 2014-08-12 a la(s) 3.59.49 PM\" width=\"300\" height=\"74\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-3.59.49-PM-300x74.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2014\/08\/Captura-de-pantalla-2014-08-12-a-las-3.59.49-PM.png 480w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<script src=\"https:\/\/gist.github.com\/anonymous\/c6ffaee04fa0538c1ed2.js\"><\/script><\/p>\n<p><strong>Otra forma de iteraci\u00f3n &#8216;while&#8217;<\/strong><br \/>\nhttps:\/\/www.processing.org\/reference\/while.html<\/p>\n<p><strong>Referente de hoy:<\/strong><br \/>\nGolan Levin: <a href=\"http:\/\/www.flong.com\/\" target=\"_blank\">www.flong.com<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/www.tmema.org\/messa\/img\/messa_chicken_hud_1793.jpg\" alt=\"\" width=\"720\" height=\"480\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/www.tmema.org\/messa\/img\/messa_jaapsolo_hud_1782.jpg\" alt=\"\" width=\"720\" height=\"480\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durante esta sesi\u00f3n hicimos una introducci\u00f3n a las variables, los operadores l\u00f3gicos y mencionamos los relacionales. Vimos tambi\u00e9n las posibilidades de programar rutinas iterativas mediante ciclo for. Para la pr\u00f3xima clase, la idea es que programen inspirados en el trabajo de Matilde P\u00e9rez o de Gustavo Poblete, en donde se pueden encontrar situaciones compositivas apropiadas [&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-852","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/852","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=852"}],"version-history":[{"count":24,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/852\/revisions"}],"predecessor-version":[{"id":994,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/852\/revisions\/994"}],"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=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}