Computación y Robótica 2º ESO - Tema 2.- Programación con Processing

 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);

  
EJERCICIO 1.- FIGURAS GEOMÉTRICAS: realizar estas figuras:

size (250,250);                                       // Ventana 300x300
background (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

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.

Empezamos a introducir el código línea a línea:

Dibujamos el triángulo de la parte superior izquierda

 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:

Los dos siguientes instrucciones dibujan los círculos correspondientes a las luces del semáforo:

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:

Previamente hemos creado el bloque void draw para dibujar la luz de cada color durante un tiempo.

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);

}