Calendario del curso: https:\/\/docs.google.com\/spreadsheets\/d\/1p-4THvjg6ErgodgTD8IaH-9TdMPv_qWnK8nIKsAg7Mo\/edit?usp=sharing<\/a> Bibliograf\u00eda: https:\/\/www.u-cursos.cl\/artes\/2020\/2\/TCOM121-620\/12\/bibliografia\/<\/a><\/p>\n\n\n\n Repositorio: https:\/\/drive.google.com\/drive\/folders\/1cT7IqvooQn-ViQmgpaPxQ9ceHDeF5Vyl?usp=sharing<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n Parte 1: contexto<\/strong> Parte 2: Programaci\u00f3n en Processing<\/strong> Fexibilidad<\/strong> Otros recursos sugeridos<\/strong> Contenidos vistos en la clase de hoy: Pg. 1 a 36<\/strong> <\/p>\n\n\n\n En esta herramienta del programa Processing podr\u00e1n identificar los colores y sus c\u00f3digos\/valores Primer Sketch realizado en clases (para ver el resultado de este c\u00f3digo, copiar y pegar en Processing)<\/strong> 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 “lee” 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 Ejemplo 1<\/strong> <\/p>\n\n\n\n Ejemplo <\/strong>2 size(500, 500); Ejercicio a realizar para la pr\u00f3xima semana<\/strong> Referencias de Funciones en Processing de las funciones vistas en clase: 2DPrimitives y Color Algun@s referentes sugeridos para trabajar en su dibujo-encargo: Video de apoyo clase 1<\/a><\/p>\n\n\n\n En esta sesi\u00f3n, revisamos el portafolio de Crist\u00f3bal e Isabel. A partir de esto, comentamos algunos referentes (anotados m\u00e1s abajo). Revisamos tambi\u00e9n los ejercicios desarrollados para esta semana, donde debieron elegir la obra de alguna o alg\u00fan artista para reinterpretarla a trav\u00e9s del c\u00f3digo. . Revisar en la bibliograf\u00eda<\/strong>
Fechas importantes:
*Inicio 2do semestre: LUNES 21 DE SEPTIEMBRE
* Semana del arte constituyente: LUNES 19 al VIERNES 23 DE OCTUBRE
*Receso 1: LUNES 9 al VIERNES 13 DE NOVIEMBRE
*Receso 2: LUNES 28 al VIERNES 1 DE DICIEMBRE
*Cierre 2do semestre: JUEVES 21 DE ENERO<\/p>\n\n\n\nClase 2<\/h2>\n\n\n\n
En esta sesi\u00f3n revisamos y comentamos de la p\u00e1gina 1 a la 7 de la presentaci\u00f3n Qu\u00e9 son los Nuevos Medios y la historia de la invenci\u00f3n del computador<\/a>
Registro de la clase: https:\/\/www.u-cursos.cl\/artes\/2020\/1\/TCOM121-720\/10\/material_alumnos\/bajar?id_material=866520https:\/\/www.u-cursos.cl\/artes\/2020\/1\/TCOM121-720\/10\/material_alumnos\/bajar?id_material=866520<\/a><\/p>\n\n\n\n
Qu\u00e9 es Processing<\/strong>
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 Ref.: Wikipedia: Processing<\/a>
– Design by numbers<\/a>
– Sitio web oficial de Processing<\/a><\/p>\n\n\n\n
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.
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:
Maldito Sudaka – Christian Oyarz\u00fan<\/a><\/p>\n\n\n\n
Github: sitio de comunidad de programadores – Github<\/a>
Gist de Github: 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.
Openprocessing: Sitio comunitario de sketches de Processing<\/a>
Daniel Shiffman: Sitio personal<\/a>
Tutoriales: en Processing.org<\/a>
Curso en video: Hello Processing<\/a>
En Espa\u00f1ol: Tutorial Processing<\/a><\/p>\n\n\n\n
Libro: Hola Mundo con Processing<\/a><\/p>\n\n\n\n
IDE (integrated development environment).![\"\"](\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-21.02.20.png\")
<\/li><\/ul>\n\n\n\n
<\/li>
<\/li>
. rect(10, 10, 50, 60):
En esta funci\u00f3n, todos los n\u00fameros que van dentro de los par\u00e9ntesis, son sus par\u00e1metros.
<\/li>
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: “rect();”)
<\/li>
Se encuentra en el Men\u00fa: Herramientas –> Selector de Color<\/li><\/ul>\n\n\n\n![\"\"](\"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/wp-content\/uploads\/2020\/09\/Captura-de-pantalla-2020-09-29-a-las-20.38.03.png\")
<\/figure>\n\n\n\n
seg\u00fan distintos modos de color, para luego aplicar esos valores en sus c\u00f3digos:
[H, S, B] Modo de color de tres canales Hue\/Tono, Saturation\/Saturaci\u00f3n, Brightness\/Brillo
[R,G,B] Modo de color de tres canales Red\/Rojo, Green\/Verde, Blue\/Azul
[HEX] Valor hexadecimal. Ej.- #CCCCCC
M\u00e1s sobre modos de color \u2026<\/a>
Color en Processing:Link<\/a><\/p>\n\n\n\n
Comenzamos dibujando un punto (pixel) situado en la ubicaci\u00f3n x:50, y:50 del lienzo de Processing.<\/p>\n\n\n\n
\/\/<<— esto es un comentario
size(600, 600);
background(250, 5, 246);\/\/rgb
\/\/point (100, 100);
line(width\/2, height\/2, 300, 309);
rectMode(CORNER);
rect(width\/2, height\/2, 200, 200);
fill(60);
rectMode(CENTER);
rect(width\/2, height\/2, 200, 200);
\/\/Modelos de color:
\/\/HSB: Hue, saturation, brightness
\/\/HEX: #FA05F6<\/p>\n\n\n\n
En este segundo sketch, usaremos las funciones rect, ellipse, stroke, line, fill y colorMode entre otras. Con estas funciones, ya se puede tener una idea de las posibilidades de dibujo que da Processing.<\/p>\n\n\n\n
\/\/colorMode(HSB); \/\/funci\u00f3n que indica el modo de color en que operar\u00e1 el programa
\/\/background(125); \/\/funci\u00f3n que define el color del lienzo
rectMode(CORNER); \/\/funci\u00f3n que define el punto de inicio de dibujo del “rect”
rect(30, 30, 50, 200, 20); \/\/funci\u00f3n para dibujar cuadrados o rect\u00e1ngulos. El cuarto par\u00e1metro indica la curvatura de las esquinas.
ellipse(30, 80, 40, 40); \/\/funci\u00f3n que sirve para dibujar elipses y c\u00edrculos
stroke(217, 15, 245); \/\/funci\u00f3n que define el grosor de las l\u00edneas
line(0, 0, 500, 500); \/\/funci\u00f3n que sirve para dibujar una l\u00ednea
fill(15, 181, 245, 80); \/\/funci\u00f3n que se usa para definir el color de relleno de otras funciones (por ej. rect, ellipse, triangle, etc.)
ellipseMode(CENTER); \/\/ funci\u00f3n que define el punto de inicio de dibujo de una elipse
ellipse(230, 280, 100, 140);<\/p>\n\n\n\n
Antes de programar, bocetear y prototipar<\/strong>
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
Programar un dibujo que puede ser creado por ustedes de cero, o bien ser una interpretaci\u00f3n en c\u00f3digo de alg\u00fan objeto o imagen elegida por ustedes.
Recuerden planificar el dibujo antes de realizarlo a trav\u00e9s de un bosquejo en papel milimentrado u hojas de matem\u00e1ticas.
Finalmente los resultados (bosquejo, referente (si lo hay), c\u00f3digo y resultado visual) deber\u00e1n quedar en sus bit\u00e1coras para ser revisados el p\u00f3ximo martes.<\/p>\n\n\n\n
https:\/\/processing.org\/reference\/https:\/\/processing.org\/reference\/<\/a><\/p>\n\n\n\n
Matilde P\u00e9rez
Mondrian
Michaell Noll
Vera Mollnar
Charles Csuri<\/p>\n\n\n\n
\n\n\n\n.<\/a><\/h2>\n\n\n\n
Clase 3<\/h2>\n\n\n\n
Para la pr\u00f3xima sesi\u00f3n, revisar y ejercitar el c\u00f3digo a partir de lo siguiente:<\/strong>
. Video-c\u00e1psulas<\/strong>
1) Funciones beginShape y endShape; vertex y radianes<\/a>
2) Rotate, translate, beginShape, endShape, vertex, pushMatrix, popMatrix<\/a><\/p>\n\n\n\n
1) Libro Getting Started with Processing:
Pg.13 a 33 (dibujar parte de una elipse, radianes y grados, propiedades de l\u00ednea\/trazo, modos de dibujo, color, beginShape, endShape, vertex. Tri\u00e1ngulo, quad, rect, ellipse, arc).
2) Libro Hola Mundo
Pg.23 a 35 (Cap\u00edtulo 2, Dibujo).
. Ejemplo con modificadores (rotate, translate, scale)<\/strong><\/p>\n\n\n\n