Taller complementario 2020 / Programación

Clase 1

En esta sesión se presentaron las y los estudiantes del curso, comentando de los talleres que provienen y qué los llevó a elegir este complementario

Programa del curso: https://www.u-cursos.cl/artes/2020/2/TCOM121-620/12/datos_curso/

Calendario del curso: https://docs.google.com/spreadsheets/d/1p-4THvjg6ErgodgTD8IaH-9TdMPv_qWnK8nIKsAg7Mo/edit?usp=sharing
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

Bibliografía: https://www.u-cursos.cl/artes/2020/2/TCOM121-620/12/bibliografia/

Repositorio: https://drive.google.com/drive/folders/1cT7IqvooQn-ViQmgpaPxQ9ceHDeF5Vyl?usp=sharing

Clase 2

Parte 1: contexto
En esta sesión revisamos y comentamos de la página 1 a la 7 de la presentación Qué son los Nuevos Medios y la historia de la invención del computador
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

Parte 2: Programación en Processing
Qué es Processing
Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, de fácil utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño 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
– Design by numbers
– Sitio web oficial de Processing

Fexibilidad
Processing consiste en muchas herramientas que trabajan juntas en diferentes combinaciones. Como resultado, puede ser usado para programación rápida, o bien para una investigación acuciosa.
Debido a que un programa desarrollado en Processing puede ser tan corto como una línea de código, o tan largo como miles de líneas, hay espacio para el crecimiento y la variación. Más de 100 librerías pueden extender Processing a dominios más alejados, incluyendo sonido, computer vision o fabricación digital:
Maldito Sudaka – Christian Oyarzún

Otros recursos sugeridos
Github: sitio de comunidad de programadores – Github
Gist de Github: Documento tutorial para publicar en Gist.. Seguir hasta el punto d solamente, lo que sigue sólo es útil si se quiere publicar el código en un sitio desarrollado en WordPress.
Openprocessing: Sitio comunitario de sketches de Processing
Daniel Shiffman: Sitio personal
Tutoriales: en Processing.org
Curso en video: Hello Processing
En Español: Tutorial Processing

Contenidos vistos en la clase de hoy: Pg. 1 a 36
Libro: Hola Mundo con Processing

  • Ambiente de programación:
    IDE (integrated development environment).
  • Funciones: las funciones son líneas de código pre-escritas en Processing (o cualquier otro lenguaje de programación) y que tienen la “función” de ejecutar una instrucción específica para que, quien esté programando, no tenga que escribir todo desde cero. Cualquier programador podrá desarrollar sus propias funciones según lo vaya necesitando. Por ejemplo, la función “rect” incluida en Processing tiene la función de dibujar un rectángulo según las instrucciones dadas.
  • Sintaxis: término que viene de la lingüística 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ámetros que debe tener una función y el orden en que van escritos. También define que Processing sea ‘case-sensitive’, lo que quiere decir que el programa sí discrimina entre mayúsculas y minúsculas, por lo que hay que poner cuidado de usarlas correctamente.
  • Parámetros/Argumentos: son los valores que se indican luego de una función. Por ejemplo:
    . rect(10, 10, 50, 60):
    En esta función, todos los números que van dentro de los paréntesis, son sus parámetros.
  • Ayuda para uso de funciones / sintaxis / parámetros en Processing:
    Para acceder a la ayuda de Processing (también llamada Referencias), se debe escribir una función en el IDE y luego hacer click derecho sobre la palabra (por ejemplo: “rect();”)
  • Selector de color en Processing
    Se encuentra en el Menú: Herramientas –> Selector de Color

En esta herramienta del programa Processing podrán identificar los colores y sus códigos/valores
según distintos modos de color, para luego aplicar esos valores en sus códigos:
[H, S, B] Modo de color de tres canales Hue/Tono, Saturation/Saturación, Brightness/Brillo
[R,G,B] Modo de color de tres canales Red/Rojo, Green/Verde, Blue/Azul
[HEX] Valor hexadecimal. Ej.- #CCCCCC
Más sobre modos de color …
Color en Processing:Link

