Processing 1.0 parte 2

Avanzamos a la segunda parte de este pequeñisimo tutorial, y bueno lo que les voy a mostrar ahora es un aplicacion que engloba todos los temas que no toque la vez pasada, como son condicionales, bucles, random, vectores y la funcion que oye cuando el mouse es presionado

Lo que van a ver es una tabla e ajedrez con una pelotita que choca en las paredes, y mientras va pasando por una casilla, la pinta de color plomo, la pelotita vuelve a una nueva posicion y la pantalla se reinicia si presionas el mouse, primero el codigo bien explicado:

int x,y;
int pasoX,pasoY;
float[][] ajedrez = new float[8][8];//matriz de la tabla de ajedrez
void setup(){
 size(200,200);
 smooth();//se utiliza para que el circulo se vean los bordes perfectos (anti-aliased)
 x = int(random(width));//random del ancho de la pantalla - 200
 y = int(random(height));//del largo
 pasoX = 2;
 pasoY = 4;
 for(int j=0 ; j<8 ; j++){
 for(int i=0 ; i<8 ; i++){
 if( (i+j) % 2 == 0 ){ //si la suma de la fila y la columna es par entonces pinta de negro
 ajedrez[j][i]=0;
 }else{
 ajedrez[j][i]=255;
 }
 }
 }
}
void draw(){
 for(int j=0 ; j<8 ; j++){ // recorrido de la pantalla para pintarla
 for(int i=0 ; i<8 ; i++){
 fill( ajedrez[j][i] );
 rect( i * 25 , j * 25 , 25 , 25 );//hace el cuadrado
 }
 }
 fill( 150 );
 ellipse(x,y,10,10);
 x += pasoX; //movimiento horizontal
 if( x > width || x < 0 ){ //bordes horizontales
 pasoX *= -1; //cambia de dirección horizontal
 }
 y += pasoY; //movimiento vertical
 if( y > height || y < 0 ){ //bordes verticales
 pasoY *= -1; //cambia de dirección vertical
 }
 for(int jb=0 ; jb<8 ; jb++){
 for(int ib=0 ; ib<8 ; ib++){
 if(dist( ib * 25 , jb * 25 , x , y ) < 10 ){ //dist -> calcula la distancia entre 2 puntos
 ajedrez[jb][ib] = int(random(140,150)); //random entre 140 y 150 (plomo)
 fill( ajedrez[jb][ib] );
 rect( ib * 25 , jb * 25 , 25 , 25 );
 }
 }
 }
}
void mousePressed(){
 setup(); // si presionas el mouse se reinicia
}

Listo con eso la pantalla quedaria asi:

Ahora la manipulacion de fotos es otro tema, por ejemplo voy a hacer un programa que suba una foto y la distorsione por donde pase el mouse

la foto que voy a poner es una foto que tome durante el concierto que salio asquerosa, para algo debia servir:

y ahora el codigo que utilizo para que cuando paso el mose, se distorsione la imagen:

PImage imagen;  // para cargar imagenes
void setup(){
 size(240,320);   
 imagen = loadImage("Imagen.jpg"); //carga una imagen
 background(0);  
 image(imagen, 0, 0);  
}
void draw(){
 for(int x=0 ; x<width ; x++){  //recorre horizontalmente toda la imagen
 for(int y=0 ; y<height ; y++){  //recorre verticalmente toda la imagen
 color ese;  //variable del tipo color
 ese = imagen.get( x , y ); //vuelve a enfocar la foto cogiendo el color de el pixel de la foto original
 set( x , y , ese ); //imprime el color del pixel tomado
 }
 }
 float des = 15;  //el desenfoque
 for(int x=mouseX-30 ; x<30+mouseX ; x++){  //recorre horizontalmente hasta 60
 for(int y=mouseY-40 ; y<40+mouseY ; y++){  //recorre verticalmente hasta 80
 color este;
 este = imagen.get( x+int( random(-des,des) ) , y+int( random(-des,des) ) ); //toma el color de un pixel con un nivel de desenfoque
 set( x , y , este );
 }
 }
}

Acuerdense de que para poder agregar una imagen se van al menu ’sketch’Y luego le dan’ add file’ eligen la imagen y  listo con eso ya saben manejo de imagenes, bucles y demas, el resto uds averiguenlo por si mismos, pero les recomiendo este lenguaje por lo facil y simple que es, lo aprendes en una y haces un monton de tonterias con solo un poco de imaginacion, bueno les dejo la imagen de como queda al final, nos vemos, bye

pd-> les dejo unos links que me resultaron de inmensa ayuda para aprender, el primero es lo basico en español, y si les gusto y quieren aprender mucho mas, les recomiendo este enlace en ingles

Processing 1.0

Despues de muchos(demasiados) dias actualizo mi blog, despues de mi super viaje a argentina(todo lo que hace radiohead ), por donde estuve mes y medio – fotito con mi primo ricardo antes de que comienze el concierto ^_^:

(io soy el de lentes)

Y obviamente sin chances de escribir nada, regreso con un nuevo lenguaje desarrollado a partir de java que esta desarrollado para ser usado en vez de flash, processing 1.0.3 (su version mas actual hasta hoy) la verdad es que tiene muy buenas criticas y ya esta siendo utilizado en varias universidades, ya que java t permite hacer mas cosas que flash, o eso dicen…

