Comenzamos con Processing

Luego de realizar el proyecto basado en Arduino, cambiamos la temática para meternos en Processing y comenzar a programar un poco en esta plataforma.

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.

Entonces, comenzamos con un primer ejercicio sencillo, el cual va dibujando aleatoriamente circulos de colores por toda la pantalla que nosotros seteamos (en este caso 600*600).

Código:

void setup() {

size (600, 600);

background(255);

noStroke();

}

void draw() {

float ranX = random(60)* cos(radians(random(361)));

float ranY = random(60)* sin(radians(random(361)));

float randomSize = random(5, 15);

fill(0, 0, random(256), random(256));

ellipse(mouseX+ranX, mouseY+ranY, randomSize, randomSize);

}

Continuamos con un segundo ejercicio, en donde al pasar el cursor del mouse por nuestro canva, va generando una especie de superposición de colores y cuadrados, los cuales al pasar un poco rápido el mouse, por lo menos a mi, me genera cierto mareo.

El nuevo detalle, es que en este ejercicio, ocultamos el cursor del mouse, para que no resulte molesto dentro del programa ejecutándose.

Código:

void setup() {

size (720, 720);

noCursor();

}

void draw() {

colorMode(HSB,360,100,100);

rectMode(CENTER); //mueve el 0,0 al centro, de esta forma siempre inicia desde el centro los colores

noStroke(); //

background(mouseY/2,100,100);

fill(360-mouseY/2,100,100);

rect(360,360,mouseX+1,mouseX+1);

}

Por último, en este siguiente ejercicio, dejamos el canva totalmente vacío y solamente vamos a ver un rectángulo dentro, centrado en la pantalla y girando sobre si mismo, tomando en cuenta el movimiento de nuestro cursor.

Código:

void setup()

{

size(500,500);

rectMode(CENTER);

}

void draw()

{

background(255);

int locX = width/2;

int locY = height/2;

float angle = atan2(mouseY-locY, mouseX-locY) + radians(0);

translate(locX, locY);

rotate(angle);

rect(0, 0, 100, 10);

}