Calendario: https://docs.google.com/spreadsheets/d/1Dzbw0cR-zDDuIai-7c_dmczGUnryugoF-fBX3sv_ZFs/edit?usp=sharing
Registro clases: https://drive.google.com/drive/folders/148oroTDNQozsMej9eMFKYsgJtyUZ8PXt?usp=sharing
Links bitácoras: https://docs.google.com/document/d/1n_1Y913IXKb8zjtcWXbL8utVguobkk3Ti6eqSmB0iUQ/edit?usp=sharing
Programa: https://www.u-cursos.cl/artes/2021/1/TCOM121-520/8/datos_curso/bajar_programa?id=75325&1998762957
Bibliografía: https://drive.google.com/drive/folders/1kORqK07tlXhZKaQRr0ExKN_p6mxPS3Xy?usp=sharing
Arte e instrucción
Sol Lewitt: link
Cybernetic Serendipity: pdf
Cornelia Vargas: video
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.
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, The coding train
Tutoriales: en Processing.org
Curso en video: Hello Processing
En Español: Tutorial Processing
Sesión nº1
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 una línea situada al centro 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 – Desarrollado durante la clase
size(350, 350);
background(12, 25, 240);
line(width/2, height/2, 500, 509);
fill(237, 19, 45);
strokeWeight(10);
stroke(5, 255, 90);
rect(width/2, height/2, 200, 200);
stroke(255, 176, 3);
fill(254, 255, 0);
ellipse(width/2, height/2, 200, 200);
/*
ESTO ES UN COMENTARIO
kjahlsakjhl
alkjhslfdkjahskl
askdfhakjshdfla
*/
//ajkshlfkajhsdlfkjhaslk
1er Ejercicio: A partir de las funciones revisadas en el código desarrollado en clases, proponer tres imágenes que puedan funcionar como tríptico. Usar solamente esas funciones de manera de enfocarse en la composición a partir de formas simples.
Sesión nº2
Ejemplo 2
size(500, 500); //función “tamaño” (ubicación X, ubicación Y); correspondiendo la x a la horizontal, y la Y a la posición vertical
background(125); //256 el rango va de 0 a 255;
/*
// RGB = rojo verde azul
// HSB = Hue saturation brightness
// HEX = hexadecimal
rectMode(CORNER);
rect(30, 30, 50, 200);
rectMode(CENTER);
rect(30, 30, 50, 200);
ellipse(30, 80, 40, 40); //ellipse(x, y, ancho, alto);
stroke(217, 15, 245);
line(0, 0, 500, 500);
triangle(30, 75, 40, 20, 500, 500);
*/
beginShape();
translate(200, 150);
vertex(50+200, 120+150);
vertex(100, 90);
vertex(110, 60);
vertex(80, 20);
vertex(210, 60);
vertex(50, 120);
endShape();
ellipse(100,100, 40, 40);
translate(50, 0);
ellipse(100,100, 40, 40);
rotate();
/* configuración de color
background();
fill();
noFill();
stroke();
noStroke();
*/
/*
Operadores aritméticos
+
–
*
/
*
*/
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
Dibujar un helado de cono a partir de las funciones de dibujo que hemos revisado hasta ahora.
Referencias de Funciones en Processing de las funciones vistas en clase: 2DPrimitives y Color
https://processing.org/reference/https://processing.org/reference/
Video de apoyo clase 1
Video de apoyo clase 2
Sesión nº3
En esta sesión, revisamos los avances en sus bitácoras en los procesos de programación para el ejercicio de tríptico y luego el dibujo de un helado en cono.
. Ejemplo con modificadores (rotate, translate, scale)
Diagrama radianes
_20.00.48.png.jpg)
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——————–
Video de apoyo:
Funciones beginShape y endShape; vertex,rotate, translate, pushMatrix, popMatrix
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
1era revisión de bitácora
Pauta de entrega y evaluación:
https://docs.google.com/document/d/1Hk8bHk-h5y_bcRdtKu8ZXfK4JRKXwv3TJcqLetH0N6g/edit?usp=sharing
Sesión 4
Registro de la sesión: https://drive.google.com/drive/folders/1VwaAGleRgllP0gOcWdqkHg4Y9joA_Kxk?usp=sharing
Ciclo for
Guía ciclo for: http://etab.cl/clases/uchile/obj-tec/pdfs/clase_ciclo-for_processing.pdf
Códigos desarrollados en clases:
//Tipos de variables
// int es una abreviación de integer (entero)
// float se refiere a los números de coma flotante, es decir números decimales (2,2)
// boolean: dos números, 0 ó 1
// char: abreviación de character (caracter)
// string: frases
// long: para variables grandes
/*
Código inicial, sin “ciclo for”
size(480, 120);
strokeWeight(8);
line(20, 40, 80, 80);
line(80, 40, 140, 80);
line(140, 40, 200, 80);
line(200, 40, 260, 80);
line(260, 40, 320, 80);
line(320, 40, 380, 80);
line(380, 40, 440, 80);
*/
/* EJEMPLO CICLO FOR
size (480, 120);
strokeWeight(8);
for(int i=20; i<400; i+=60){
line(i, 40, i+60, 80);
}
/*
/* OPERADORES RELACIONALES
// < // >
// ==
// !=
*/
/*
CICLO FOR GRADIENTE
size(480, 120);
for( int i=0; i<480; i++){
stroke(i/2, i/2, i/2); //stroke(4, 4, 4);
line(i, 0, i, 120);
}
*/
size(480, 120);
background(0);
//noStroke();
for (int y = 0; y<= height; y +=40) {
fill (255, 30, 70);
ellipse(0, y, 40, 40);
}
Ejercicio a resolver para la próxima sesión: desarrolla el código para la siguientes imagen, utilizando ciclo for:
Otras referencias para esta clase:
http://etab.cl/clases/uchile/obj-tec/?page_id=852
http://etab.cl/clases/uchile/obj-tec/pdfs/clase_ciclo-for_processing.pdf
https://www.u-cursos.cl/artes/2020/1/TCOM121-720/10/material_docente/bajar?id_material=3131612 (pg.61 a 67 del pdf (pg. 40 a 46 en la numeración del libro físico).*
Sesión 5
Revisamos las bitácoras evaluadas.
Jacinta hizo una inducción a Canva
Revisamos el ejercicio de Nested Loop.
Ejercicio para la próxima semana:
Revisar el libro Getting Started with Processing: Pg.40 a Pg.46 (numeración del libro y no del pdf)
* Modificar los códigos que aparecen ahí de manera de comprender el ciclo for y el ciclo for anidado.
* Desarrollar un código desde cero a partir de un ciclo for
* Revisar el siguiente código con la iteración While:
size(400, 400);
background(0);
strokeWeight(2);
stroke(255);
int x = 0;
while (x <width){
line(x, 0, x, height);
x = x+20;
}
Sesión 6
Computadores, historia
https://es.wikipedia.org/wiki/Computadoras_de_Harvard
https://www.youtube.com/watch?v=-L5RoBMKOdM
Referencia códigos para iteraciones. While, For: https://drive.google.com/drive/folders/1Ti3NZqz0N26IbJungoQ5JZEpw35kVFGP
https://www.processing.org/reference/while.html