Introducción a Processing
Sesión 1 @ 25/10/10
Qué es Processing

Es un lenguaje de programación y un ambiente
de desarrollo que permite crear imágenes,
animaciones y p...
Qué se puede hacer con Processing

Dibujar en 2 y 3 dimensiones

Trabajar con imagen, sonido y video

Crear juegos y pr...
Descarga
• Lo primero es descargar Processing:
http://processing.org/download/
• Processing es multiplataforma y hay versi...
Instalación y Ejecución
• Linux y Windows: Descomprimir el archivo,
copiando la carpeta que contiene en cualquier
lugar qu...
Interfaz
• Barra de herramientas
(Run, Stop, New,
Open, Save, Export)
• Pestañas
• Editor
• Área de mensajes
• Consola
El primer programa
• En el editor de texto escribir lo siguiente:
ellipse(50,50,80,80);
• Hacer click en el botón Run (Ctr...
Algunas figuras 2D
• ellipse(x,y,width,height);
• rect(x,y,width,height);
• line(x1,y1,x2,y2);
• poing(x,y,)
• triangle(x1...
Trabajando con color
• Escala de grises: 0 = negro, 255 = blanco
fill(100);
ellipse(50,50,80,80);
• Color RGB: Se convinan...
Trabajando con color
• Tanto en escala de grises como en color RGB
es posible trabajar con transparencias con el
canal alp...
Funciones básicas
• setup – Es la primer función que se ejecuta.
Aquí se debe configurar el comportamiento del
sketch, ini...
setup y draw
void setup() {
size(200,200);
smooth();
background(128,0,50);
}
void draw() {
strokeWeight(10);
ellipse(100,1...
Un poco de interactividad
void setup() {
size(250,400);
smooth();
}
void draw() {
ellipse(mouseX,mouseY,40,40);
}
Taller de Processing Sesion 1 @ 25-10-10
Upcoming SlideShare
Loading in …5
×

Taller de Processing Sesion 1 @ 25-10-10

1,944 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,944
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Taller de Processing Sesion 1 @ 25-10-10

  1. 1. Introducción a Processing Sesión 1 @ 25/10/10
  2. 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. 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. 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. 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. 6. Interfaz • Barra de herramientas (Run, Stop, New, Open, Save, Export) • Pestañas • Editor • Área de mensajes • Consola
  7. 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. 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. 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. 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. 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. 12. setup y draw void setup() { size(200,200); smooth(); background(128,0,50); } void draw() { strokeWeight(10); ellipse(100,100,80,80); }
  13. 13. Un poco de interactividad void setup() { size(250,400); smooth(); } void draw() { ellipse(mouseX,mouseY,40,40); }

×