Programa Processing

Es un software flexible tipo libro de bosetos, o "Sketchbook", y un lenguaje para poder aprender como codificar con el contexto de artes visuales, desde 2001 Processing a estado promoviendo el conocimiento practico de software dentro de las artes visuales y el conocimiento practico dentro de las tecnologias.
Existen miles de estudiantes, artistas, diseñadores, investigadores, y gente con el simple hobby que utilizan Processing para aprender y crear prototipos.

>>Descarga libre y codigo abierto
>>Programas interactivos con salidas 2D, 3D, PDF o SVG
>>Mas de 100 librerias extendidas hasta el nucleo del programa
>>Bien documentado con varios libros disponibles

Aqui se mostrara un video de bienvenida a el programa Processing version 3 con algunos ejemplos de lo que se puede llegar a hacer con este programa

Welcome to Processing 3 from Processing Foundation on Vimeo.

Pagina en donde podemos encontrar Processing.
https://processing.org/

Interfaz de Processing 3

Veamos como es la interfaz de Processing 3

Vemos como incia Processing 3

y nos da la bienvenida junto con las notas y lo nuevo que viene con el Processing 3

Veamos como es la interfaz y sus componentes

1. En primer lugar tenemos el nombre del archivo, o programa, ademas de que processing tiene una manera un poco especial de acomodar las cosas lo hace un poco mas limpia, al poder abrir ventanas extras las cuales son parte del mismo programa y compila normalmente pero nos da mas limpieza al momento de programar.
2. Tenemos nuestro cuadro de texto, o nuestro cuadro de codigo en donde podremos hacer nuestros programas.
3. Boton para poder compilar y correr el programa que estamos haciendo.
4. Un boton para detener la corrida del programa.
5. Consola en donde se nos mostrara parte del programa si no es nada visual.
6. Pestaña de errores en donde se nos informara de errores que tenga el programa.
7. Boton del Debuggeador de Processing.
8. Pestaña en donde elegiremos el modo de programacion que querremos usar dentro de Processing.

Dentro de esta ultima pestaña podremos elegir tanto el lenguaje Java como otro modo que poddamos descargar dentro de Processing.
Se encuentra un modo de Python.

Se puede instalar el modo Python para poder programar en Python pero yo principalmente utilizare Java pues viendo algunos video tutoriales e estado aprendiendo algo con Java.

The coding train

Un youtuber llamado Dan con su canal denominado The coding train  muestra y explica varios programas o como el los denomina "Creative coding" "Codigo creativo"(Todo explicado en ingles) que el hace dentro de Processing para generar algoritmos como simulacion de fisicas, y visualizacion de datos, ademas de otros entornos de programacion como lenguajes de programacion diferentes(JavaScript en p5.js), como retos, mientras los va haciendo y programando, va explicando claramente que es lo que hace, y que es lo que hara para que sea mejor visualmente el resultado final.

E escogido algunos de los programas que me llamaron la atencion al momento de empezar a codificar dentro de Processing.

Lluvia morada en honor a Prince

Programa hecho por Dan del canal The coding train reto el cual hizo en honor a Prince Purple Rain. pueden ver su video haciendo click aqui en donde explica de manera muy animada y amena el como va programando mientras se le ocurren mas ideas. 

Sin embargo explicare mas o menos paso a paso este programa que me gusto mucho.

En este programa hecho en Processing solamente se crea lluvia de color morada en honor a prince y su cancion Purple Rain. Se ve simple, sin embargo si es un poco mas complicado de lo que se ve, viendo el codigo de Processing es simple sin embargo si se tiene que usar logia para entenderlo.

Empecemos con el codigo, primero que nada debemos tener en cuenta lo siguiente
>(138, 43, 226) Color para la lluvia
>(230, 230, 250) Color para el fondo

Empecemos a programar.

Primero que nada lo que necsitamos hacer es hacer 2 funciones

void setup(){
  
}


void draw(){
  
}

setup() y draw() en donde dentro de setup() utilizaremos la funcion size() para darle un tamaño a la ventana que crearemos y  dentro de draw() utilizaremos background() para darle un color al fondo y utilizaremos el color de fondo que predefinimos anteriormente veamos:

void setup(){
  size(640, 360);
}


void draw(){
  background(230, 230, 250);
}

Simplemente corriendo este pequeño programa podemos ver la ventana con el color de fondo que pusimos.

Despues para poder crear la lluvia lo que se necesitara hacer es crear un objeto despues crear un array con muchos de esos objetos.
.
Lo que haremos sera crear una nueva pestaña en donde declararemos una nueva clase "Drop" o "Gota"utilzando class siendo una plantilla para poder crear objetos.