Primer Sketch realizado en clases (para ver el resultado de este código, copiar y pegar en Processing)
Comenzamos dibujando un punto (pixel) situado en la ubicación x:50, y:50 del lienzo de Processing.

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é coordenadas dibujar pixeles. Vimos también cómo 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íneas de código que aparecen primero aparecerán en el dibujo como si estuvieran debajo de los dibujos que se programan en las líneas posteriores de código).

Ejemplo 1
//<<— 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

Ejemplo 2
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.

size(500, 500);
//colorMode(HSB); //función que indica el modo de color en que operará el programa
//background(125); //función que define el color del lienzo
rectMode(CORNER); //función que define el punto de inicio de dibujo del “rect”
rect(30, 30, 50, 200, 20); //función para dibujar cuadrados o rectángulos. El cuarto parámetro indica la curvatura de las esquinas.
ellipse(30, 80, 40, 40); //función que sirve para dibujar elipses y círculos
stroke(217, 15, 245); //función que define el grosor de las líneas
line(0, 0, 500, 500); //función que sirve para dibujar una línea
fill(15, 181, 245, 80); //función que se usa para definir el color de relleno de otras funciones (por ej. rect, ellipse, triangle, etc.)
ellipseMode(CENTER); // función que define el punto de inicio de dibujo de una elipse
ellipse(230, 280, 100, 140);


Antes de programar, bocetear y prototipar
Bocetear puede ser definido como una manera de pensar. El objetivo básico es explorar la mayor cantidad de ideas en poco tiempo. Cuando se programa, es muy común que se hagan bocetos iniciales para luego llevarlos a código. Ideas para la animación y la interacción se bocetean normalmente como si fueran un storyboard con anotaciones. Luego de hacer algunos sketches de programación, se seleccionan las mejores ideas y son combinadas en prototipos. Es un proceso cíclico de hacer, probar y mejorar … y que se combina entre papel y pantalla.

Ejercicio a realizar para la próxima semana
Programar un dibujo que puede ser creado por ustedes de cero, o bien ser una interpretación en código de algún objeto o imagen elegida por ustedes.
Recuerden planificar el dibujo antes de realizarlo a través de un bosquejo en papel milimentrado u hojas de matemáticas.
Finalmente los resultados (bosquejo, referente (si lo hay), código y resultado visual) deberán quedar en sus bitácoras para ser revisados el póximo martes.

Referencias de Funciones en Processing de las funciones vistas en clase: 2DPrimitives y Color
https://processing.org/reference/https://processing.org/reference/

Algun@s referentes sugeridos para trabajar en su dibujo-encargo:
Matilde Pérez
Mondrian
Michaell Noll
Vera Mollnar
Charles Csuri

Video de apoyo clase 1


.

Clase 3

En esta sesión, revisamos el portafolio de Cristóbal e Isabel. A partir de esto, comentamos algunos referentes (anotados más abajo). Revisamos también los ejercicios desarrollados para esta semana, donde debieron elegir la obra de alguna o algún artista para reinterpretarla a través del código.

Para la próxima sesión, revisar y ejercitar el código a partir de lo siguiente:

. Video-cápsulas
1) Funciones beginShape y endShape; vertex y radianes
2) Rotate, translate, beginShape, endShape, vertex, pushMatrix, popMatrix

. Revisar en la bibliografía
1) Libro Getting Started with Processing:
Pg.13 a 33 (dibujar parte de una elipse, radianes y grados, propiedades de línea/trazo, modos de dibujo, color, beginShape, endShape, vertex. Triángulo, quad, rect, ellipse, arc).

2) Libro Hola Mundo
Pg.23 a 35 (Capítulo 2, Dibujo).

. Ejemplo con modificadores (rotate, translate, scale)

Diagrama radianes



