Embed Size (px)
Citation preview
Programming and Prototyping
Week 2
Richard Kaufman@sparragus
Primero que nada: Lo que nos gusta.
Lo que nos gustaTener un ambiente de trabajo sano y respetuoso.
First person shooter @andrei
Lo que nos gustaRodearnos de excelencia y talento.
Y lo hizo de nuevo @ivandelrio
Lo que nos gustaCrear una sana competencia basada en nuestro trabajo.
Lo que nos gustaBásicamente lo que nos gusta es divertirnos
Hipster Hacker Hustler
@
Hacemos ideas que hackean realidades
• Aprender a programar
• Proyecto: hacer una aplicación de arte generativo.
• Aprender a prototipar
• Proyecto: hacer un prototipo para el Watch.
Objetivos
Código y las artes
Ada Lovelace
Alan Turing
Arte conceptual
Proposal for a Wall Drawing, Information Show, 1970
Sol LeWitt
Cloud Piece, 1963
Yoko Ono
Arte generativo
¿Por qué programar?
• Para ser más rápido
• If initial production takes one-tenth the time it would take to execute the work by hand, then the artist can create ten versions in the same amount of time. [1]
• Para sobre pasar los límites de las herramientas que ya tenemos.
• “An intellectual and active creative partner that, when fully exploited, could be used to produce wholly new art forms and possibly new aesthetic experiences.” -A. Michael Noll [2]
¿Por qué programar?
[1] Reas, Casey, and Chandler McWilliams. Form+Code in Design, Art, and Architecture. 1st edition. New York: Princeton Architectural Press, 2010. p.25[2] Noll, A. Michael, “The Digital Computer as a Creative Medium,” IEEE Spectrum, Vol. 4, No. 10, (October 1967), pp. 89-95.
• Para crear nuevo medios
- “Today we’re beginning to realize that the new media aren’t just mechanical gimmicks for creating worlds of illusion, but new languages with new and unique powers of expression.” -Marshall McLuhan [1]
¿Por qué programar?
[1] Edmund Snow Carpenter and Marshall McLuhan, Explorations in Communication: An Anthology (Boston, MA: Beacon Press, 1960), 2.
Ejemplos
Richard
kaufman-sans
Digital Invaders
pixelated
pixelated
Processing
Ejemplos
Kyle McDonaldScramble SuitSharing Faces
¿QUÉ ES PROGRAMACIÓN?
COORDENADAS
X & Y
1. Definimos una posición usando coordenadas en (x, y).
2. La esquina superior izquierda es nuestro origen.
1. La coordenada es (0, 0)
3. Los números en X crecen hacia la derecha.
4. Los números en Y crecen hacia abajo.
1 2 3 4 5 6 7 8 9 …
1 2 3 4 5 6 7 8 9
…
(6, 2)
(4, 6)
(0, 0)
COORDENADAS
DIBUJANDO UN RECTÁNGULO
1. rect(2, 3, 5, 3);
1 2 3 4 5 6 7 8 9 …
1 2 3 4 5 6 7 8 9
…
5
3
(2, 3)
x y ancho alto
NUESTRO PRIMER PROGRAMA
PASOS
1. Abre Processing.
2. Escribe este código.
3. Dale al botón de play.
NUESTRO PRIMER PROGRAMA
¿QUÉ PASÓ?
1. size(600, 400);
• Define el tamaño del canvas.
• Tenemos que escribir dos números, o parámetros.
• Ancho del canvas.
• Alto del canvas.
600 pixeles
400 px
NUESTRO PRIMER PROGRAMA
¿QUÉ PASÓ?
1. size(600, 400);
2. rect(100, 150, 320, 200);
• Dibuja un rectángulo.
• Tiene 4 parámetros.
• Los primeros dos definen la posición dentro del canvas.
• Los últimos dos definen el tamaño del rectángulo.
150 px (y-axis)
100 px (x-axis)
320 px (ancho)
200 px (alto)
DIBUJANDO UN ELLIPSE
1. Sintaxis
• ellipse(x, y, ancho, alto);
MÁS FIGURAS
COLORES
TRES CARACTERÍSTICAS
1. Examinemos un canvas con una figura.
1. Trasfondo (Background)
2. Relleno (Fill)
3. Contorno (Stroke)
FILL
BACKGROUND STROKE
COLORES
255 SHADES OF GRAY
1. Canvas gris y figuras blancas… BORING!
2. Para controlar el color del canvas usamos la función background( gris ).
• El parámetro gris es un valor entre 0 y 255.
0 255127
COLORES
COLOR BY NUMBERS
1. Con las funciones background(), fill() y stroke() podemos colorear las figuras y el trasfondo.
2. La sintaxis es: fill(red, green, blue);
3. Cada valor va de 0 a 255.
4. Lo que hacemos es mezclar colores. Es parecido a usar los colores primarios para hacer colores secundarios.
186
218
85
(186, 218, 85)(R, G, B)
COLORES
COLOR BY NUMBERS
1. Para controlar los colores tenemos tres funciones.
• background(···) Controla el color del canvas
• fill(···) Controla el color que rellena una figura.
• stroke(···) Controla el color del contorno de una figura
COLORES
COLOR BY NUMBERS
1. Para controlar los colores tenemos tres funciones.
• background(···) Controla el color del canvas
• fill(···) Controla el color que rellena una figura.
• stroke(···) Controla el color del contorno de una figura
COLORES
COLOR SELECTOR
1. En vez de adivinar números y colores, es mejor usar el Color Selector que Processing ofrece.
2. Lo puedes conseguir en el menu de Processing, bajo “Tools”.
COLORES
COLOR SELECTOR
Get it? #BADA55…BAD ASS. Processing
is BAD ASS! LOOOOOL xD
1. En vez de adivinar números y colores, es mejor usar el Color Selector que Processing ofrece.
2. Lo puedes conseguir en el menu de Processing, bajo “Tools”.
REPASO
CANVAS, FIGURAS Y COLORES
1. Hasta ahora hemos aprendido como crear una ventana, la cual llamamos un canvas.
2. Aprendimos a dibujar rectángulos y elipses. Con esas funciones también podemos dibujar cuadrados y círculos.
3. Existen tres formas de colorear: background, fill y stroke.
4. Nos percatamos del orden en el que Processing dibuja.
186,218,85
84,178,216 255
INTERACTIVIDAD
MOUSEX Y MOUSEY
1. mouseX y mouseY son variables que contienen la posición del puntero.
2. Las podemos usar en la definición de una figura.
Más Ejemplos
Joshua Davis
DeadMau5
Libs Elliot
En el espíritu de colaboración y de compartir, esta presentación está licenciada bajo
Creative Commons Attribution 4.0 International License.
