{"id":2777,"date":"2021-03-19T12:57:09","date_gmt":"2021-03-19T12:57:09","guid":{"rendered":"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/?page_id=2777"},"modified":"2021-07-14T12:40:48","modified_gmt":"2021-07-14T12:40:48","slug":"complementario-2021","status":"publish","type":"page","link":"https:\/\/clases.etab.cl\/?page_id=2777","title":{"rendered":"Complementario 2021"},"content":{"rendered":"\n<p><strong>Calendario: <\/strong><a rel=\"noreferrer noopener\" href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1Dzbw0cR-zDDuIai-7c_dmczGUnryugoF-fBX3sv_ZFs\/edit?usp=sharing\" target=\"_blank\">https:\/\/docs.google.com\/spreadsheets\/d\/1Dzbw0cR-zDDuIai-7c_dmczGUnryugoF-fBX3sv_ZFs\/edit?usp=sharing<\/a><br><strong>Registro clases: <\/strong><a href=\"https:\/\/drive.google.com\/drive\/folders\/148oroTDNQozsMej9eMFKYsgJtyUZ8PXt?usp=sharing\">https:\/\/drive.google.com\/drive\/folders\/148oroTDNQozsMej9eMFKYsgJtyUZ8PXt?usp=sharing<\/a><br><strong>Links bit\u00e1coras: <\/strong><a href=\"https:\/\/docs.google.com\/document\/d\/1n_1Y913IXKb8zjtcWXbL8utVguobkk3Ti6eqSmB0iUQ\/edit?usp=sharing\">https:\/\/docs.google.com\/document\/d\/1n_1Y913IXKb8zjtcWXbL8utVguobkk3Ti6eqSmB0iUQ\/edit?usp=sharing<\/a><br><strong>Programa:<\/strong> <a rel=\"noreferrer noopener\" href=\"https:\/\/www.u-cursos.cl\/artes\/2021\/1\/TCOM121-520\/8\/datos_curso\/bajar_programa?id=75325&amp;1998762957\" target=\"_blank\">https:\/\/www.u-cursos.cl\/artes\/2021\/1\/TCOM121-520\/8\/datos_curso\/bajar_programa?id=75325&amp;1998762957 <\/a><br><strong>Bibliograf\u00eda<\/strong>: <a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/drive\/folders\/1kORqK07tlXhZKaQRr0ExKN_p6mxPS3Xy?usp=sharing\" target=\"_blank\">https:\/\/drive.google.com\/drive\/folders\/1kORqK07tlXhZKaQRr0ExKN_p6mxPS3Xy?usp=sharing<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Arte e instrucci\u00f3n <\/strong><br>Sol Lewitt: <a rel=\"noreferrer noopener\" href=\"https:\/\/improvisedlife.com\/2015\/08\/10\/learning-stealing-sol-lewitt\/\" target=\"_blank\">link<\/a><br>Cybernetic Serendipity: <a rel=\"noreferrer noopener\" href=\"https:\/\/monoskop.org\/Cybernetic_Serendipity\" target=\"_blank\">pdf<\/a><br>Cornelia Vargas: <a rel=\"noreferrer noopener\" href=\"https:\/\/abstraccionsur.com\/gallery\/cornelia-vargas\" target=\"_blank\">video<\/a><br><br><strong>Processing<\/strong><br>Processing es un lenguaje de programaci\u00f3n y entorno de desarrollo integrado de c\u00f3digo abierto basado en Java, de f\u00e1cil utilizaci\u00f3n, y que sirve como medio para la ense\u00f1anza y producci\u00f3n de proyectos multimedia e interactivos de dise\u00f1o digital. Fue iniciado por Ben Fry y Casey Reas a partir de reflexiones en el Aesthetics and Computation Group del MIT Media Lab dirigido por John Maeda&nbsp;<a href=\"http:\/\/es.wikipedia.org\/wiki\/Processing\">Ref.: Wikipedia: Processing<\/a><br><a href=\"http:\/\/maedastudio.com\/1999\/dbn\/index.php\">\u2013 Design by numbers<\/a><br><a href=\"http:\/\/processing.org\/\">\u2013 Sitio web oficial de Processing<\/a><\/p>\n\n\n\n<p><strong>Fexibilidad<\/strong><br>Processing consiste en muchas herramientas que trabajan juntas en diferentes combinaciones. Como resultado, puede ser usado para programaci\u00f3n r\u00e1pida, o bien para una investigaci\u00f3n acuciosa.<br>Debido a que un programa desarrollado en Processing puede ser tan corto como una l\u00ednea de c\u00f3digo, o tan largo como miles de l\u00edneas, hay espacio para el crecimiento y la variaci\u00f3n. M\u00e1s de 100 librer\u00edas pueden extender Processing a dominios m\u00e1s alejados, incluyendo sonido, computer vision o fabricaci\u00f3n digital.<br><br><strong>Otros recursos sugeridos<\/strong><br>Github: sitio de comunidad de programadores&nbsp;<a href=\"https:\/\/github.com\/processing\">\u2013 Github<\/a><br>Gist de Github:&nbsp;<a href=\"http:\/\/www.etab.cl\/clases\/uchile\/obj-tec\/pdfs\/instrucciones-gist-en-wp.pdf\">Documento tutorial para publicar en Gist.<\/a>. Seguir hasta el punto d solamente, lo que sigue s\u00f3lo es \u00fatil si se quiere publicar el c\u00f3digo en un sitio desarrollado en WordPress.<br>Openprocessing:&nbsp;<a href=\"https:\/\/www.openprocessing.org\/browse\/#\">Sitio comunitario de sketches de Processing<\/a><br>Daniel Shiffman:&nbsp;<a href=\"https:\/\/shiffman.net\/\">Sitio personal<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/channel\/UCvjgXvBlbQiydffZU7m1_aw\" target=\"_blank\">The coding train<\/a><br>Tutoriales:&nbsp;<a href=\"https:\/\/processing.org\/tutorials\/\">en Processing.org<\/a><br>Curso en video:&nbsp;<a href=\"https:\/\/hello.processing.org\/\">Hello Processing<\/a><br>En Espa\u00f1ol:&nbsp;<a href=\"http:\/\/www.mywonderland.es\/curso_js\/processing\/processing.html\">Tutorial Processing<\/a><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sesi\u00f3n n\u00ba1<\/strong><\/h2>\n\n\n\n<p><strong>Contenidos vistos en la clase de hoy: Pg. 1 a 36<\/strong><br>Libro:&nbsp;<a href=\"https:\/\/www.u-cursos.cl\/artes\/2020\/1\/TCOM121-720\/10\/material_docente\/bajar?id_material=3131624\">Hola Mundo con Processing<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Ambiente de programaci\u00f3n:<br>IDE (integrated development environment).<br><img loading=\"lazy\" decoding=\"async\" width=\"488\" height=\"369\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-21.02.20.png\" alt=\"\" srcset=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-21.02.20.png 488w, http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-21.02.20-300x227.png 300w\"><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Funciones:<\/strong>&nbsp;las funciones son l\u00edneas de c\u00f3digo pre-escritas en Processing (o cualquier otro lenguaje de programaci\u00f3n) y que tienen la \u201cfunci\u00f3n\u201d de ejecutar una instrucci\u00f3n espec\u00edfica para que, quien est\u00e9 programando, no tenga que escribir todo desde cero. Cualquier programador podr\u00e1 desarrollar sus propias funciones seg\u00fan lo vaya necesitando. Por ejemplo, la funci\u00f3n \u201crect\u201d incluida en Processing tiene la funci\u00f3n de dibujar un rect\u00e1ngulo seg\u00fan las instrucciones dadas.<\/li><li><strong>Sintaxis:<\/strong>&nbsp;t\u00e9rmino que viene de la ling\u00fc\u00edstica y que se refiere a las reglas y orden en la escritura de determinado lenguaje. En el caso de Processing por ejemplo, la sintaxis define la cantidad de par\u00e1metros que debe tener una funci\u00f3n y el orden en que van escritos. Tambi\u00e9n define que Processing sea \u2018case-sensitive\u2019, lo que quiere decir que el programa s\u00ed discrimina entre may\u00fasculas y min\u00fasculas, por lo que hay que poner cuidado de usarlas correctamente.<\/li><li><strong>Par\u00e1metros\/Argumentos:<\/strong>&nbsp;son los valores que se indican luego de una funci\u00f3n. Por ejemplo:<br>. rect(10, 10, 50, 60):<br>En esta funci\u00f3n, todos los n\u00fameros que van dentro de los par\u00e9ntesis, son sus par\u00e1metros.<\/li><li><strong>Ayuda para uso de funciones \/ sintaxis \/ par\u00e1metros en Processing:<\/strong><br>Para acceder a la ayuda de Processing (tambi\u00e9n llamada Referencias), se debe escribir una funci\u00f3n en el IDE y luego hacer click derecho sobre la palabra (por ejemplo: \u201crect();\u201d)<\/li><li><strong>Selector de color en Processing<\/strong><br>Se encuentra en el Men\u00fa: Herramientas \u2013&gt; Selector de Color<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"442\" height=\"327\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-20.38.03.png\" alt=\"\" class=\"wp-image-2590\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-20.38.03.png 442w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-20.38.03-300x222.png 300w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/figure>\n\n\n\n<p>En esta herramienta del programa Processing podr\u00e1n identificar los colores y sus c\u00f3digos\/valores<br>seg\u00fan distintos modos de color, para luego aplicar esos valores en sus c\u00f3digos:<br>[H, S, B] Modo de color de tres canales Hue\/Tono, Saturation\/Saturaci\u00f3n, Brightness\/Brillo<br>[R,G,B] Modo de color de tres canales Red\/Rojo, Green\/Verde, Blue\/Azul<br>[HEX] Valor hexadecimal. Ej.- #CCCCCC<br><a href=\"https:\/\/desarrolloweb.com\/articulos\/1483.php\">M\u00e1s sobre modos de color \u2026<\/a><br>Color en Processing:<a href=\"https:\/\/processing.org\/tutorials\/color\/\">Link<\/a><\/p>\n\n\n\n<p><strong>Primer Sketch realizado en clases (para ver el resultado de este c\u00f3digo, copiar y pegar en Processing)<\/strong><br>Comenzamos dibujando una l\u00ednea situada al centro del lienzo de Processing.<\/p>\n\n\n\n<p>De esta manera, pudimos revisar la manera en que Processing dibuja: a partir de un plano cartesiano que sirve como base para indicarle en qu\u00e9 coordenadas dibujar pixeles. Vimos tambi\u00e9n c\u00f3mo Processing \u201clee\u201d las instrucciones (algoritmo) que uno le entrega en el sketch (programa); esto es de arriba a abajo, aspecto que luego se ver reflejado en el orden en que aparecen los dibujos en el plano (como si fueran capas de Photoshop, las l\u00edneas de c\u00f3digo que aparecen primero aparecer\u00e1n en el dibujo como si estuvieran debajo de los dibujos que se programan en las l\u00edneas posteriores de c\u00f3digo).<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Ejemplo 1<\/strong> &#8211; <strong>Desarrollado durante la clase<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2021\/03\/Captura-de-Pantalla-2021-03-26-a-las-09.18.34.png\" alt=\"\" class=\"wp-image-2790\" width=\"350\" height=\"352\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/03\/Captura-de-Pantalla-2021-03-26-a-las-09.18.34.png 688w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/03\/Captura-de-Pantalla-2021-03-26-a-las-09.18.34-298x300.png 298w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/03\/Captura-de-Pantalla-2021-03-26-a-las-09.18.34-150x150.png 150w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/03\/Captura-de-Pantalla-2021-03-26-a-las-09.18.34-624x628.png 624w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>size(350, 350);<br>background(12, 25, 240);<br>line(width\/2, height\/2, 500, 509);<br>fill(237, 19, 45);<br>strokeWeight(10);<br>stroke(5, 255, 90);<br>rect(width\/2, height\/2, 200, 200);<br>stroke(255, 176, 3);<br>fill(254, 255, 0);<br>ellipse(width\/2, height\/2, 200, 200);<\/p>\n\n\n\n<p>\/*<br>ESTO ES UN COMENTARIO<br>kjahlsakjhl<br>alkjhslfdkjahskl<br>askdfhakjshdfla<br>*\/<br>\/\/ajkshlfkajhsdlfkjhaslk<\/p>\n\n\n\n<p><strong>1er Ejercicio: <\/strong>A partir de las funciones revisadas en el c\u00f3digo desarrollado en clases, proponer tres im\u00e1genes que puedan funcionar como tr\u00edptico. Usar solamente esas funciones de manera de enfocarse en la composici\u00f3n a partir de formas simples.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sesi\u00f3n n\u00ba2<\/strong><\/h2>\n\n\n\n<p><br><strong>Ejemplo<\/strong> 2<\/p>\n\n\n\n<p>size(500, 500); \/\/funci\u00f3n &#8220;tama\u00f1o&#8221; (ubicaci\u00f3n X, ubicaci\u00f3n Y); correspondiendo la x a la horizontal, y la Y a la posici\u00f3n vertical<br>background(125); \/\/256 el rango va de 0 a 255;<br>\/*<br>\/\/ RGB = rojo verde azul<br>\/\/ HSB = Hue saturation brightness<br>\/\/ HEX = hexadecimal<br>rectMode(CORNER);<br>rect(30, 30, 50, 200);<br>rectMode(CENTER);<br>rect(30, 30, 50, 200);<br>ellipse(30, 80, 40, 40); \/\/ellipse(x, y, ancho, alto);<br>stroke(217, 15, 245);<br>line(0, 0, 500, 500);<br>triangle(30, 75, 40, 20, 500, 500);<br>*\/<br>beginShape();<br>translate(200, 150);<br>vertex(50+200, 120+150);<br>vertex(100, 90);<br>vertex(110, 60);<br>vertex(80, 20);<br>vertex(210, 60);<br>vertex(50, 120);<br>endShape();<\/p>\n\n\n\n<p>ellipse(100,100, 40, 40);<br>translate(50, 0);<br>ellipse(100,100, 40, 40);<\/p>\n\n\n\n<p>rotate();<\/p>\n\n\n\n<p>\/* configuraci\u00f3n de color<br>background();<br>fill();<br>noFill();<br>stroke();<br>noStroke();<br>*\/<\/p>\n\n\n\n<p>\/*<br>Operadores aritm\u00e9ticos<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">+<br>&#8211;<br>*<br>\/<\/h2>\n\n\n\n<p>*<br>*\/<\/p>\n\n\n\n<p><br><strong>Antes de programar, bocetear y prototipar<\/strong><br>Bocetear puede ser definido como una manera de pensar. El objetivo b\u00e1sico es explorar la mayor cantidad de ideas en poco tiempo. Cuando se programa, es muy com\u00fan que se hagan bocetos iniciales para luego llevarlos a c\u00f3digo. Ideas para la animaci\u00f3n y la interacci\u00f3n se bocetean normalmente como si fueran un storyboard con anotaciones. Luego de hacer algunos sketches de programaci\u00f3n, se seleccionan las mejores ideas y son combinadas en prototipos. Es un proceso c\u00edclico de hacer, probar y mejorar \u2026 y que se combina entre papel y pantalla.<\/p>\n\n\n\n<p><strong>Ejercicio a realizar para la pr\u00f3xima semana<\/strong><br>Dibujar un helado de cono a partir de las funciones de dibujo que hemos revisado hasta ahora.<\/p>\n\n\n\n<p>Referencias de Funciones en Processing de las funciones vistas en clase: 2DPrimitives y Color<br><a href=\"https:\/\/processing.org\/reference\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/processing.org\/reference\/https:\/\/processing.org\/reference\/<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/file\/d\/1-UBJBEE--nncxpKk3vWI-sEfBOG_oDB_\/view?usp=sharing\" target=\"_blank\">Video de apoyo clase 1<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/file\/d\/1VOkxJbwUbcVgujOuAyYUEC2Si2FBMOVd\/view\" target=\"_blank\">Video de apoyo clase 2<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sesi\u00f3n n\u00ba3<\/h2>\n\n\n\n<p>En esta sesi\u00f3n, revisamos los avances en sus bit\u00e1coras en los procesos de programaci\u00f3n para el ejercicio de tr\u00edptico y luego el dibujo de un helado en cono.<br><br>. <strong>Ejemplo con modificadores (rotate, translate, scale)<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/loadix\/22703bb0aabbda904c636b8396ac74fa.js\"><\/script>\n\n\n\n<pre id=\"block-2c21fb1d-e4b3-4e28-a7a0-ecaf9de631a7\" class=\"wp-block-preformatted\"><strong>Diagrama radianes<\/strong>\n\n<img decoding=\"async\" src=\"https:\/\/www.u-cursos.cl\/artes\/2020\/1\/TCOM121-720\/10\/blog\/r\/th_1_Captura_de_pantalla_2020-06-02_a_la(s)_20.00.48.png.jpg\"><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Variables y tipos de datos<\/strong><br>Una 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 tiene la propiedad de que su valor puede ser cambiado f\u00e1cilmente mientras el programa est\u00e9 corriendo.<\/p>\n\n\n\n<p>Hasta ahora, dibujar\u00edamos la siguiente imagen, con el c\u00f3digo que sigue \u2026<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"252\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/10\/tres-elipses-1024x252.png\" alt=\"\" class=\"wp-image-2653\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/tres-elipses-1024x252.png 1024w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/tres-elipses-300x74.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/tres-elipses-768x189.png 768w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/tres-elipses-624x154.png 624w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/tres-elipses.png 1347w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>&#8212;&#8212;&#8212;&#8212;&#8212;inicio c\u00f3digo&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br>size (480, 120);<br>ellipseMode(CORNER);<br>ellipse(20, 40, 60, 60);<br>ellipse(120, 40, 60, 60);<br>ellipse(220, 40, 60, 60);<br>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;fin c\u00f3digo&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/p>\n\n\n\n<p>Cuando hay elementos que se repiten en un c\u00f3digo, es preferible usar variables (\u2026 que es el 99% de las veces).<br>&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;inicio c\u00f3digo&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br>size (480, 120);<br>int y = 60;<br>int d = 80;<br>ellipse(75, y, d, d);<br>ellipse(175, y, d, d);<br>ellipse(275, y, d, d);<br>&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;fin c\u00f3digo&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n\n\n\n<p>En este c\u00f3digo se puede ver c\u00f3mo a la variable \u2018y\u2019 que es un entero, se le asigna el valor 60 y a \u2018d\u2019 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 \u2018y\u2019; y en ancho y alto \u2018d\u2019.<br>Las variables deben nombrarse de manera que se pueda entender a qu\u00e9 se refieren. En el ejemplo anterior, se utiliz\u00f3 el nombre \u2018d\u2019 para la variable di\u00e1metro.<br>Adem\u00e1s, al definir una variable, se debe indicar qu\u00e9 de qu\u00e9 tipo es:<br>int(un valor entero): por ejemplo 7; 7; 20; 100<br>float(decimales): por ejemplo 5,1; 6,6; 8,2<br>Otros tipos de datos: boolean, byte, char, color, double, float, long<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/10\/Captura-de-pantalla-2020-10-13-a-las-14.04.48.png\" alt=\"\" class=\"wp-image-2658\" width=\"556\" height=\"155\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/Captura-de-pantalla-2020-10-13-a-las-14.04.48.png 556w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/Captura-de-pantalla-2020-10-13-a-las-14.04.48-300x84.png 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p>b) Variable de sistema: width, height<br>Con 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"258\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/10\/elipse-centrada-lineas-1024x258.png\" alt=\"\" class=\"wp-image-2654\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/elipse-centrada-lineas-1024x258.png 1024w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/elipse-centrada-lineas-300x76.png 300w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/elipse-centrada-lineas-768x193.png 768w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/elipse-centrada-lineas-624x157.png 624w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2020\/10\/elipse-centrada-lineas.png 1339w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;inicio c\u00f3digo&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br>size (480, 120);<br>line (0, 0, width, height);<br>line (width, 0, 0, height);<br>ellipse (width\/2, height\/2, 60, 60);<br>&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;fin c\u00f3digo&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n\n\n\n<p><strong>Video de apoyo:<\/strong><br><a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/file\/d\/1VOkxJbwUbcVgujOuAyYUEC2Si2FBMOVd\/view?usp=sharing\" target=\"_blank\">Funciones beginShape y endShape; vertex<\/a>,<a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/file\/d\/1VOkxJbwUbcVgujOuAyYUEC2Si2FBMOVd\/view?usp=sharing\" target=\"_blank\">rotate, translate, pushMatrix, popMatrix<\/a><\/p>\n\n\n\n<p><strong>Referencia hist\u00f3rico-art\u00edstica:<\/strong> <strong>Cybernetic Cerendipity<\/strong><br>1era exposici\u00f3n de arte y tecnolog\u00eda <a rel=\"noreferrer noopener\" href=\"https:\/\/monoskop.org\/images\/2\/2a\/Reichardt_Jasia_ed_Cybernetic_Serendipidity_The_Computer_and_the_Arts_1969.pdf\" target=\"_blank\">https:\/\/monoskop.org\/images\/2\/2a\/Reichardt_Jasia_ed_Cybernetic_Serendipidity_The_Computer_and_the_Arts_1969.pdf<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1era revisi\u00f3n de bit\u00e1cora<\/strong><\/h2>\n\n\n\n<p>Pauta de entrega y evaluaci\u00f3n:<br><a href=\"https:\/\/docs.google.com\/document\/d\/1Hk8bHk-h5y_bcRdtKu8ZXfK4JRKXwv3TJcqLetH0N6g\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.google.com\/document\/d\/1Hk8bHk-h5y_bcRdtKu8ZXfK4JRKXwv3TJcqLetH0N6g\/edit?usp=sharing<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><br><strong>Sesi\u00f3n 4<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>Registro de la sesi\u00f3n: <a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/drive\/folders\/1VwaAGleRgllP0gOcWdqkHg4Y9joA_Kxk?usp=sharing\" target=\"_blank\">https:\/\/drive.google.com\/drive\/folders\/1VwaAGleRgllP0gOcWdqkHg4Y9joA_Kxk?usp=sharing<\/a><br><\/p>\n\n\n\n<p><strong>Ciclo for<\/strong><br><span style=\"text-decoration: underline;\">Gu\u00eda ciclo for<\/span>: <a rel=\"noreferrer noopener\" href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/pdfs\/clase_ciclo-for_processing.pdf\" target=\"_blank\">http:\/\/etab.cl\/clases\/uchile\/obj-tec\/pdfs\/clase_ciclo-for_processing.pdf<\/a><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"478\" height=\"122\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-12-a-las-4.11.40-PM.png\" alt=\"\" class=\"wp-image-2847\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-12-a-las-4.11.40-PM.png 478w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-12-a-las-4.11.40-PM-300x77.png 300w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"478\" height=\"119\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-14-a-las-3.17.23-PM.png\" alt=\"\" class=\"wp-image-2848\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-14-a-las-3.17.23-PM.png 478w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-14-a-las-3.17.23-PM-300x75.png 300w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/figure>\n\n\n\n<p><span style=\"text-decoration: underline;\">C\u00f3digos desarrollados en clases<\/span>:<br>\/\/Tipos de variables<br>\/\/ int es una abreviaci\u00f3n de integer (entero)<br>\/\/ float se refiere a los n\u00fameros de coma flotante, es decir n\u00fameros decimales (2,2)<br>\/\/ boolean: dos n\u00fameros, 0 \u00f3 1<br>\/\/ char: abreviaci\u00f3n de character (caracter)<br>\/\/ string: frases<br>\/\/ long: para variables grandes<\/p>\n\n\n\n<p>\/*<br>C\u00f3digo inicial, sin &#8220;ciclo for&#8221;<br>size(480, 120);<br>strokeWeight(8);<br>line(20, 40, 80, 80);<br>line(80, 40, 140, 80);<br>line(140, 40, 200, 80);<br>line(200, 40, 260, 80);<br>line(260, 40, 320, 80);<br>line(320, 40, 380, 80);<br>line(380, 40, 440, 80);<br>*\/<\/p>\n\n\n\n<p>\/* EJEMPLO CICLO FOR<br>size (480, 120);<br>strokeWeight(8);<\/p>\n\n\n\n<p>for(int i=20; i&lt;400; i+=60){<br>line(i, 40, i+60, 80);<br>}<br>\/*<\/p>\n\n\n\n<p>\/* OPERADORES RELACIONALES<br>\/\/ &lt; \/\/ &gt;<br>\/\/ ==<br>\/\/ !=<br>*\/<\/p>\n\n\n\n<p>\/*<br>CICLO FOR GRADIENTE<br>size(480, 120);<br>for( int i=0; i&lt;480; i++){<br>stroke(i\/2, i\/2, i\/2); \/\/stroke(4, 4, 4);<br>line(i, 0, i, 120);<br>}<br>*\/<\/p>\n\n\n\n<p>size(480, 120);<br>background(0);<br>\/\/noStroke();<\/p>\n\n\n\n<p>for (int y = 0; y&lt;= height; y +=40) {<br>fill (255, 30, 70);<br>ellipse(0, y, 40, 40);<br>}<\/p>\n\n\n\n<p>Ejercicio a resolver para la pr\u00f3xima sesi\u00f3n: desarrolla el c\u00f3digo para la siguientes imagen, utilizando ciclo for:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"119\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-12-a-las-3.59.49-PM.png\" alt=\"\" class=\"wp-image-2846\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-12-a-las-3.59.49-PM.png 480w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-pantalla-2014-08-12-a-las-3.59.49-PM-300x74.png 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p>Otras referencias para esta clase:<br><a rel=\"noreferrer noopener\" href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/?page_id=852\" target=\"_blank\">http:\/\/etab.cl\/clases\/uchile\/obj-tec\/?page_id=852<\/a><br><a rel=\"noreferrer noopener\" href=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/pdfs\/clase_ciclo-for_processing.pdf\" target=\"_blank\">http:\/\/etab.cl\/clases\/uchile\/obj-tec\/pdfs\/clase_ciclo-for_processing.pdf<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/www.u-cursos.cl\/artes\/2020\/1\/TCOM121-720\/10\/material_docente\/bajar?id_material=3131612\" target=\"_blank\">https:\/\/www.u-cursos.cl\/artes\/2020\/1\/TCOM121-720\/10\/material_docente\/bajar?id_material=3131612<\/a> <em>(pg.61 a 67 del pdf (pg. 40 a 46 en la numeraci\u00f3n del libro f\u00edsico).<\/em>*<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sesi\u00f3n 5<\/h2>\n\n\n\n<p>Revisamos las bit\u00e1coras evaluadas.<br><br>Jacinta hizo una inducci\u00f3n a Canva<br><br>Revisamos el ejercicio de Nested Loop.<br><br>Ejercicio para la pr\u00f3xima semana:<br>Revisar el libro Getting Started with Processing: Pg.40 a Pg.46 (numeraci\u00f3n del libro y no del pdf)<br>* Modificar los c\u00f3digos que aparecen ah\u00ed de manera de comprender el ciclo for y el ciclo for anidado.<br>* Desarrollar un c\u00f3digo desde cero a partir de un ciclo for<br>* Revisar el siguiente c\u00f3digo con la iteraci\u00f3n While:<br><br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2021\/04\/Captura-de-Pantalla-2021-04-20-a-las-22.27.23.png\" alt=\"\" class=\"wp-image-2860\" width=\"307\" height=\"308\" srcset=\"https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-Pantalla-2021-04-20-a-las-22.27.23.png 784w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-Pantalla-2021-04-20-a-las-22.27.23-298x300.png 298w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-Pantalla-2021-04-20-a-las-22.27.23-150x150.png 150w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-Pantalla-2021-04-20-a-las-22.27.23-768x772.png 768w, https:\/\/clases.etab.cl\/wp-content\/uploads\/2021\/04\/Captura-de-Pantalla-2021-04-20-a-las-22.27.23-624x627.png 624w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/figure><\/div>\n\n\n\n<p>size(400, 400);<br>background(0);<br>strokeWeight(2);<br>stroke(255);<\/p>\n\n\n\n<p>int x = 0;<br>while (x &lt;width){<br>line(x, 0, x, height);<br>x = x+20;<br>}<\/p>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sesi\u00f3n 6<\/h2>\n\n\n\n<p>Computadores, historia<br><a rel=\"noreferrer noopener\" href=\"https:\/\/es.wikipedia.org\/wiki\/Computadoras_de_Harvard\" target=\"_blank\">https:\/\/es.wikipedia.org\/wiki\/Computadoras_de_Harvard<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=-L5RoBMKOdM\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=-L5RoBMKOdM<\/a><br><br>Referencia c\u00f3digos para iteraciones. While, For: <a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/drive\/folders\/1Ti3NZqz0N26IbJungoQ5JZEpw35kVFGP\" target=\"_blank\">https:\/\/drive.google.com\/drive\/folders\/1Ti3NZqz0N26IbJungoQ5JZEpw35kVFGP<\/a><br><a href=\"https:\/\/www.processing.org\/reference\/while.html\">https:\/\/www.processing.org\/reference\/while.html<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Referentes<br><\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Firewall\" src=\"https:\/\/player.vimeo.com\/video\/54882144?dnt=1&amp;app_id=122963\" width=\"625\" height=\"352\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Calendario: https:\/\/docs.google.com\/spreadsheets\/d\/1Dzbw0cR-zDDuIai-7c_dmczGUnryugoF-fBX3sv_ZFs\/edit?usp=sharingRegistro clases: https:\/\/drive.google.com\/drive\/folders\/148oroTDNQozsMej9eMFKYsgJtyUZ8PXt?usp=sharingLinks bit\u00e1coras: https:\/\/docs.google.com\/document\/d\/1n_1Y913IXKb8zjtcWXbL8utVguobkk3Ti6eqSmB0iUQ\/edit?usp=sharingPrograma: https:\/\/www.u-cursos.cl\/artes\/2021\/1\/TCOM121-520\/8\/datos_curso\/bajar_programa?id=75325&amp;1998762957 Bibliograf\u00eda: https:\/\/drive.google.com\/drive\/folders\/1kORqK07tlXhZKaQRr0ExKN_p6mxPS3Xy?usp=sharing Arte e instrucci\u00f3n Sol Lewitt: linkCybernetic Serendipity: pdfCornelia Vargas: video ProcessingProcessing es un lenguaje de programaci\u00f3n y entorno de desarrollo integrado de c\u00f3digo abierto basado en Java, de f\u00e1cil utilizaci\u00f3n, y que sirve como medio para la ense\u00f1anza y producci\u00f3n de proyectos multimedia e interactivos de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2777","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/2777","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=2777"}],"version-history":[{"count":24,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/2777\/revisions"}],"predecessor-version":[{"id":2919,"href":"https:\/\/clases.etab.cl\/index.php?rest_route=\/wp\/v2\/pages\/2777\/revisions\/2919"}],"wp:attachment":[{"href":"https:\/\/clases.etab.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}