Referencias mencionados en clases a partir de los portafolios:
Vanevar Bush: As we may think, Memex
The Pillow Book – Peter Greenaway
Nam June Paik, Chroma-key
Guy Sherwin: https://youtu.be/vd0zOtwYOgQ
Maya Gehrig: https://youtu.be/5k-0vnKknqc
Tesis Nicolás Alvarado Azolas: https://drive.google.com/file/d/1fA8dNoBR7Hb_lKKE3WAN7r7bpqK04med/view?usp=sharing
Tesis Benjamín Ruz: https://www.bibliotecadigital.uchile.cl/permalink/56UDC_INST/llitqr/alma991007484161903936
Libros en torno a lo musical: Oliver Sacks / Musicophilia; Daniel J. Levitin / This is your Brain on Music.

Referencia histórico-artística: Cybernetic Cerendipity
1era exposición de arte y tecnología https://monoskop.org/images/2/2a/Reichardt_Jasia_ed_Cybernetic_Serendipidity_The_Computer_and_the_Arts_1969.pdf


Clase 4

Temas de hoy:

  • Nuevos contenidos Processing (más adelante en detalle):
    a) Variables y tipos de datos y tipos de datos
    b) Variable de sistema: width, height
    c) Iteración: ciclo for
  • Encargo #1: Tener bitácora implementada desde ahora en adelante para la entrega de sus encargos y seguimiento de procesos relativos a este taller. Las bitácoras deben ser compartidas con todos los integrantes del curso. Pueden ser desarrolladas en una libreta de Evernote o en una carpeta del Drive.
  • Encargo #2: Programar, a partir de los contenidos vistos la semana pasada y la clase de hoy, un código que dé como resultado un dibujo autoral. El ejercicio debe ser presentado en la bitácora (proceso, código finalizado y dibujo).

a) Variables y tipos de datos
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ácilmente mientras el programa esté corriendo.


Hasta ahora, dibujaríamos la siguiente imagen, con el código que sigue …

—————inicio código——————
size (480, 120);
ellipseMode(CORNER);
ellipse(20, 40, 60, 60);
ellipse(120, 40, 60, 60);
ellipse(220, 40, 60, 60);
——————fin código——————-

Cuando hay elementos que se repiten en un código, es preferible usar variables (… que es el 99% de las veces).
—————–inicio código——————–
size (480, 120);
int y = 60;
int d = 80;
ellipse(75, y, d, d);
ellipse(175, y, d, d);
ellipse(275, y, d, d);
—————–fin código——————–

En este código se puede ver cómo a la variable ‘y’ que es un entero, se le asigna el valor 60 y a ‘d’ el valor 80. Si se cambia el valor de cualquiera de estas variables, cambiará el tamaño de todas las elipses, porque todas tienen el mismo valor en ‘y’; y en ancho y alto ‘d’.
Las variables deben nombrarse de manera que se pueda entender a qué se refieren. En el ejemplo anterior, se utilizó el nombre ‘d’ para la variable diámetro.
Además, al definir una variable, se debe indicar qué de qué tipo es:
int(un valor entero): por ejemplo 7; 7; 20; 100
float(decimales): por ejemplo 5,1; 6,6; 8,2
Otros tipos de datos: boolean, byte, char, color, double, float, long

b) Variable de sistema: width, height
Con las variables de Processing width y height, podemos relacionar todo lo que se dibuje en relación al ancho y alto de la ventana en donde se visualiza el programa.

—————–inicio código——————–
size (480, 120);
line (0, 0, width, height);
line (width, 0, 0, height);
ellipse (width/2, height/2, 60, 60);
—————–fin código——————–

fill(255);
ellipse(width/2, height/2, random(50), random(50));
—————–fin código———————

c) Iteración: ciclo for
Guía breve ciclo for http://etab.cl/clases/uchile/obj-tec/pdfs/clase_ciclo-for_processing.pdf

——————-inicio código—————
size(600, 600);
background(random(100));
stroke(23, 230, 21);

//iteración – ciclo for
for (int lineax=0; lineax<width; lineax=lineax+20) {
line(0, lineax, width, lineax);
}
for (int lineay=0; lineay<height; lineay=lineay+20) {
line(lineay, 0, lineay, height);
}

