procesiing

PROCESSING

INTRODUCCION
• ¿Qué es Processing?
Sistema que integra  un software, un lenguaje de programación 
y una metodología de enseñanza.
Busca introducir fundamentos de programación dentro de un 
contexto visual.
Herramienta de boceto para imágenes, animaciones e 
interacciones.
Herramienta de producción.

•ObjetivosProporcionar una mejor forma de escribir código que sirva de 
apoyo e inspiración para el proceso creativo.
Desarrollar una herramienta accesible, económica y de fuente 
abierta (open source).  
Distribución libre.Proyecto

• Proyecto
Iniciado en 2001 por Ben Fry y Casey Reas en MIT Media Lab.
Es usado en diversas áreas como: producción de comerciales de 
TV, videos musicales, visualización de ecosistemas, 
instalaciones, etc.

INTRODUCCION
•Sobre Processing
Lenguaje de programación.

• “Plástica Digital”
Código como materia flexible y modificable a voluntad 
del creador. 
Código como medio creativo.
“To sketch electronic media, it’s important to work
with electronic materials”

• Formato del taller

EJEMPLOS
BIG SCREENS - NYU's Interactive Telecommunications Program (Daniel Shiffman)

“White Sun”

“Caves of Wonder”by Mooshir Vahanvati

by Matt Parker

http://gizmodo.com/5110633/120‐feet‐of‐video‐art‐final‐exams‐at‐nyus‐big‐screens‐class

EJEMPLOS
"Vattenfall media facade“ (ART+COM)

http://www.artcom.de/index.php?option=com_acprojects&page=6&id=30&Itemid=144&details=&lang=en

EJEMPLOS
“Reconfigurable House“ (Adam Somlai-Fischer, Et al.)

http://house.propositions.org.uk/

TALLER•Ambiente de programación de Processing
Fundamentos
•Tipos de datos 
Variables
•Instrucciones repetitivas
for() loop
•Propiedades de la forma
fill
stroke
background
•Movimiento
Métodos setup() y draw()
•Instrucciones condicionales
if ()
•Respuesta y Estímulo
Input (mouse)
•Dibujo
Herramientas de dibujo

Processing Environment
• Instrucciones Son los elementos estructurales del programa. Todas las 
instrucciones deben finalizar con “;”
Ejemplo:
point (100,100);

• Comentarios
Son usados para hacer notas (apuntes) entre las líneas de código 
que por lo general facilitan la comprensión del programa.
Para hacer comentarios de una línea se debe iniciar el 
comentario con “//”
Ejemplo:
//int v ‐ velocidad de desplazamiento.
Para hacer comentarios que requieren más de una línea, se debe iniciar el comentario con “/*” y finalizarlo con “*/”
Ejemplo:
/* Esta instrucción dibuja 20 líneas y modifica 
el color según con la posición en el eje y */

Processing Environment
Menú
Barra de Herramientas
Pestañas
“Lienzo”

Editor de Texto

Mensajes

Consola
No. De Línea

Processing Environment
X

0

400
(180,20)

(60,40)

Y

(80,180)
(220,220)

•Tamaño del lienzo o superficie de dibujo
Para establecer el tamaño del lienzo es 
necesario definir el ancho (eje x) y el alto 
(eje y) de la superficie.
size(ancho,alto);
Ej. size(400,400);
• Coordenada 
Posición (punto) en el espacio.

(400,400)

400

Processing Environment
FORMAS BÁSICAS
• point
Ejemplo:
point (20,20);
point (x,y); 
en donde 
x = posición en el eje xy = posición en el eje y

(x,y)

• line
Ejemplo:
line (20,20,20,60);
line (20,20,60,20);
line (x,y,x2,y2);
en donde 
x = posición en el eje x donde inicia la línea
y = posición en el eje y donde inicia la línea
x2 = posición en el eje x donde termina la línea
y2 = posición en el eje y donde termina la línea

(x,y)
(x,y2)

(x,y)
Línea Vertical

(x2,y)

Línea Horizontal

ProcessingEnvironment
• rect
Ejemplo:
rect (20,20,60,35);
rect (x,y,ancho,alto); 
en donde 
x = posición inicial en el eje x
y = posición inicial en el eje y
ancho = ancho del rectángulo
alto  = alto del rectángulo

(x,y)

alto
ancho

• ellipse
Ejemplo:
ellipse (50,50,90,60);
ellipse (x,y,ancho,alto);
en donde 
x = posición en el eje x donde inicia la elipse...