Valoración:

 

1 voto

0 comentarios

Avanzando con Processing

Avanzando para programar con Processing.

Loops: Estructuras de repetición

Otro elemento básico en cualquier programa son las estructuras de repetición.

El código:

for(int i=0;i<10;i++){
println(i);
}

Incrementa uno a uno el valor de "i" y lo escribe en la consola.

Y volviendo al ejemplo de la elipse que se mueve hacia la derecha, ahora lo podemos multiplicar:

float pos;

void setup(){
size(400,100);
pos = 13;
}

void draw(){

pos = pos + 0.2;

for(int i=10;i<100;i=i+20){
ellipse(pos,i,20,20);
}
}

 

Variables y Funciones propias de Processing

Además de setup y draw, hay algunas variables predeterminadas en p5 que son my útiles a la hora de programar en esta plataforma:

Variables:

width: ancho de la ventana

height:altura de la ventana

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

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

pmouseX: posición del ratón en el eje X en el frame anterior

pmouseY: posición del ratón en el eje Y en el frame anterior

 

Funciones:

mousePressedd(): se ejecuta cuando se presiona el botón izquierdo del ratón

mouseReleased(): se ejecuta cuando se presiona el botón derecho del ratón

Comenzamos a interactuar con el ratón

Cuando lo que programamos va destinado a la web, y con Processing es una posibilidad, el ratón será muy amenudo el elemento de interfície a través del cual interactuará el visitante en nuestra web.

Aquí hay cuatro ejemplos mouy sencillos que cuando evolucinan del primer al último nivel de interacción gráfica.

En el primer ejemplo la interacción es con el eje vertical del ratón.

En el segundo ejemplo, con la vertical y la horizontal.

En el tercero, cambiamos la instrucción background por un rect ya que así podemos utilizar el valor de alfa (y veremos que efecto provoca).

En el cuarto ejemplo, el alfa también afecta a la bola.

Podemos ver como con una interacción tan básica y tan poco trabajo gráfico se puede comenzar a obtener resultados medianamente interesantes...

 

Dibujando...

Otra manera de interactuar con el ratón es convertirlo en una herramienta de dibujo.

Dos ejemplos extremadamente básicos:

El primero no hace más que dibujar algo sonde esté el ratón.

El segundo hace lo mismo pero aplicando un fondo con alfa.

Y un tercero para recordar que no hace falta que el raon tenga un solo elemento.

Follow me

Otra manera de interactuar con el ratón, y que los objetos interactuen entre sí, es utilizando el valor distancia:

Aquí tenéis un ejemplo que juega con la distancia en el eje X y en el eje Y y aquí hay otro ejemplo que juega también con la distancia absoluta.

En este ejemplo podréis verr como se calcula realmente la distancia, todo y que Processing tiene una función propia dist() que hace exactamente esto pero a puntos de dos y de tres dimensiones.

Una array es una estructura que almacena varios valores de un mismo tipo. Es necesario entenderlo como una serie de variables.

Funciones

Las funciones son bloques de código que nos ayudan a organizarnos y a simplificar nuestra tarea.

Las funciones pueden recibir parámetros. De hecho, las hemos estado utilizando desde que hemos hecho la primera línea.

Line(20,20,100,100); no es más que la invocación de la función line, que recibe en este caso cuatro parámetros. La diferencia entre esto y las funciones que hemos hecho nosotros es que aquí no veamos que pasa dentro de la función line, porque esta es propia del programa (siempre queda el recurso de ir al código fuente, si la curiosidad nos llama).

También es una función que no devuelve nada. Es decir, que la invocamos por si sola, sin esperar que como resultado obtengamos un valor (un número, por ejemplo). No es el caso de la función get(), que nos retorna un valor de color. Es por eso  que hemos hecho cosas como:

color MiColorTanBonito = get(20,30);

Aquí estamos invocando una función que nos retorna un valor del tipo de cada color, y es por eso que al llamar a la función estamos asignando lo que será el resultado de una varible que coincide con lo que hace el tipo de dato al que será devuelto por la función.

Una vez más, get es una función de la que no veremos el código.

En los siguientes ejemplos, si que lo veremos, ya que se trata de funciones que creamos nosotros a nuestra convivencia.

En el primero, vemos como se invoca una función que no recibe ningún parámetro ni devuelve nada:

dibuixamUnXupaXup();

También como se declara esta función:

void dibuixamUnXupaXup(){

//CÓDIGO DE LA FUNCIÓN

}

---

En el segundo, la función recibe parámetros:

dibuixamUnXupaXup(int_x, int_y){

//CÓDIGO DE LA FUNCIÓN

}

Probar de enviarle también el diámetro, la medida del palo y el color.

---

Tercer ejemplo: la función devuelve un valor pero no recibe parámetros:

int num = quantsPixelsBlancs();

y la funció...

