Probando Processing

Bueeeenas tardes a todos!processing2-logo

La verdad es que no tengo excusa para haber dejado un año esto sin movimiento… 😕 los hobbies se deben mantener por mucho trabajo que se tenga a la espalda, que para eso son hobbies, para desconectar. Pero entre que estoy haciendo un Máster, que he cambiado de trabajo y de país, no he tenido mucho tiempo de centrarme…ahora ya medianamente asentado intentaré retomarlo! 😉

Para engrasar un poco la maquinaria he decidido retomar algo que comencé en su momento, me gustó, pero la llegada de raspberry a mis manos me hizo cambiar de objetivo. Estoy hablando del lenguaje de programación de “arte interactivo”, Processing.

Processing es el hermano guapo de arduino, de hecho el entorno de desarrollo (IDE, Integrated Development Environment) es idéntico, y el tipo de programación mantiene también una estructura idéntica, (setup…loop…) quizá porque el IDE arduino está basado en processing, aunque el lenguaje del primero esté basado en C/C++ y el de processing en Java.

Este lenguaje nos va a permitir crear formas y animarlas con elementos externos, como puede ser el ratón, el teclado, o elementos conectados por puerto serie, arduino por ejemplo :roll: ahí es donde está su principal aplicación. Processing es, entre otras cosas y por decirlo de alguna manera, un generador de SCADA´s con muuucho potencial para arduino.

Además integra librerías de OpenGL (utilizadas en infinidad de tarjetas gráficas) lo que permite acelerar gráficos en 3D, y a esto es a lo que voy a dedicar la entrada.

Para comenzar a crear nuestro primer gráfico en 3D lo primero que hay que hacer es descargar el IDE de processing. (Aqui)

Vemos que la estructura de programación es:

1. Setup(): Aquí definiremos variables, funciones del programa, configuraremos la interfaz…lo que se escriba aquí solo se ejecutará una vez, al arrancar.

2. Draw(): Aqui irá el resto del programa, este código se ejecuta uuuuuuna y otra vez de manera cíclica.

Con processing se pueden dibujar formas predefinidas como un cubo, un rectángulo…o también definir figuras por vértices.

Lo bueno que tiene es que no solo te permite dibujar, si no también animar lo que dibujas. Como ejemplo he creado un script que emula la tierra, la luna y el sol, como si lo mirásemos desde un satélite que enfoca a la tierra siempre en el mismo punto.

Configuramos el espacio de trabajo, será una ventana de 700×650 pixeles

size(700, 650, P3D);

Añadimos la tercera dirección P3D para que nos pinte en 3D.

Configuramos el color de fondo (negro, como el universo) 😛

background(0);

Generamos 3 esferas con el comando sphere(radio);

Cada una la pintamos de un color, luna gris, tierra azul, sol naranja

fill(x,y,z); (colores en HTML)

Posteriormente las ubicamos en el espacio de trabajo

translate(500, 325, 0);

Con esto estamos diciendo que inicialmente aparezan en el centro

En processing se pueden añadir puntos de luz, para generar efectos de sombras, el mas completo es el comando “spotlight” que te permite definir donde esta el foco de luz, hacia donde apunta, que grados abarca y con que intensidad de luz iluminamos.

Ahora animamos, si ponemos la tierra en una referencia fija, se moverán a su alrededor tanto la luna como el sol … aaaay…me acuerdo cuando estudiaba mecánica en la carrera… 😥

Por tanto, usando el comando “translate(x,y,z)” que es el que “mueve” los objetos dentro de nuestro espacio de trabajo, podemos introducirle un par de ecuaciones para emular el movimiento circular de la luna.

Como bien sabeis el movimiento circular, se puede expresar tanto en coordenadas polares (radio y ángulo) como en coordenadas rectangulares (x , y), solo hay que hacer un pequeño cambio de base tal y como indica la siguiente figura:

2000px-CirculoTrigonometrico.svg

por tanto:

x=cos(angulo)

y=sen(angulo)

Solo tenemos que definir un angulo de giro, e ir incrementandolo, del resto se encarga translate con las dos funciones.

alpha=alpha+0.03;

translate(275*cos(alpha), 150*sin(alpha), 275*sin(alpha));

(en “y” he metido también una traslación senoidal para darle un poco de realismo)

Hacemos lo mismo con el sol pero ponemos que su ángulo se incremente más despacio.

Damos al play y el resultado es este  😎  😎  😎

show code

float x,y,z,alpha,beta;
void setup()
{
size(700, 650, P3D);
alpha=270;
beta=140;
}

void draw() {
background(0);

translate(350, 325, 0);

//aqui anadimos los focos de luz

spotLight(255, 255, 255, width/2+15000*cos(beta), height/2+100*sin(beta),10000*sin(beta), 0, 0, -1, PI/2, 3);
spotLight(255, 255, 255, width/2+15000*cos(beta), height/2+100*sin(beta),10000*sin(beta)+8500, 0, 0, -1, PI, 0.001);

noStroke();
fill(0,0,255);
sphere(150);

//movimiento del satélite

if(alpha==360)
{
alpha=0;
}

alpha=alpha+0.03;

translate(275*cos(alpha), 150*sin(alpha), 275*sin(alpha));
noStroke();
fill(90,90,90);
sphere(30);

//movimiento del sol

if(beta==360)
{
beta=0;
}

beta=beta+0.004;

translate(15000*cos(beta), sin(beta), 10000*sin(beta));
fill(255,154,0);
sphere(7000);

}

Dejo vídeo por si no lo podéis ver al estar en móvil o tablet:

Se ve que en esta simulación el sol parece que emite luz y va iluminando la tierra y la luna, esto es porque los ejes de los focos de luz también los he hecho dinámicos 💡 , y los he sincronizado con el movimiento del sol :)

Y esto es todo de momento!! en el próximo post creo que me curraré algo de figuras en 3D con texturas y con animación desde ratón, porque tengo en mente un proyectillo curioso para probar un acelerómetro :roll: , todo a su tiempo!!

Espero que haya gustado, aquí estoy para servirles, gute Nacht Leute und Viel Spaß!

One thought on “Probando Processing

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>