Esta presentación fue preparada para Digital Invaders, un escuela de creatividad e interactividad. Es la primera parte de un curso de programación y prototipos.
Esta parte ofrece una introducción a la programación. Comienza discutiendo como la programación y las artes comenzaron a fusionarse. Hablamos de las personas claves en este desarrollo. Luego compartimos trabajos modernos que mezclan tecnología y arte. Finalmente comenzamos a programar usando Processing como lenguaje de programación e hicimos ejercicios de arte y código.
19. • Aprender a programar
• Proyecto: hacer una aplicación de arte generativo.
• Aprender a prototipar
• Proyecto: hacer un prototipo para el Watch.
Objetivos
29. • 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.
30. • 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.
44. 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 …
123456789…
(6, 2)
(4, 6)
(0, 0)
48. 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
49. 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)
52. 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
53. 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)
54. 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
55. 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
56. 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”.
57. 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”.
58. 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
59.
60. 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.