Más información y otros ejemplos de “ciclo for” acá (segunda mitad de la página) Fuente: Getting Started with Processing (pg.61 a 67 del pdf (pg. 40 a 46 en la numeración del libro físico).*

Para exportar como archivos las imágenes generadas en Processing se puede usar la función save():
https://processing.org/reference/save_.html

Video clase 4 (funciones width y height, ciclo for)

**Sketches/ejemplos revisados en la clase del día 20 de Octubre 2020:
https://drive.google.com/drive/folders/1Ti3NZqz0N26IbJungoQ5JZEpw35kVFGP?usp=sharing


Encargo
Para la semana que viene, el encargo es el de hacer un tríptico con dibujos hechos en Processing. Con esto la idea es ir desarrollando ejercicios que comprendan también ciertas operaciones artísticas que tienen que ver con la composición, la relación conceptual y/o formal que conlleva el construir un tríptico. Pueden reutilizar / relacionar los dibujos que ya han hecho, modificarlos, o bien, comenzar de cero.
Por otra parte, la idea es que monten (virtualmente) estas tres imágenes de manera que puedan ser visualizados como tríptico (por ejemplo, haciendo un pantallazo de cada imagen y montándolas una al lado de la otra en un lienzo en Photoshop).
Esta imagen / tríptico deberá ir en sus blogs, junto con sus respectivos códigos.


Clase 5
Referencias en código y gráfica

Cybernetic Serendipity – Jasia Reichardt
https://monoskop.org/Cybernetic_Serendipity
https://monoskop.org/images/2/2a/Reichardt_Jasia_ed_Cybernetic_Serendipidity_The_Computer_and_the_Arts_1969.pdf

Páginas libro Jasia Reichardt – The Computer in Art
1. Portada – pg. 29
https://www.camscanner.com/share/show?encrypt_id=MHgyZWEwYzY5&sid=73DC3926E9F440CB7K70a9UC
Alternativo:https://drive.google.com/file/d/1eOButI2p0XYZN9ctKXF85AG_A43Wet7R/view?usp=sharing

2. Pg.93 – 96
https://www.camscanner.com/share/show?encrypt_id=MHgyZWEwYzY5&sid=68DE436067FF450FT6882A4KAlternativo:https://drive.google.com/file/d/1TfyTAiyOc0JPI66q-fcF0nvl1uWJjZBa/view?usp=sharing

Grace Hertlein: Grace C. Hertlein
Roman Verostko: http://www.verostko.com/menu.html
Lilian F. Schwartz: http://lillian.com/

Sol Lewitt: http://www.proa.org/exhibiciones/pasadas/lewitt/exhibicion_fr.htmlhttp://www.proa.org/exhibiciones/pasadas/lewitt/exhibicion_fr.html

Matilde Pérez
Gustavo Poblete
http://www.artistasvisualeschilenos.cl/658/w3-article-40244.html

Cornelia Vargas: https://abstraccionsur.com/gallery/cornelia-vargas
https://culturizarte.cl/gam-exposicion-conmemora-los-100-anos-de-la-bauhaus-con-pintura-y-matematicas/
https://culturizarte.cl/wp-content/uploads/2019/09/5trg-300×169.jpg



INICIO segunda unidad

Clase 1
Referentes revisados en clases

Ei Wada (JP)
https://eiwada.com/

Lisa Park (KR)
https://www.thelisapark.com/work/eunoia

Rafael Lozano Hemmer (MX)
https://lozano-hemmer.com/

Clase 2
Movimiento

Void Setup y Void Draw
El código dentro del bloque draw(), corre desde el inicio hasta el final, luego se repite hasta que se cierra el programa presionando el botón de “stop”, o cerrando la ventana. Cada paso por draw(), se llama fotograma o frame. El frame-rate por defecto es de 60 fotogramas por segundo, pero este número puede cambiarse. Por otra parte, este número define el máximo de fotogramas que pasarán en un segundo en el programa, pero dependerá del hardware del computador si logra llegar a esa cantidad de cuadros por segundo (según capacidad de procesamiento de datos).

Ejemplo 1
void draw(){
println(“I’m drawing”);
println(frameCount);
}

En la parte inferior de la ventana de Processing verás lo siguiente:
I’m drawing
1
I’m drawing
2
I’m drawing
3
I’m drawing
4
etc. etc.

En este ejemplo, la función println() escribe el texto “I’mdrawing” seguido del número de frame actual según el conteo de la variable especial frameCount (1,2,3…). El texto aparece en la consola (el área negra al final de la ventana de edición de Processing).

Ejemplo2
Para complementar la función draw() que es iterativa, Processing tiene una función llamada setup(), que corre solamente una vez desde que el programa se inicia:

void setup(){
println(“I’m startin””);

void draw(){
println(“I’m running”);
}

Cuando este código está corriendo, debería verse lo siguiente en la consola:
I’m starting
I’m running
I’m running
I’m running
I’m running


El texto “I’m running” continúa escribiéndose en la consola hasta que el programa es detenido.

En un programa típico, el código dentro de setup() es usado para definir los valores iniciales. La primera línea es siempre la función size(), luego seguida normalmente por código que define el color, el color de línea iniciales, o quizás la carga de una imagen y fuentes. (Si no incluyes la función size(), la ventana de display será de 100 x 100 px.)

Ahora ya sabes cómo usar setup() y draw(), pero esto no es todo. Hay un tercer lugar en donde incluir código, que es fuera de estas dos funciones especiales. Se puede poner variables fuera de ellas. Si se crea una variable fuera de setup(), no puedes usarla dentro de draw(), entonces, se necesita un lugar aparte para incluir estas variables. Este tipo de variable (que se puede usar en cualquier parte del código) se llaman “globales”, porque pueden usarse globalmente en cualquier parte del código. Esto quedará más claro cuando veamos el orden en que correo el código:

1. Se declaran las variables fuera de setup() y draw().
2. Se escribe el código dentro de setup(), que correrá sólo una vez.
3. Se escribe el código dentro de dra(), que correrá continuamente.

………
Como un flipbook, la animación en la pantalla es creada a tavés del dibujo de la imagen, y luego dibujando lo mismo un poco desplazado, luego otra y otra… La ilusión del movimiento fluido se creía que era creada por la persistencia de la visión en la retina (Roget), pero ahora se sabe que es más complejo que eso (ver. acinetopsia o akinetopsia en internet).
Cuando se presenta un set de imágenes similares a una velocidad (framerate) suficiente, nuestro cerebro lo traduce como moviemiento.

Fotogramas / Frames
Para crear una animación fluida, Processing trta de correr el código dentro de draw() a un framerate de 60 cuadros por segundo. Un fotograma o frame corresponde a un paso por el draw(), y el frameRate es cuántos fotogramas se dibujan en cada segundo. Por esto, un programa que se dibuja a 60 cuadros o fotogramas por segundo, quiere decir que el programa ejecuta o corre el código entero dentro de draw() 60 veces en cada segundo.

Ejemplo 3
Para confirmar los cuadros por segundo, usa este programa y observa los valores que se imprimen en la consola (el frameRate lleva un seguimiento de la velocidad del programa):

void draw(){
println(frameRate);
}

Ejemplo4
La función frameRate() cambia la velocidad en la que corre el programa. Para ver el resultado, descomenta las diferentes versiones del ejemplo más abajo:

void setup(){
frameRate(30);
// frameRate(12);
// frameRate(2);
// frameRate(0.5);
}

Processing trata de correr el código a 60 cuadros por segundo, pero si toma más de 1/60avo de segundo para correr el método o función draw(), entonces se decrementará el frameRate. Esto debido a que la función frameRate(), solamente especifica el valor máximo. El resto dependerá de la máquina en que se está ejecutando el código.

Velocidad y dirección
Para crear un movimiento fluido, usaremos un tipo de dato llamado float (flotante). Este tipo de variable, guarda números que son decimales, por lo que proveen mayor resolución para trabajar con movimiento. Por ejemplo, cuando usamos int, lo más lento que podrías mover un frame, es un pixel cada vez (1, 2, 3, 4…), pero con la variable de tipo float, puedes moverlo más lentamente (1.01, 1.02, 1.03, 1.04, …)

Ejemplo 5
El siguiente ejemplo mueve una forma de izquierda a derecha a partir de la actualización de la variable x:

int radius = 40;
float x = -radius;
float speed = 0.5;

void setup() {
size(240, 120);
ellipseMode(RADIUS); //este modo (RADIUS), establece los dos primeros parámetros de la elipse o arco como su punto central. Luego el tercer y cuarto parámetro, corresponderá a la mitad del ancho y mitad del alto.
}

void draw() {
background(0);
x += speed; //incremementa el valor de x
arc(x, 60, radius, radius, 0.52, 5.76);
}

Cuando ejecutas este programa, notarás que la forma se mueve fuera de la pantalla hacia la derecha, ya que el valor llega a ser mayor que el tamaño de la pantalla o ventana. El valor de x continua entonces creciendo, pero la forma ya no es visible.

Hay muchas alternativas para este comportamiento. Primero, extenderemos el código de manera de mostrar cómo mover la forma en reversa hacia la izquierda de la pantalla hasta que desaparece hacia la derecha. En este caso, piensa en la pantalla como si fuera un cilindro aplanado, en donde la figura se mueve llegando hasta el final para luego volver al punto inicial.

Ejemplo 6
int radius = 40;
float x = -radius;
float speed = 0.5;

void setup() {
size(240, 120);
ellipseMode(RADIUS);
}

void draw() {
background(0);
x += speed; // Increase the value of x
if (x > width+radius) { // If the shape is off screen,
x = -radius; // move to the left edge
}
arc(x, 60, radius, radius, 0.52, 5.76);
}

——>Uso de if (condicionales)
int x = 100;
if(x > 100) { // si x es mayor que 100…
ellipse(50, 50, 36, 36); // … se dibuja la elipse. Prueba cambiar el valor de la variable a más de 100 y verás que la elipse no se dibuja.
}
—–> fin uso de if

En el ejemplo 6, en cada ciclo de draw(), el código verifica si el valor de x se ha incrementado más allá del ancho de la pantalla (más el radio de la forma). Si esto es así, volvemos el valor de x a un valor negativo, entonces si el valor sigue creciendo, entrará nuevamente por el lado izquierdo de la pantalla.

Ver el siguiente diagrama:


En el siguiente ejemplo, extenderemos el ejemplo anterior para hacer que la forma cambie de dirección cuando llegue al borde, en vez de volver a entrar por la izquierda. Para resolver esto, agregamos una nueva variable para guardar la dirección de la forma. Un valor de dirección de 1 mueve la figura hacia la derecha, y el valor -1, mueve la forma hacia la izquierda:

int radius = 40;
float x = 110;
float speed = 0.5;
int direction = 1;
void setup() {
size(240, 120);
ellipseMode(RADIUS);
}
void draw() {
background(0);
x += speed * direction;
if ((x > width-radius) || (x < radius)) {
direction = -direction; // Flip direction
}
if (direction == 1) {
arc(x, 60, radius, radius, 0.52, 5.76); // Face right
} else {
arc(x, 60, radius, radius, 3.67, 8.9); // Face left
}
}

Cuando la forma alcanza el borde, este código voltea la dirección de la figura, a través del cambio de signo de la variable de dirección (direction). Por ejemplo, si la variable de dirección es positiva, cuando la forma alcance el borde, el código la voltea a su negativo dado que el número se multiplica por -1.

Ver+ en el pdf de Getting Started with Processing.
Cap 8: Pg.103 a Pg.119
Cap 5: Pg.49 a Pg.50

Ver+ en el pdf de Processing. A programming Handbook.
Cap Control1:
Decisions / decisiones: Pg. 51 a 52 ( > ; < ; >= ; <= ; == )
Conditionals / condicionales: Pg. 53 a 56 (if/else)
Logical Operators / Operadores lógicos: Pg. 57 a 59 ( || ; && ; ! )

Ver+ en referencias del programa
ellipseMode(RADIUS); //click derecho sobre esta función para ir a la referencia.
arc(); //click derecho sobre esta función para ir a la referencia y entender los parámetros de esta función:

Registro de la clase: https://drive.google.com/file/d/1OH_wO9TQx_1CvG8sPi4fX_aJzfEwlA9e/view?usp=sharing
Cápsula último código: https://drive.google.com/file/d/1OH_wO9TQx_1CvG8sPi4fX_aJzfEwlA9e/view?usp=sharing

.

Semana de trabajo autónomo:
Carga y edición de imágenes bitmap en Processing

En la primera clase en que usamos Processing, utilizamos la función loadImage() que cargaba una imagen jpg dentro de una variable del tipo PImage.   PImage es entonces un tipo de dato como lo es int (para almacenar enteros), float (para almacenar decimales), boolean (para almacenar los valores verdadero o falso), char (para almacenar caracteres alfanuméricos), etc. PImage es un tipo de dato para almacenar imágenes.

En esta sesión, se profundizará un poco más en el uso de este tipo de variable y la manipulación de imágenes bitmap (o raster).

Como ya se sabe, la imagen digital está compuesta por pixeles. Si una imagen es de 1280 x 1024 pixeles, tendrá entonces un total de 1.310.720 pixeles, es decir, 1,3 Megapixeles.

Otro aspecto importante de una imagen digital es la profundidad de color (color depth). Si la profundidad de color de una imagen es de 1bit, cada pixel puede tener el valor de 1 ó de 0, normalmente esto representa a blanco o negro. Si la profundidad de color es 4, cada pixel puede tener uno de 16 valores. Si la PdC es de 8 bits, entonces el pixel puede tener uno de 256 valores.

test_img2_diffrentBits_good

Cuando se habla de una imagen de 24 bits, normalmente se está hablando de una imagen que tiene 8 bits en el canal rojo, 8bits en el verde y 8 bits en el azul (imagen RGB). Esto da como resultado 24 bits en total. Más información acerca de espacios de color y profundidad de color:
http://en.wikipedia.org/wiki/Color_depth
http://es.wikipedia.org/wiki/Profundidad_de_color
http://www.cambridgeincolour.com/tutorials/bit-depth.htm
http://www.cambridgeincolour.com/tutorials/digital-camera-pixel.htm
http://en.wikipedia.org/wiki/Pixel
http://es.wikipedia.org/wiki/P%C3%ADxel

Al trabajar con imágenes bitmap en Processing, recuerda que el archivo de imagen debe estar localizado en una carpeta con el nombre “data” dentro de la carpeta del Sketch que la esté llamando.
También es importante recordar que el archivo de la imagen puede ser importado a través del menú “Sketch” –> “Add File”. De esta manera, el archivo de imagen quedará localizado donde corresponde para ser llamado por la variable del tipo PImage de tu sketch.

Las extensiones de archivo de imagen aceptados por Processing son:
jpg (profundidad de color soportada: hasta 24bits, no soporta transparencia)
gif (profundidad de color soportada: hasta 8bits con transparencia de 1bit)
png (profundidad de color soportada: hasta 24bits, con transparencia de 8bits)
Recuerda optimizar la imagen en cuanto a su tamaño y resolución antes de usarla en Processing. De esta forma, no se estará sobre exigiendo al procesador.

Otra función que se utiliza al trabajar con imágenes bitmap, es image(), gracias a esta, la imagen se visualiza.

Tenemos entonces, por ahora, tres elementos importantes al momento de usar imágenes bitmap en Processing:

PImage: Tipo de dato para cargar imágenes en el programa
loadImage(): Función que carga la imagen en una variable del tipo PImage. El parámetro que va dentro de loadImage es el nombre del archivo que está cargando. Éste debe ser exáctamente igual, cuidando las mayúsculas, minúsculas y espacios entre caracteres.
image(): Función que expone (display) la imagen, la hace visible. Los parámetros que van dentro de image(), son el nombre de la variable, la ubicación x y la ubicación y. También se puede agregar a continuación el ancho y el alto, pudiendo modificar las dimensiones de la imagen original.

Quedará la estructura básica así:

Luego un ejemplo de carga de imagen que cambia su tamaño según la posición del mouse:

tint() y noTint()
A través de la función tint(); se puede cambiar el color de los pixeles en una imagen. Para hacer que una línea o bloque no sea afectado por tint, se debe escribir noTint();
En el siguiente ejemplo se puede ver la comparación entre dos imágenes, una con tint y la otra sin.

Para dar transparencia a una imagen sin cambiar el color, habrá que ajustar el primer parámetro de tint() a 255 que correspondería a blanco en el modo de color por defecto de Processing y el segundo parámetro ajustará el valor del canal alfa o transparencia.


A continuación un ejemplo que combina el uso de la función tint() para cambiar la transparencia de la imagen y la repetición de esa imagen por medio de un ‘ciclo for’.

Screen Shot 2013-09-17 at 8.30.58 PM
Screen Shot 2013-09-17 at 8.28.20 PM

Cómo se mencionó antes, las imágenes png y gif pueden guardar transparencia, por lo que si se carga una imagen con estas características en Processing, la transparencia será respetada:

get() y set()
Cuando un programa de Processing se inicia, la ventana se abre al tamaño requerido en size(). El programa gana control sobre el área de pantalla y ajusta cada valor de color para cada pixel.
La función get() puede leer el color de cada pixel en la ventana de display. Puede también tomar como referencia la ventana completa o una porción de esta. Existen tres versiones de esta versión:

get()
get(x,y)
get(x, y, width, height)

En el siguiente ejemplo sólo se usa get() sin parámetros. Esto hace que se haga una copia en la memoria de la ventana de visualización completa, como cuando uno hace un pantallazo (ImprPant) de la ventana del computador en Windows.

Screen Shot 2013-09-19 at 2.50.28 PM

PLAN 3 SEMANAS:

Esta semana(Nov24): desarrollar ejercicios de animación según lo que vimos en clases y exploración propia que puedan hacer a partir de lo aprendido antes y referencias externas

Próxima semana(Dic1): desarrollar ejercicios relacionados al trabajo con imágenes bitmap (jpg, gif, png), estos contenidos están al final del sitio web del curso baje el título rosado.

Semana subsiguiente (Dic8): desarrollar al menos 1 ejercicio en donde combinen imagen bitmap y animación. Puede ser una imagen bitmap intervenida, puede ser la animación del bitmap, etc. Pueden también integrar los contenidos vistos en las clases anteriores.

El día martes 12 de Diciembre haré una evaluación (con nota) de la cantidad y profundidad de los ejercicios que hayan desarrollado durante estas casi 3 semanas. Lo que se evaluará es la cantidad de exploración y ejercitación que desarrollen durante estas semanas.
Esto deberá verse reflejado en sus bitácoras (se evaluará a partir de estas), poniendo atención de llevar un buen registro de todos los ejercicios que hagan (ya sean fallidos o no).
Recuerden que lo más importante para esta clase es la ejercitación y el proceso, más que la obtención de grandes objetivos o códigos perfectos.
Ese día, cada uno presentará su proceso a partir de su bitácora (10 mins máximo c/u).

Entrega 3era Unidad

Fecha: 19/01/2021

Ejercicios mínimos que deben estar en la bitácora asociados a la tercera parte y final:

  1. Compilado de trabajos personales (obras, ejercicios escogidos).
  1. Referentes artísticos y, si los hay, de otro tipo
  1. Reflexión escrita
  1. Ejercicio que considere la interacción entre el código y alguna de las interfaces físicas del computador: cámara, micrófono, teclado, mouse, trackpad, etc.
  1. Además: se puede mejorar la bitácora en las secciones anteriores.

Qué se evaluará:

  1. Códigos: en cuanto a cantidad de ejercitación, exploración autónoma y autosuperación.
  2. Calidad de cada propuesta de ejercicio en base a la instrucción dada, versus el resultado.
  3. Edición de la bitácora en cuanto variedad, cantidad y calidad general de su contenido. Esta debe tener imágenes, reflexión escrita, referentes y otro material que cada un@ estime conveniente incluir para dar cuenta del proceso personal de trabajo.