[Tutorial Processing] Imágenes

[singlepic id=782 w=480 float=center]El uso de imágenes en nuestros programas, es algo esencial  es lo que le dará vista y un toque de atractivo a nuestra interfaz. Las imágenes las podemos usar desde un fondo para el programa, un botón, etc.

Processing cuenta con un tipo de dato para trabajar con imágenes, estamos hablando de PImage que nos permitirá almacenar en ella una imagen desde un archivo local o vía web mediante una URL, ademas cuenta con funciones para el manejo de las imágenes, estas son:

loadImage(filename, extension): Nos permite cargar una imagen directamente desde un archivo local o desde via web, como primer parámetro recibe la ruta o URL del archivo a cargar, el segundo parámetros es opcional en el caso de que la extensión del archivo no se encuentre implícita en la ruta. Los tipos de archivo que puede cargar son ( .gif, .jpg, .tga, .png).

image(img, a, b, c, d): Dibuja la imagen en la ventana, el primer parámetro es de tipo PImage que contiene la imagen que se dibujara, el parámetro a y b determinan la posición x, y respectivamente de la imagen a partir de la esquina superior izquierda, los parametros c y d determinan el ancho y largo de la imagen en pixeles, en caso de omitir estos dos últimos parámetros la imagen tendrá el tamaño original.

tint(r, g, b, a): Permite aplicarle un tinte a la imagen antes de mostrarla en pantalla, como parametro recibe un color, los primeros 3 parametros son las escalas de Red Green y Blue, el ultimo es el alpha y es opcional

noTint(): Elimina el tinte aplicado a una imagen.

Estas funciones son las básicas para poder trabajar con imágenes, existen mas funciones para poder crear nuestras propias imágenes y modificar pixel por pixel si así se desea, pero no es el alcance de este tutorial por lo que lo veremos en otra ocasión. Ahora hagamos un ejemplo bastante sencillo, cargaremos dos imágenes  una para reemplazar el cursor y otra para usarla de fondo, mientras tengamos presionado un botón del mouse se aplicara un tinte que variara en función de la posición del mouse.

[code language=”java”]
//creamos las variables de imagen
PImage pic, cur;

void setup() {
//Cargamos una imagen para usarlos de fondo
pic=loadImage("http://blog.make-a-tronik.com/wp-content/uploads/2013/01/5983663656_28428bbe6d_b.jpeg");
//Cargamos una imagen para usarla en el cursor
cur=loadImage("http://blog.make-a-tronik.com/wp-content/uploads/2012/08/mario.gif");

frameRate(24);
size(800, 600);
//eliminamos el cursor
noCursor();
}

void draw() {
//si se presiona un boton
if (mousePressed)
//cambiamos el tinte usando como parametros la posicion del mouse
tint(map(mouseX, 0, width, 0, 255), map(mouseY, 0, height, 0, 255), 255);
//dibujamos la imagen del fondo
image(pic, 0, 0, 800, 600);
//eliminamos el tinte
noTint();
//cargamos la imagen del cursor
image(cur, mouseX, mouseY);
}
[/code]

Es todo por ahora, para el próximo tutorial veremos como insertar texto en nuestros programas y como crear nustras propias funciones.

Adrian MB

Me gusta la electrónica, programación y todo lo relacionado. Ing. en Mecatronica de la UPIITA del IPN y estudiante de Diseño Industrial en la UAM. @adrianmtzb http://adrianmb.mx

También te podría gustar...