Programación en Processing.

Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, de fácil utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Fue iniciado por Ben Fry y Casey Reas, ambos miembros de Aesthetics and Computation Group del MIT Media Lab dirigido por John Maeda.1

Uno de los objetivos declarados de Processing es el de actuar como herramienta para que artistas, diseñadores visuales y miembros de otras comunidades ajenos al lenguaje de la programación, aprendieran las bases de la misma a través de una muestra gráfica instantánea y visual de la información. El lenguaje de Processing se basa en Java, aunque hace uso de una sintaxis simplificada y de un modelo de programación de gráficos.

Ejercicios:

1) Realiza un programa que realice la dos líneas cruzadas a 45 grados dentro de una ventana.

2) Realiza un programa que representan los aros olimpicos.

3) Realiza un programa que realice las siguientes operaciones matemáticas:

5 * 2

5 + 12

45 - 15

50 / 2

4) Crear una figura geométrica dentro de una ventana que vaya reduciendo su tamaño y degradando el color.

5) Realiza en una ventana de 500 por 500 una línea horizontales que llene la ventana completa con la función while.

int a = 0;

size (500,500);

while (a < 400){

a = a +5;

line (20,a,450,a);

}

6) Realizar la representación de dos ecuaciones de recta que se corten entre sí, como en la imagen facilitada. Para hacerlo, modifica el código de referencia que se adjunta.

size (600,600); //defino tamaño de pantalla
float x = 0;
float y =0;
float yy = 600;
background (255);
fill (0);

for (x=0; x <=600;x++)

{
ellipse (x,yy,3,3);
y =x + 10;
yy = 600-y;

}

7) Realizar la representación de dos parábolas invertida una respecto a la otra como se muestra en la figura.

Para hacerlo completa y modifica el código adjunto.
size (600,600);
background (255);
fill (0);
float x = 0;
float y = 0;
float xx = -300; // coordenada traladada al centro de la gráfica
float yy = 300; // coordenada trasladada haca abajo
for (x = -300;x<=300;x++)
{
ellipse(xx,yy,3,3);
y = 0.5 * x* x + 10 *x + 2;
x = x + 0.5;
xx = 300 + x; // traslación del eje x al centro de la gráfica
yy = 300-y; // traslación del eje y

}

Ejemplo de usos de imagenes:

Ejemplo de representación con imágenes.

size (600,600);  // crea una ventana de tamaño 600 * 600

background (255); // pongo el fondo blandca

PImage  mario;  // creo una variable para imagenes

mario = loadImage ("marioB.jpg"); // introduzco la imagen en la variable creada.

translate(200, 200); // traslado la siguiente imagen en el punto 200,200

rotate (60*PI/180); // giro la imagen, el ángilo hay que ponerlo en radianes.

image (mario, 0,0,width/4, height/4);  // pongo la imagen en la ventana en la posición 0,0 y el tamañp ancho de la ventana dividido por 4 y alto dividido por 4

Para hacer que se encienda el semáforo os dejo un ejemplo que encendería las luces de forma secuencial.

int time = millis(); //ponemos el cromo a cero

void setup (){

size (400,400);

 background(150);

}

void draw(){

int crono = millis()-time; //tiempo transcurrido

  

  if (crono > 0 && crono < 3000)verde();

  if (crono > 3000 && crono < 5000) ambar();

  if (crono > 5000 && crono < 7000) rojo();

  if (crono > 10000){ time = millis(); //reiniciamos el crono

  background(150);

  }

}

void verde(){

fill(0,255,0);

ellipse(width/2,50,50,50);

}

void ambar(){

 background(150);

fill(245,185,17);

ellipse(width/2,120,50,50);

}

void rojo(){

 background(150);

fill(245,17,63);

ellipse(width/2,200,50,50);

}8) Crea un programa que mueva una objeto en dirección vertical y otro en dirección horizontal.

Ejemplo de un programa que mueve imágenes;

float y =0;

float radio = 40;

float velocidad = 2;

void setup(){

  

  size (500,500);

  noStroke();

background (255);

}

void draw (){

background (255);

fill (0);

ellipse (100,y, radio,radio);

y = y + velocidad;

}

 9) Realiza tres objetos, el primero que baje con la gravedad y cuando llegue al final de la ventana vuelva a la posición original pero en otro valor de X.