class Drop{
  
  
    
}

Ahora este objeto le declaramos que tendra una "x" y un "y" como plano cartesiano ademas de una funcion llamada "fall()" o "caer()" en donde se le dara los valores la gota para que caiga, ademas de otra funcion llamada "show()" o "mostrar()" la cual utilizaremo para renderizar el objeto y se muestre en pantalla.

class Drop{
  float x;
  float y;
  
  void fall(){
    
  }
  
  void show(){
    
  }
  
}

La gota la dibujaremos como una linea lo cual declararemos dentro de la funcion "show()"
line(x,y,x,y+10);
lo cual a la linea le asignaremos un valor en x1 en y1 ademas de darle valores en x2 y y2, pero en y2 se le suman 10 pixeles para poder hacer alargada la gota.
despues utilizaremos la funcion stroke() para poder darle color a la gota y utilizaremo el color que tenemos predefinido (138, 43, 226).

void show(){
  stroke(138, 43, 226);
  line(x,y,x,y+10);
}

Ahora dentro de la funcion fall() declararemos

void fall(){
  y = y + yspeed;
}

Ahora para que esto pueda funcionar daremos valores a las variables.

class Drop{
  float x = width/2; //Para que sea a la mitad de la pantalla
  float y = 0; //Para que inicie arriba en la pantalla
  float yspeed = 1; //Valor solo para ver como funcionara con la velocidad de caida
  
  void fall(){
    y = y + yspeed;
  }
  
  void show(){
    stroke(138, 43, 226);
    line(x,y,x,y+10);
  }
  
}

Ahora volvemos a la primera pestaña para poder crear los objetos necesarios para crear la lluvia ademas de añadir las funcones creadas dentro de la clase Drop.
Creamos una variable desde la clase Drop, dentro de la funcion setup() creamos el objeto Drop, y dentro de la funcion draw() utilzamos las funciones creadas dentro de la clase Drop en el objeto creado para dibujarlas dentro de la ventana.

Drop d;

void setup(){
  size(640, 360);
  d = new Drop();
}


void draw(){
  background(230, 230, 250);
  d.fall();
  d.show();
}

Si corremos esto podemos ver como funciona.
Y esto sera lo que veremos.

Como podemos ver estamos avanzando pero solamente es una gota, necesitamos muchas gotas.

Para poder tener muchas gotas haremos lo siguiente, en la primera pestaña crearemos un array para crear demasiados objetos.

Drop[] drops = new Drop[100];

void setup(){
  size(640, 360);
  for (int i = 0; i < drops.length; i++){
  drops[i] = new Drop();
  }
}


void draw(){
  background(230, 230, 250);
  for (int i = 0; i < drops.length; i++){
    drops[i].fall();
    drops[i].show();
  }
}

Creamos un array de objetos con Drop[] drops = new Drop[100];
Ademas de crear algunos ciclos para las diferentes gotas de lluvia que se crearan.
Se vera lo siguiente

Como podemos ver se crearon las 100 gotas de lluvia, pero se ve igual a como se veia anteriormente, sin embargo lo que esta pasando es que las 100 gotas se crean en el mismo lugar a la misma velocidad entonces haremos lo siguiente.
Dentro de la segunda pestana de Drop haremos algunos cambios a las variables.
x = random(width); //Hara que las lineas "gotas" creadas se creen aleatriamente a lo largo de la pantalla
y = random(-200,-100); //Para que las gotas se creen aleatoriamente fuera de la pantalla entre -200 y -100

class Drop{
  float x = random(width);
  float y = random(-200,-100);
  float yspeed = 1;
  
  void fall(){
    y = y + yspeed;
  }
  
  void show(){
    stroke(138, 43, 226);
    line(x,y,x,y+10);
  }
  
}

Vemos como ahora las gotas de luvia taradn mas en salir dentro de pantalla ya que le dimos valores en y, ademas de que ahora las gotas aparecen aleatoriamente a lo largo de la pantalla por los valores en x, si le damos a correr de nuevo podemos notar que las gotas saldran en diferentes lugares y no siempre donde mismo.
Haremos algunas modificaciones y agregaremos algo de codigo para poder mejorar el como se ve la lluvia.
Ademas de en la primera pestaña cambiar en el array, en vez de solo 100 objetos, cambiarlo a 500 para poder observar mas gotas de lluvia.
Drop[] drops = new Drop[100]; > Drop[] drops = new Drop[500];

class Drop{
  float x = random(width);
  float y = random(-500,-50); //Dar mas espacio para que aparezcan las gotas de lluvia.
  float yspeed = random(4, 10); //Para que algunas gotas de lluvia tengan mas o menos velocidad de caida.
  float len = random(10, 20); //variable len para hacer que algunas lineas sean mas gruesas que otras
  
