Por votación popular la primera clase que impartiremos en el instituto profesional pousta (acreditado por 4 meses) será nuestra clase introductora de Processing.
Conociendo a Processing
Processing es un software libre creado por Casey Reas y Ben Fry (dos ñoños) hay que también señalar que siempre está en desarrollo por lo que errores, códigos que no funcionan y – muchos – dolores de cabeza son cosas normales dentro del mundo de processing.
El programa esta basado en Java, por lo cual hereda todas sus funcionalidades, convirtiendose en una herramienta poderosa a la hora de crear diferente tipos de proyectos, con eso me refiero a aplicaciones locales (instalaciones artísticas por ejemplo) o aplicaciones para la web.
Enfoque
El programa esta pensado para artistas, diseñadores y programadores que quieran expresarse con el lenguaje digital, enfocado por supuesto a las creaciones artísticas visuales o instalaciones multimediales.
Al ser un lenguaje en código libre es una herramienta alternativa al software propietario, como photoshop o Illustrator. Por si no sabes Photoshop se paga no se baja. Otras de las funciones de Processing es acercar las necesidades de los artistas a las nuevas tecnologías.
Por lo tanto muchos artistas nuevos prefieren este lenguaje por que lo ven como un contexto simple y gratis para crear el llamado “arte electrónico”, por supuesto que no es necesario tener una gran experiencia en el mundo de la programación para realizar tus primeras obras.
Utilidades
Hasta ahora todo se escucha súper bonito y pretencioso, pero realmente ¿Qué cosas concretas puede hacer Processing que nos llamen la atención?
A continuación les dejo un ejemplo de Instalación artística que se presento el año 09 en el Science Museum’s Dana Centre en la cual se ocupo Processing para llevar acabo la instalación, como verán la idea era bastante simple en una pantalla táctil te mostraban una pieza gráfica de referencia, la misión era recrear esa pieza gráfica con tus manos o pinceles (ojo que la música rockea)
En Pousta tenemos a varios amigos involucrados en el arte del After Effects, gente que pasa horas rendereando y animando segundos.
Este ejemplo de seguro les producirá un dolor de guata tremendo a ellos, Dmtr (un artista brasileño) se le dio la tarea de crear visuales para el canal MTV brasil, este ocupo Processing para la tarea y como el mismo explico en su blog, en lo que mas gasto tiempo fue en elegir los colores que le gustaban, los resultados son increíbles.
Processing como ven, puede tener el uso que uds quieren asignarle, este ejemplo es bastante bueno, Sjansmachine es una instalación interactiva en un bar, la gente llega se saca una foto dentro de unos photobooths y en unas pantallas se muestran las caras de todos los participantes, durante la noche el programa elige de manera random a personas que participaron de la instalación, lo que ganan se llevan un trago por parte de la casa, ves Processing te puede hasta emborrachar gratis.
Que hay de ejemplos mas cercanos a nuestro país, en Chile de apoco se están conociendo artistas que ocupan estos “nuevos” software, Argentina lleva ya varios años trabajando con processing, pero pille un ejemplo muy bueno de un estudiante Peruano, como verán el video a continuación es un test de su instalación que combina el sonido y las gráficas.
¿Donde bajar processing?
En la pagina oficial de Processing, tienes que ir a la sección Download y bajar el programa según tu sistema operativo, siempre baja la ultima versión para no tener problemas.
Una vez instalado el programa en tu computador ya estas listo para trabajar en el.
La Interfaz
Si estas acostumbrado a programas con brillitos, bordes redondeados, botones que hacen todos moviendo una perillita, con Processing lloraras extrañando todo lo anterior pero alfinal te harás un marchito y te acostumbraras a su interfaz sin cariño.
La interfaz aparte de “feita” es simple y para resumir en pro de darles mas información les señalares las cosas mas importantes.
En la parte de la botonera principal encontramos :
Botón de reproducir, al apretar este botón vemos nuestro código ejecutado
Botón Stop sirve para detener el programa que estamos ejecutando
Botón para crear un nuevo documento, eso si processing les pone el nombre de sketches ( bosquejos)
Botón para para abrir cualquier tipo de documento que pueda leer processing
Botón puedes guardar tu lindo trabajo
El espacio en blanco es para meter nuestro código, por que en processing TODO LO QUE QUERAMOS HACER SE TIENE QUE ESCRIBIR EN CóDIGO.
Obviamente hay mas secciones y botones, pero por esta vez los pasaremos por alto ya que en este tutorial, no esta enfocado en eso.
Ahora partamos con algo básico
Vamos a partir dibujando algunas figuras básicas dentro de processing, para que se acostumbren y entiendan un poco el código
Dibujando un cuadrado
Copia y pega este código dentro de Processing para tener un cuadrado blanco dibujado según las coordenadas que tu le asignes. lee los comentarios dentro del código para entender y comprender lo que hace cada linea, no olvidez cambiar los números para ver que otros resultados puedes obtener
Codigo
void setup(){ // el setup es super importante aca definimos el porte y el color del fondo del documento
background(230); // acá señalamos que el fondo de nuestra ventana será blanca
size(200,200); // y el porte de nuestra ventana señalamos que será de 200 x 200 pixeles, puedes cambiar los números para varias el porte de la ventana
}
void draw(){ // ulna vez definido el porte y el fondo de nuestro ejercicio acá definimos lo que dibujamos en él
rect(50,50,50,50); // rect es sinónimo de rectángulo en processing y los primero dos 50 son la pocision en X y Y donde ubicaremos nuestro cuadrado, los otros dos 50 son la dimensión de este
}
Ahora agreguemos más cuadrados y colores
Ya con esto sabes lo básico, básico de Processing, obviamente tu misión es seguir jugando y probando lineas de códigos, para saber que pasa y que no pasa, por supuesto si tienes dudas las puedes dejar en los comentarios, con este ejemplo tendrás tres rectángulos con los colores oficiales de Pousta, recuerda siempre probar diferentes coordenadas de los rectángulos para acostumbrarte a las coordenadas X y Y
Código
void setup(){
background(0); // aca cambiamos el color de fondo a negro
size(200,200);
}
void draw(){
fill(77, 188, 241); // primero se define el color del objeto que tiene después
rect(30,20,30,100); // primer cuadrado
fill(236,2, 189); // segundo color para el segundo cuadrado
rect(75,20,30,100);
fill(244, 233, 79);
rect(120,20,30,100);
}
Tu primera visual
Ya sabemos hacer algo básico en Processing, pero todo hasta ahora es estático, para terminar este curso introductorio ocupemos el mouse para realizar algo mas dinámico y lucirte con tus amigos
Código
int x,y; // definimos que X y Y son numero enteros
void setup(){
background(0);
size(500,500);
stroke(133,133,133); // stroke es contorno, con este definimos el color del contorno de todas nuestras figuras en el ejercicio
}
void draw(){
for (int i = 0; i < 100; i++) { // acá hay un pequeño código de random, el cual r puede ser un numero entre 0 y 255 ( no es un numero entero por eso es float )
float r = random(0, 255);
println(r); // en la parte de abajo de processing saldrán los números que arroja el random
x=mouseX-25; // X se transforma en la posición del mouse
y=mouseY-25; // Y se transforma en la posición del mouse
fill(255, r, r); // el color del cuadrado variaria de acuerdo a R
rect(x,y,50,50); // por ultimo definimos que la posición del cuadrado será dada por X y Y y el porte será de 50 pixeles
}
}
Claramente este código se puede afinar mucho, y esa es la idea que Uds. se metan a cambiar lineas de código para lograr un resultado de acorde a lo que Uds. quieren. Pueden ver en vivo el ejemplo anterior acá Ver Ejemplo
Con esto finaliza nuestra primera parte de los Tutoriales sobre Processing, para un segunda entrega nos enfocaremos a objetos 3d y animaciones de estas.
Por supuesto cualquier duda, comentario, corrección, agradecimiento o simplemente odio, pueden dejarlo en los comentarios. Yo trataré de ayudarlos dentro de lo que pueda.
TAMBIÉN TE PUEDE INTERESAR
