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.

1. Programming and
Prototyping
Week 2

2. Richard Kaufman
@sparragus

6. Primero que nada:
Lo que nos gusta.

7. Lo que nos gustaTener un ambiente de trabajo sano y respetuoso.

8. First person shooter @andrei

9. Lo que nos gustaRodearnos de excelencia y talento.

10. Y lo hizo de nuevo @ivandelrio

11. Lo que nos gustaCrear una sana competencia basada en nuestro trabajo.

13. Lo que nos gustaBásicamente lo que nos gusta es divertirnos

15. Hipster Hacker Hustler
@

16. Hacemos ideas
que hackean
realidades

19. • Aprender a programar
• Proyecto: hacer una aplicación de arte generativo.
• Aprender a prototipar
• Proyecto: hacer un prototipo para el Watch.
Objetivos

20. Código y las artes

21. Ada Lovelace

22. Alan Turing

24. Arte conceptual

25. Proposal for a Wall Drawing,
Information Show, 1970
Sol LeWitt

26. Cloud Piece, 1963
Yoko Ono

27. Arte generativo

28. ¿Por qué programar?

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.

31. Ejemplos

32. Richard

33. kaufman-sans
Digital
Invaders

34. pixelated

35. pixelated

36. Processing

39. Ejemplos

40. Kyle McDonald
Scramble Suit
Sharing Faces

43. ¿QUÉ ES
PROGRAMACIÓN?

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)

45. COORDENADAS
DIBUJANDO UN
RECTÁNGULO
1. rect(2, 3, 5, 3);
1 2 3 4 5 6 7 8 9 …
123456789…
5
3
(2, 3)
x y ancho alto

46. NUESTRO PRIMER
PROGRAMA
PASOS
1. Abre Processing.
2. Escribe este código.
3. Dale al botón de play.

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)

50. DIBUJANDO UN ELLIPSE
1. Sintaxis
• ellipse(x, y, ancho, alto);
MÁS FIGURAS

51. COLORES
TRES CARACTERÍSTICAS
1. Examinemos un canvas con una
figura.
1. Trasfondo (Background)
2. Relleno (Fill)
3. Contorno (Stroke)
FILL
BACKGROUND STROKE

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

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.

61. Más Ejemplos

62. Joshua Davis

64. DeadMau5

65. Libs Elliot

66. richardbkaufman@gmail.com
@sparragus
Richard Kaufman

67. En el espíritu de colaboración y de compartir,
esta presentación está licenciada bajo
Creative Commons Attribution 4.0 International
License.