Primero se lo bajan de la pagina de progressive donde dice download.

Ahora voy a comenzar mostrandoles primero como se dibuja, el codigo explica para que sirve cada funcion

size(300,300); //tamaño de la ventana
background(255); //pinta el fondo (blanco)

//punto
set(75,75,0); //pixel(punto) negro (x,y,color)
strokeWeight(4);//ancho de linea
//linea
line(10,20,130,140);//(x,y(de un lado),x,y(del otro))
//triangulo
triangle(10,110,80,20,130,130);//(x1,y1,x2,y2,x3,y3) de cada punto
//elipse
ellipseMode(CENTER); //(valor por defecto)
ellipse(70,80,130,80); //(x1,y1(del centro),x2,y2(ancho y alto))
ellipseMode(CORNER);
ellipse(70,80,130,80); //(x1,y1(del punto superior izquierdo del rectángulo),x2,y2(ancho y alto))
ellipseMode(CORNERS);
ellipse(70,80,130,80); //(x1,y1(un punto),x2,y2(el otro punto al extremo))
//cuadrado-rectangulo
rectMode(CORNER); //modo en que se interpretarán los parámetros en rect()-por defecto
rect(10,10,120,80); //(x1,y1(punto superior izquierdo),x2,y2(ancho y alto))
rectMode(CENTER);
rect(10,10,120,80); //(x1,y1(punto central),x2,y2(ancho y alto))
rectMode(CORNERS);
rect(10,10,120,80); //(x1,y1(punto central),x2,y2(ancho y alto))
//cuadrado-sin forma
quad(20,10,130,30,110,115,40,140); //(x1,y1(primer punto),x2,y2(segundo punto),x3,y3(tercer punto),x4,y4(cuarto punto))
//curva
bezier(20,10,40,140,120,30,110,115); //(x1,y1(un extremo),x2,y2(punto de salida),x3,y3(punto de llegada),x4,y4(otro extremo))
//arco
ellipseMode(CENTER); //los parametros de ellipse funcionan para arc;
arc(80,70,120,80,PI/2,0); //(x1,y1(centro),x2,y2(ancho y alto),rad1,rad2(punto de inicio y final))

Hasta aca hemos hecho algunos dibujos que quedara asi :

Recuerden que para ejecutar deben hacer click en el boton con forma de play

Al igual que java, tiene una serie de variables y operaciones disponibles para nosotros, el codigo que sigue les mostrara un poco de esto

int Var; //entero
Var = 26;
println(Var); //imprime en la pantalla negra

float reales;//flotante para decimales(reales)
reales = 26.99;
println(reales);// 

//las operaciones son las mismas que podemos hacer en java con estos tipos de variables
//division de enteros devuelve enteros aun si la respuesta es en real

char letra;//almacena un dato alfanumerico
letra = 'j';
println(letra);// imprime una j

String oracion;//cadena de caracteres
oracion="julio c";
println(oracion);

boolean verdad;//datos booleanos
verdad = true;
println(verdad);

color fondo;//colores que se definen
fondo = 0;
background(fondo); //pinta la ventana de negro

Hasta ahora solo hemos probado lo basico de progressive, y ahora veremos la gracia de esto, empezaremos a utilizar las funciones setup() y draw(), la funcion setup() se ejecuta una sola vez en el programa, mientras que todas las instrucciones bajo la funcion draw() se ejecutan 30 veces en 1 segundo indefinidamente, veamos un ejemplo.

int c;
void setup(){
 c = 10;
 size(100,100);
}
void draw(){
 background(200);
 c = (c+1) % 100;
 rect(c,30,15,15);
}

Veran en su pantalla un cuadrado que se mueve como este

Existe tambien unas funciones que se llaman mouseX y mouseY estas representan las coordenadas x y del mouse, un ejemplo:

int x = 50;
int y = 50;
void setup(){
 size(300,300);
}
void draw(){
 background(100); //si borran esta linea los cuadrados no se borran
 x=mouseX-20;
 y=mouseY-20;
 rect(x,y,60,60);
}

Quedaria de la sgte forma:

y si borramos los //

A partir de aca todo lo que necesitan es imaginacion, les voy a dar algunas funciones mas que pueden necesitar a lo largo del desarrollo de aplicaciones en este lenguaje:

size(200,100);
stroke(255,0,0);//te permite cambiar el color del dibujo actual
point(50,50);//función de punto(x,y), fijará el pixel en 50,50 al color del lienzo actual (rojo)
fill(#CC6600);//es lo que hace que el sgte triangulo sea verde, stroke hace que lo rodee una linea roja
triangle(12,50, 120,15, 125,60);
noFill( );//no hace ningun llenado
ellipse(160,30,60,60);
curve(84, 91, 68, 19, 21, 17, 32, 100);//otra forma de hacer curvas, igual a bezier pero los parámetros de en medio establecen los puntos para definir la forma de la curva
bezier(84, 91, 68, 19, 21, 17, 32, 100);//Los parámetros de en medio otorgan el contexto para definir la forma de la curva
noStroke();//deshabilita los bordes y no son dibujados

Hasta aqui todo lo basico de progressive, despues veremos un poco mas, como figuras, framerate, condicionales, bucles, etc

c’ ya