Processing

Processing es:

 

• Un lenguaje de programación
• Un entorno de programación
• Un proyecto Open-Source

Donde está?

http://processing.org/download/

¿POR QUE PROCESSING?

• Porque es un proyecto pensado para aprender a programar, y enfocado al uso de la programación con fines artísticos y de diseño
• Por la simplicidad de la interfaz, que permite centrarse en el código

Un primer ejemplo, dibujemos una elipse:

 

ellipse(50, 50, 80, 80)

 

Describiendo la coordenada en (X,Y,Z,W) tenemos que X e Y determinan el centro del objeto, ahora bien las coordenadas de X inician desde la izquierda hacia la derecha y las coordenadas de Y inician desde arriba hacia abajo; las coordenadas Z y W indican el ancho y el alto.

Instrucciones Basicas

size(150,150); //define el tamaño de ventana

background(0); //pinta la ventana de negro 

stroke();  // afecta al contorno, el trazo de las formas

strokeWeight(4); //ancho de la linea (4 pixeles)

fill (255,0,127); // especifica el color que se va a rellenar

nofill(); // especifica que a partir de este punto no se rellenen las formas

noStroke(); // Especifica que a partir de este punto no se dibujen los trazos.

Line()

line(x1, y1, x2, y2)

line(x1, y1, z1, x2, y2, z2)

 

line(30, 20, 85, 20);

line(85, 75, 0, 30, 75, -50);

 

 

 

Rect()

rect(a, b, c, d);

rect(a, b, c, d, r);

rect(a, b, c, d, tl, tr, br, bl);

 

rect(30, 20, 55, 55);

rect(30, 20, 55, 55, 7);

rect(30, 20, 55, 55, 3, 6, 12, 18);

https://processing.org/reference/rect_.html

https://processing.org/reference/line_.html

ellipse()

ellipse(a, b, c, d)

 

ellipse(56, 46, 55, 55);

 

 

 

triangle()

triangle(x1, y1, x2, y2, x3, y3)

 

triangle(30, 75, 58, 20, 86, 75);

https://processing.org/reference/triangle_.html

https://processing.org/reference/ellipse_.html

Tipos de datos

int 

float

boolean

color

String

Variables de sistema

width: ancho de la ventana

height: alto de la ventana

mouseX: posición del ratón en el eje X

mouseY : posición del ratón en el eje Y

Interactividad básica 

Las instrucciones que se encuentran en el setup() sólo se ejecutan una única vez al inicio del programa. Las instrucciones que se encuentran en el draw() se ejecutan 30 veces por segundo luego de la ejecución del setup(). 

PROPIEDADES DE LAS FORMAS

Líneas Difuminadas

Una de las propiedades principales es el smooth() que da un efecto difuminado a las formas y no el color bruto.

size(480,120);

smooth();

ellipse(140,60,90,90);

noSmooth();

ellipse(240,60,90,90);

Ancho de Línea

Para el ancho de los trazos tenemos la función  strokeWeight(), inicialmente el ancho de los trazos o bordes es de un pixel pero con esta función podemos variarlo.

size(480,120);

smooth();

ellipse(75,60,90,90);

strokeWeight(8);

ellipse(175,60,90,90);

ellipse(279,60,90,90);

strokeWeight(8);

ellipse(389,60,90,90);

 

Forma de las líneas

Otras de las propiedades que podemos utilizar de las formas son las esquinas y como se comporten sus bordes. Para ello podemos usar las funciones strokeJoin() la cual cambia la forma en que las líneas están unidas (esquinas) y strokeCap() cuya función cambia el como las líneas están dibujadas al inicio y al final.

Color

Por defecto todas las formas tienen un relleno de color blanco y el borde de linea de color negro y un fondo de pantalla gris, para poderlos cambiar se pueden usar  las funciones background(), fill() y stroke(). Los valores de los parámetros están en el rango de 0 a 255, donde 255 es blanco, 128 gris medio y 0 es negro.

Dibujando con Colores

Para dibujar en colores, puedes usar tres parámetros específicos que son el rojo, verde y azul los cuales son los componentes de un color. Puedes encontrar una tabla de colores RGB aquí. También puedes encontrar una paleta de colores en Tools/ColorSelector.

Transparencias

Un parámetro opcional para el fill() o el stroke(), se puede controlar la transparencia. Sus valores van desde 0 a 255 lo que configura el grado de transparencia, el valor 0 define un color enteramente transparente y el 255 totalmente opaco, se usa de la siguiente manera:

fill(255,0,0,160);

Formas personalizadas – Dibujando una flecha

La función beginShape() es la señal de inicio de una nueva forma. la función vertex() es usada para definir cada par de coordenadas X e Y para la forma, finalmente, enShape() es la llamada a que la forma ha terminado.

Graficacion en 2D

https://hackpad.com/Unidad-2-Graficacion-2D-03BTBMfQPab

beginShape();
vertex(10,10); //10,90
vertex(50,10);  //50,20
vertex(50,50);
vertex(10,50);  //80,50
endShape(CLOSE)

//si quitamos el close no cierra el vertice

fill(255,0,0);
ellipse(20,20,20,20);

fill(0,255,0);
ellipse(50,20,20,20);

fill(0,0,255);
ellipse(80,20,20,20);

fill(255,255,0,127);
rect(0,0,100,50);

colorMode(HSB);   
//valor de color espectro,saturacion,brillo
fill(255,127,127);   //255,0,0
ellipse(20,20,20,20);

fill(0,255,0);
ellipse(50,20,20,20);

fill(0,0,255);
ellipse(80,20,20,20);

rectMode(CENTER); 
rect(50,50,20,20);
rectMode(CORNER); //esq sup izq
rect(50,50,20,20);
rectMode(CORNERS); 
rect(50,50,20,20);

void setup(){
size(400,400); //cambiar a 100,100
}

void draw(){
background(0);

  //ellipse(mouseX,mouseY,30,30);
//rect(0,0,mouseX,mouseY);  // ancho y alto
stroke(255);  //color de linea
line(200,200,mouseX,mouseY);
ellipse(width/2,height/2,30,30);  /toma el ancho y alto de la ventana
}

Leer Entradas de Teclado y Mouse

void setup(){
size(400,400); 
background(0);
stroke(255,255,0);
}

void draw(){

}

void  mousePressed(){
ellipse(mouseX,mouseY,20,20);
} // cuando el mouse es apretado

 

// se ejecuta cuando el boton de mouse es liberado
void mouseReleased(){
rectMode(CENTER);
rect(mouseX,mouseY,20,20);
}

// cuando el mouse apretado y corrido
void mouseDragged(){
line(pmouseX,pmouseY,mouseX,mouseY);// p coordenadas previas
}

void keyPressed(){
//background(0);
 if(key == ' '){
 fill(0);   noStroke();
 ellipse(mouseX,mouseY,50,50);
 }  }

void setup(){
size(400,400);
noStroke();
}

void draw(){
fill(255,10);
rect(0,0,width,height);
fill(random(255),random(255),random(255));
ellipse(mouseX,mouseY,random(100),random(100));

}

ejercicio uso Random

rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);

size(100, 100);
translate(width/4, height/4);
shearX(PI/4.0);
rect(0, 0, 30, 30);

Traslación.

translate(nuevoX, nuevoY);