TEMA2.- PROGRAMACIÓN CON PROCESSING
Processing es un lenguaje de programación de código abierto, muy potente que podemos utilizar en multitud de proyectos y precisamente ese es su fuerte, podemos utilizarlo en diferentes modos de programación, desde un modo básico hasta un modo complejo utilizando toda la potencia que nos brinda la orientación a objetos. Se utiliza para la enseñanza de la programación en proyectos multimedia, puede decirse que es un lenguaje para gráficos.
En primer lugar vamos a descargar e instalar esta entorno de programación. Para ello buscamos en el navegador la página principal de Processing.org. Este lenguaje está disponible en Linux, Windows y McOs. Entramos en descargas y bajamos el fichero en formato zip correspondiente a nuestro sistema operativo.
Extraemos los ficheros contenidos en el archivo comprimido .zip en una carpeta situada dentro del directorio "Programación", por ejemplo.Creamos un acceso directo al fichero ejecutable y lo colocamos en el escritorio para poder ejecutarlo cuando lo necesitemos.
¿Qué es Processing?
Processing es un dialecto de Java que fue diseñado para el desarrollo del arte gráfico, para las animaciones y aplicaciones gráficas de todo tipo. Desarrollado por artistas y para artistas. No necesita conexión a Internet y tampoco se programa en los servidores web de sus creadores. Solo es necesario instalarlo en un disco local.
Es una plataforma que integra entorno de desarrollo y lenguaje de programación. Es muy fácil de aprender y solo necesitamos unos minutos para empezar a programar. Es portable en memorias USB, lo cual permite usarlo en cualquier ordenador sin instalarlo.
Otra característica muy importante es la escalabilidad. Podemos combinar Processing con aplicaciones Java, en los dos sentidos, e incluso tenemos la posibilidad de portar nuestros proyectos a la web gracias a Processing.js. Solo necesitamos descargar el JS y a través de la etiqueta canvas de HTML5, hacer referencia a nuestros archivos creados con Processing, muy sencillo.
Processing nos da la posibilidad de generar un ejecutable para las diferentes plaformas Mac OS, Windows o Linux e incluso podemos desarrollar aplicaciones móviles gracias a la SDK que nos ofrecen para Android. También podemos conectar Processing con Arduino.
El entorno de desarrollo de Processing
El entrono de desarrollo es similar a la plataforma Arduino, ya que éste se nutre de Processing. Se llama PDE (Processing Development Enviroment) desarrollado en Java. Es muy sencillo y fácil de usar, ya que es una plataforma plug and play como Arduino.Vamos a realizar el primer programa con Processin. Para ello vamos a crear una ventana y en su interior vamos a dibujar un punto y una línea. Escribimos el siguiente código:
size (200,200);
point (100, 100);
line (50,50, 150,150);Ahora vamos a dibujar un cuadrado
size (300,300);
line (50,50,50,150);
line (50,150,150,150);
line (150,150,150,50);
line (150,50,50,50);
size (300,300);
line (50,50,50,150);
line (50,150,150,150);
line (150,150,150,50);
line (150,50,50,50);
EJERCICIO 1.- FIGURAS GEOMÉTRICAS: realizar estas figuras:
size (250,250); // Ventana 300x300background (256,256,120); // Color de fondo
triangle (20,20,220,20,20,220); // Dibuja un triángulo
quad (20,20,120,20,120,120,20,120); // Dibuja un cuadrilátero
rect (120,120, 120,120,20); // Dibuja un rectángulo
fill (120,10,50,150); // Rellena la figura de color
ellipse (70,70,60,60); // Dibuja una elipse
fill (120,10,50,150);
ellipse (180,180,60,60);
EJERCICIO 2.- AROS OLÍMPICOS. En esta imagen se muestra el código para obtener los aros olímpicos:
EJERCICIO 3.- CONSTRUIR UN SEMÁFORO: En este vídeo se muestra como realizar el ejercicio del semáforo:
Para realizar el semáforo tenemos que introducir el siguiente código:
int time = millis(); // Ponemos el crono a cero
El resultado debe ser una ventana donde nos aparece el semáforo dibujado con triángulos, líneas, círculos y rectángulos. Al iniciar se enciende el color verde durante 5 segundos, después se enciende el ámbar durante 3 segundos y se apaga el verde. Y por último se apaga el ámbar y se enciende el rojo durante 6 segundos. Y se vuelve a repetir el ciclo de nuevo.
void setup() {
size (400,400); // Creamos una ventana de 400x400 pixeles
rect(120,20,120,360); // Dibujamos un rectángulo
triangle(20,20,120,20,120,120); // Triángulo en la parte superior izquierda
triangle(240,20,340,20,240,120); // Triángulo en la parte superior derecha
triangle(20,140,120,140,120,240); // Triángulo en la parte central izquierda
triangle(240,140,340,140,240,240); // Triángulo en la parte central derecha
triangle(20,260,120,260,120,350); // Triángulo en la parte inferior izquierda
triangle(240,260,340,260,240,350); // Triángulo en la parte inferior derecha
fill(0,0,0); // Ponemos el relleno del fondo en negro
ellipse (180,80,100,100); // Dibujamos el círculo superior
ellipse (180,200,100,100); // Dibujamos el círculo central
ellipse (180,320,100,100); // Dibujamos el círculo inferior
}
void draw() {
int crono = millis()-time; // Tiempo transcurrido
if (crono>0 && crono < 5000) verde(); //Encendido luz verde 5 segundos
if (crono>5000 && crono < 8000) ambar(); // Encendido luz ambar 3 segundos
if (crono>8000 && crono < 14000) rojo(); // Encendido luz roja 6 segundo
if (crono>14000) time=millis(); // Reiniciamos el tiempo
}
void rojo() {
fill(255,0,0);
ellipse (180,80,100,100);
fill(0,0,0);
ellipse (180,200,100,100);
//fill(0,250,0);
fill(0,0,0);
ellipse (180,320,100,100);
}
void ambar() {
fill(0,0,0);
ellipse (180,80,100,100);
fill(255,255,0);
ellipse (180,200,100,100);
//fill(0,250,0);
fill(0,0,0);
ellipse (180,320,100,100);
}
void verde() {
fill(0,0,0);
ellipse (180,80,100,100);
fill(0,0,0);
ellipse (180,200,100,100);
//fill(0,250,0);
fill(0,255,0);
ellipse (180,320,100,100);
}
El resultado debe ser una ventana donde nos aparece el semáforo dibujado con triángulos, líneas, círculos y rectángulos. Al iniciar se enciende el color verde durante 5 segundos, después se enciende el ámbar durante 3 segundos y se apaga el verde. Y por último se apaga el ámbar y se enciende el rojo durante 6 segundos. Y se vuelve a repetir el ciclo de nuevo.
El triángulo de la parte superior izquierda se hace con la instrucción:
triangle(240,20,340,20,240,120);
Los siguientes triángulos corresponden a la parte central del semáforo:
Y dibujamos los triángulos de la parte inferior, completando el dibujo del semáforo:
Ahora tenemos que dibujar los círculos de cada una de las luces del semáforo. Ejecutamos una instrucción fill (0,0,0); para que rellene el fondo de color negro:
Solo nos queda rellenar cada círculo con el color correspondiente y darle un tiempo apagado y encendido:
Vamos a crear unas llamadas a la función verde en primer lugar para que encienda esta luz durante 5 segundos:
EJERCICIO 4.- DIBUJAR LA BANDERA DE LA UNIÓN EUROPEA.
En la imagen se muestra una captura del código parcial para obtener la bandera de Europa:
void setup() {
size(640, 400); / /Creamos la ventana donde irá la bandera de Europa
}
void draw() {
background(0,0,250);
fill (255,255,255);
ellipse(320,200,300,300);
fill (0,255,255);
ellipse (320,200,2,2);
line (320,200,320,30);
line (320,200,470,200);
line (320,200,320,350);
line (320,200,170,200);
fill (255,255,0);
star(320, 50, 15, 35, 5); //Superior
star(470, 200, 15, 35, 5);//Derecha
star(320, 350, 15, 35, 5);//Inferior
star(170, 200, 15, 35, 5);//Izquierda
star(450, 125, 15, 35, 5);//1C X=[150*cos(30º)]=130+320=450 Y=150*sen(30)=75-200=125
star(450, 275, 15, 35, 5);//1C X=[150*cos(30º)]=130+320=450 Y=150*sen(30)=75+200=275
star(395, 70, 15, 35, 5);//2C X=[150*sin(30º)]=75+320=395 Y=150*cos(30)=130-200=70
star(395, 330, 15, 35, 5);//2C X=[150*sin(30º)]=75+320=395 Y=150*cos(30)=130+200=330
star(395, 70, 15, 35, 5);//3C X=[150*sin(30º)]=75+320=395 Y=150*cos(30)=130-200=70
//star(395, 50, 15, 35, 5);
//star(450, 255, 15, 35, 5);
//star(395, 310, 15, 35, 5);
}
// La función estrella permite crear una estrella de diferentes formas
void star(float x, float y, float radius1, float radius2, int npoints) {
float angle = TWO_PI / npoints;
float halfAngle = angle/2.0;
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
float sx = x + cos(a) * radius2;
float sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