Y dos objetos se una se mueva con el teclado y otro con el ratón.

Ejercicio de ejemplo:

// Variables globales

int pX = 100; // coordenadnas del punto de mira

int pY = 300;  // coordenadas y del punto de mira

int gX = 200;   // coordenadas X del globo

int gY = 0;   // coordenadas Y del globo

PImage imagenfondo;

int radio = 20; 

int velocidad = 3;

int P = 0;

void teclado ()

{

    if (keyCode  == RIGHT) pX = pX + 3; // controlar el punto de mira desde el teclado. 

    if (keyCode  == LEFT) pX = pX - 3;

    if (keyPressed && keyCode  == UP) pY = pY - 3;

    if (keyPressed && keyCode  == DOWN) pY = pY + 3;

    

    if (pX<0) pX=0;                     // limpia el movimiento del punto de mira para que no se salga de la pantalla

    if (pX> width) pX=width-20;     // PARA QUE NO SALGA DE LA PANTALLA EN ELEJE X

    if (pY<0) pY=0;

    if (pY> height) pY=height-20;  // PARA QUE NO SALGA DE LA PANTALLA EN EL EJE Y

        

}

void setup (){

size (600,600);

imagenfondo = loadImage ("cielo.jpg");

}

void draw ()

{

  image (imagenfondo,0,0,width,height);

 // background (imagenfondo); //lo uso para borrar el fotograma draw va a 60 fotograma por segundo.

//background (220,220,10); //lo uso para borrar el fotograma draw va a 60 fotograma por segundo.

ellipse (gX,gY,radio,radio);

gY =gY + velocidad;

if (gY> height-20){ 

  gY=20; //bola salga desde el principio

gX = int (random (width-radio));

}

rect (pX,pY,radio,radio);

teclado ();

text ("Globos explotados" + P,20,20);

}

10 ) Realiza un video juego parecido el que hemos en clase. A continuación dejo el código del realizado en clase:

// Primero definimos las variables globales 
int pX = 100; // coordenadnas del punto de mira
int pY = 300; // coordenadas y del punto de mira
int gX = 200; // coordenadas X del globo
int gY = 0; // coordenadas Y del globo
PImage imagenfondo;
int radio = 20;

int velocidad = 3;
int P = 0;
PImage nave;

// sistema de colisión según lo hace el libro. 
void colis2 (){

if (gX > pX && gX < pX + 20)
if (gY > pY && gY < gY + 20)

{
gY = 0;
gX = int (random (width-radio));
P = P + 1;
println ("Has dado");
background (220,220,10);
}
}
// Definición del movimiento del punto de mira con el teclado. También se podría hacer con el ratón, según está en el libro.
void teclado ()
{
if (keyCode == RIGHT) pX = pX + 3; // Con este método una vez que presiones el objeto des desplaza aún después de levantar 
if (keyCode == LEFT) pX = pX - 3;


if (keyPressed && keyCode == UP) pY = pY - 3; // Sólo se desplaza mientras está presionada la tecla.
if (keyPressed && keyCode == DOWN) pY = pY + 3;


if (pX<0) pX=0; // limpia el movimiento del punto de mira para que no se salga de la pantalla
if (pX> width) pX=width-20; // PARA QUE NO SALGA DE LA PANTALLA EN ELEJE X
if (pY<0) pY=0;
if (pY> height) pY=height-20; // PARA QUE NO SALGA DE LA PANTALLA EN EL EJE Y
}

void setup () 
{
size (600,600);
imagenfondo = loadImage ("cielo.jpg");
nave = loadImage ("nave.jpeg");}


void draw ()
{
image (imagenfondo,0,0,width,height);
image (nave,gX,gY, radio,radio);
gY =gY + velocidad;


if (gY> height-20)
{ gY=20; //bola salga desde el principio
gX = int (random (width-radio));
}
rect (pX,pY,radio,radio);
teclado ();
colision ();
text ("Globos explotados" + P,20,20);
}
// La función de colisión que hemos usado más simple.
void colision ()
{
float distancia = dist(pX,pY,gX,gY); // distancia entre el globo y el punto de mira

println (distancia);

if (distancia < radio) 
{
gY = 0;
gX = int (random (width-radio));
P = P + 1;
println ("Has dado");
background (220,220,10);
}


}