int quantsPixelsBlanc(){

//CÓGIDO DE LA FUNCIÓN

return valor;

}

---

Y finalmente, el cuarto ejemplo, la función devuelve y recibe:

int num = quantsPixelsColor(vermell);

y la función...

int quantsPixelsColor(color_c){

//CÓDIGO DE LA FUNCIÓN

return valor;

}

Imagen fija

3_blog

Siguiendo unos ejemplos de trabajo con imagen fija en Processing. Cada uno más complejo. Pensar que todo lo que el código puede utilizar como cualquier otro elemento gráfico, y dibujarla antes o después de otros elementos o imágenes, y también la podemos analizar y utilizar usando los valores de colores.

El primer ejemplo es tan simple como esto:

size(400,300);
background(0);

//abrir un objeto foto
PImage foto;
//cargar una foto al objeto
foto = loadImage(”ramon.jpg”);
//dibujar la foto
image(foto, 50, 35);

 

Simplemente crea un objeto imagen(necesario en p5 para usar las imágenes y finalmente dibuja la imagen en el punto 50, 35.

Un segundo ejemplo ya utiliza a nuestros amigos setup y draw. Dibuja la imagen a partir del punto donde hay el ratón sin redibujar nunca el fondo.

El tercer ejemplohace lo mismo, pero si que redibuja el fondo, con un verde con un valor alfa bajo.

Y llega el momento de hacer el análisis.

La función get() nos devuelve un valor de color de la coordenada que especifiquemos en los parámetros. Así, get(mouseX,mouseY), nos devolverá el valor del color del píxel sobre el que se encuentra el ratón (en forma del tipo de dato color).

Para entenderlo más rápidamente, mirar el cuarto ejemplo, que se expllica por si mismo (y sino hay el código...)

 

Texto

Des del punto de vista de código, trabajar con texto y con imagen tiene muchas cosas a ver, en Processing. Aquí hay tres ejemplos de texto:

Ejemplo uno

Ejemplo dos

Ejemplo tres

Sonido...Sonia

Sonia es una librería de sonido para Processing.

Una librería, en programación, es un conjunto de funciones y métodos. Un tipo de amplición de las capacidades de un programa.

Processing tiene librerías internas (openGL, net...) y librerías externas. Las externas las hacen otros desarrolladores fuera de p5, y enriquecen mucho el proyecto. Aún así no todas son compatibles con todos los sistemas ni versiones de p5, y hay más estables y más bien documentadas que otras.

La primera librería que hubo para sonido es Sonia, hecha por Amit Pitaru.

Si la queréis utilizar seguir las instrucciones en su web. Tendréis que instalar el plug-in de jSynth y los archivos de la librería de vuestra instalaciń de Processing...y después podréis probar estos ejemplos que copio aquí, ya que no funcionana en la web (por cuestiones de seguridad) por que utilizan la entrada de un micrófono.

Ejemplo1:

/*
joan soler-adillon
joan.cat
setembre 2006
Simplificación de unos de los ejemplos de sonia.pitaru.com
*/

import pitaru.sonia_v2_9.*; // automcatically added when importing the library from the processing menu.

void setup(){
size(200,200);
Sonia.start(this); // Start Sonia engine.
LiveInput.start(); // Start LiveInput
}

void draw(){

background(0,0,0);
float soundLevel = LiveInput.getLevel(); //assignar el valor de liveinput a
println(soundLevel);
ellipse(width/2,height/2,soundLevel*200,soundLevel*200);
}

// Safely close the sound engine upon Browser shutdown.
public void stop(){
Sonia.stop();
super.stop();
}
———————-
———————-
Ejemplo 2:

/*
joan soler-adillon
joan.cat
setembre 2006
*/

import pitaru.sonia_v2_9.*; // automcatically added when importing the library from the processing menu.

void setup(){
size(200,200);
Sonia.start(this); // Start Sonia engine.
LiveInput.start(); // Start LiveInput
background(0);
fill(255,32);
noStroke();
}

void draw(){

float soundLevel = LiveInput.getLevel(); //assignar el valor de liveinput a
println(soundLevel);
if(soundLevel > 0.4){//el màxim és 0.5
int posicioX = int(random(width));//haremos un número aleatorio para la posició X, convirtiendo a INT el resultado de random()
int posicioY = int(random(height));//el mismo para la posició Y
ellipse(posicioX,posicioY,soundLevel*50,soundLevel*50);//hacemos que la medida dependa del nivel de sonido así hay un poco de variació
}

}

// Safely close the sound engine upon Browser shutdown.
public void stop(){
Sonia.stop();
super.stop();
}

void mousePressed(){
background(0);
}

Foto_1_small

Publicado por sarok el 1 de Septiembre de 2008

Publicado por

  • Nn_tt_big Comisariado de Nuevas Tecnologías

    1 de Septiembre de 2008