1. Introducción a Processing
Sesión 1 @ 25/10/10

2. Qué es Processing

Es un lenguaje de programación y un ambiente
de desarrollo que permite crear imágenes,
animaciones y programas interactivos.

Por su sencillez es un lenguaje ideal para
aprender a programar

3. Qué se puede hacer con Processing

Dibujar en 2 y 3 dimensiones

Trabajar con imagen, sonido y video

Crear juegos y programas interactivos
Algunos ejemplos se pueden ver en:
http://processing.org/exhibition/

4. Descarga
• Lo primero es descargar Processing:
http://processing.org/download/
• Processing es multiplataforma y hay versiones
disponibles para Linux, Windows y Mac OS X

5. Instalación y Ejecución
• Linux y Windows: Descomprimir el archivo,
copiando la carpeta que contiene en cualquier
lugar que se desee. Ejecutar el archivo
processing
• Mac OS X: El archivo descargado es *.dmg,
basta con arrastrarlo hacia cualquier carpeta y
ejecutarlo

6. Interfaz
• Barra de herramientas
(Run, Stop, New,
Open, Save, Export)
• Pestañas
• Editor
• Área de mensajes
• Consola

7. El primer programa
• En el editor de texto escribir lo siguiente:
ellipse(50,50,80,80);
• Hacer click en el botón Run (Ctrl + R)
• El resultado es un círculo con
centro en (50,50), con 80 pixeles
de alto y 80 de ancho

8. Algunas figuras 2D
• ellipse(x,y,width,height);
• rect(x,y,width,height);
• line(x1,y1,x2,y2);
• poing(x,y,)
• triangle(x1,y1,x2,y2,x3,y3);

9. Trabajando con color
• Escala de grises: 0 = negro, 255 = blanco
fill(100);
ellipse(50,50,80,80);
• Color RGB: Se convinan 3 colores con escala
del 0 al 255, 0 = negro, 255 = canal de color
fill(255,0,0);
ellipse(50,50,80,80);

10. Trabajando con color
• Tanto en escala de grises como en color RGB
es posible trabajar con transparencias con el
canal alpha
fill(75,50);
ellipse(40,60,40,40);
fill(255,0,0,50);
ellipse(65,40,40,40);

11. Funciones básicas
• setup – Es la primer función que se ejecuta.
Aquí se debe configurar el comportamiento del
sketch, inicializar variables, etc.
• draw – Es el bucle principal de Processing.
Esta función es la que dibuja lo que se ve en
pantalla.

12. setup y draw
void setup() {
size(200,200);
smooth();
background(128,0,50);
}
void draw() {
strokeWeight(10);
ellipse(100,100,80,80);
}

13. Un poco de interactividad
void setup() {
size(250,400);
smooth();
}
void draw() {
ellipse(mouseX,mouseY,40,40);
}