  void fall(){
    y = y + yspeed;
    yspeed = yspeed + 0.2; //Una variable que podoriamos decir que representa gravedad, mientras mas caen mas sube la velocidad.
    
    if(y > height){ //Para hacer que vuelvan a reaparecer las gotas de lluvia desde arriba.
      y = random(-200,-100); //Al momento de reaparecer aparecen en nuevas locaciones y sea aleatorio
      yspeed = random(4, 10); //Para que vuelvan a obtener su valor de la velocidad de caida.
    }
  }
  
  void show(){
    stroke(138, 43, 226);
    line(x,y,x,y+len); //Se agrega la variable len para hacer que algunas lineas sean mas gruesas que otras
  }
  
}

Como podemos observar, ya podemos distinguir algo de lluvia morada y podriamos decir que nuestro programa esta completo, sin embargo hay algunas modificaciones que se le pueden hacer para que nuestra lluvia morada, sea un poco mas realista, como por ejemplo, agregar ciertos valores para que exitsa un poco de "3D" no es 3D como tal,  ya que pondremos que ciertas gotas se vean mas gruesas si estan cerca, que si estan lejos, ademas de la velocidad en la que caen, caeran as rapido, cerca que de lejos.
El codigo final modificado es el siguiente:

Drop[] drops = new Drop[500];

void setup(){
  size(640, 360);
  for (int i = 0; i < drops.length; i++){
  drops[i] = new Drop();
  }
}


void draw(){
  background(230, 230, 250);
  for (int i = 0; i < drops.length; i++){
    drops[i].fall();
    drops[i].show();
  }
}

class Drop{
  float x = random(width);
  float y = random(-500,-50);
  float z = random(0, 20); //Dar un valor z a las gotas entre 0 y 20
  float len = map(z, 0, 20, 10, 20); //Hacer mas larga las gotas de lluvia mientras mas cerca esten 0(lejos) y 20(cerca)
  float yspeed = map(z, 0, 20, 1, 20); //Mientras mas cerca mas rapido caeran las gotas
  
  void fall(){
    y = y + yspeed;
    float grav = map(z, 0, 20, 0, 0.2); //Mientras mas cerca, mas gravedad afectara a las gotas de lluvia
    yspeed = yspeed + grav;
    
    if(y > height){ 
      y = random(-200,-100);
      yspeed = random(4, 10);
    }
  }
  
  void show(){
    float thick = map(z, 0, 20, 1, 3); //Hace 1 pixel mas amplio, la gota mientras mas lejos este, y la hace 3 pixeles mas amplia mientras mas cerca
    strokeWeight(thick);
    stroke(138, 43, 226);
    line(x,y,x,y+len);
  }
  
}

Al final de su video el deja en claro que es lo mas cercano que pudo a crear lluvia morada, ya que no es un experto diseñador visual, ademas deja esta plantilla para que nosotros, o ya sea la usemos para arender a crear lluvia morada y dejarlo ahi, o agregarle o modificarle mas si es que podemos para hacerla mas cercana a una lluvuia morada, si vemos los comentarios del video podemos ver diferentes ideas de diferentes personas las cuales pueden resultar siendo maravillosas dentro del programa.

En lo personal modifique el programa haciendo lo mas parecido para mi a lluvia morada, con menos gotas creadas y haciendo que las gotas mas cercanas se muevan un poco mas lento que las que se van creando por detras, ya que las gotas lejanas son las que mas llegamos a ver en un dia de lluvia a las mas cercanas.

Codigo:

Drop[] drops = new Drop[300];

void setup() {
  size(640, 360);
  for (int i=0; i<drops.length; i++) {
    drops[i]=new Drop();
  }
}

void draw() {
  background (230, 230, 250);
  for (int i=0; i<drops.length; i++) {
    drops[i].show();
    drops[i].fall();
  }
}

class Drop {
  float x=random(width);
  float y=random(-500, -50);
  float z=random(0, 20);
  float len= map(z, 0, 20, 10, 20);
  float yspeed=map(z, 0, 20, 10, 3);
  void fall() {
    y= y + yspeed;
    //gravedad
    float grav=map(z, 0, 20, 0.2, 0.05);
    yspeed = yspeed+grav;

    if (y> height) {
      y=random(-200, -100);
      yspeed=map(z, 0, 20, 10, 3);
    }
  }

  void show() {
    float thick = map(z, 0, 20, 1.5, 2);
    strokeWeight(thick);
    stroke(138, 43, 226);
    line(x, y, x, y+len);
  }
}

Se que no es perfecto, pero yo tampoco soy un diseñador grafico.