Processing/JS

Imagen

En procesing podemos leer y mostrar imagenes. se usan las funciones:

PImage, loadImage(), image()
tint(), noTint()

Una imagen de fotografía digital esta formada por pixels, si tiene 320 pixels de ancho y 240 pixels de alto, el número de pixels que tiene es 76.800. si es una imagen de 1280 x 1024 tiene 1,310.720 pixels (1,3 Mpixels). La profundidad de color es el número de valores que definen cada pixels, 2 valores definen el blanco o negro, una profundidad de color de 8 pixels define 256 valores, y una profundidad de color de 24 bits de uso corriente en las tarjetas gráficas actuales define 16,777,216 de colores.

Processing puede leer los formatos: GIF, JPEG, y PNG.

Format Extension Color depth Transparency
GIF .gif 1-bit a 8-bit 1-bit
JPEG .jpg 24-bit Ninguna
PNG .png 1-bit a 24-bit 8-bit

Imágenes en formato GIF suelen usarse para gráficos con un número limitado de colores (máx 256)  o si necesitas un bit de transparencia.

El formato PNG es similar al GIF pero soporta full color y 256 niveles de transparencia.
El formato JPEG es adecuado para almacenar fotos, Con fotos tiene la capacidad de reducir su tamaño sin perder prácticamente calidad.

Con processing puedes leer imágenes y cambiar su tamaño, posición, opacidad y color. Hay un tipo de datos que se llama PImage. Que almacena las variables de la imagen. Primero es necesario leerla con la función loadImage() asegurandonos de incluir la extensión como parte del nombre (ej.: “pulpo.gif”, gato.jpg”, “luis.png”). Debemos asegurarnos que la imagen esta en la carpeta data para que pueda ser leida por processing.

image(nombre, x, y)
image(nombre, x, y, width, height)

Los parámetros que permite la imagen son: su nombre la posición y el tamaño. Deben estar en una variable PImage()

Ejemplo:

size(400, 536);
PImage img;
// La imagen debe estar en la carpeta data del proyecto
img = loadImage("10.jpg");
image(img, 0, 0);

La function tint(). Se usa de manera similar a lo que ya hemos visto para fill() y stroke(), pero afecta exclusivamente a las imágenes.

tint(gray)
tint(gray, alpha)
tint(valor1, valor2, valor3)
tint(valor1, valor2, valor3, alpha)
tint(color)

El efecto se puede anular con la function noTint()

En este ejemplo cargamos la misma imagen dos veces, una tintada de gris y otra no.

size(400, 536);
PImage img;
// La imagen debe estar en la carpeta data del proyecto
img = loadImage("10.jpg");
tint(102); // Tint gray
image(img, 0, 0);
noTint(); // Disable tint
image(img, 200, 0);

En este ejemplo es similar pero tiñendo la foto de azul:

size(400, 536);
PImage img;
// La imagen debe estar en la carpeta data del proyecto
img = loadImage("10.jpg");
tint(0, 153, 204); // Tint blue
image(img, 0, 0);
noTint(); // Disable tint
image(img, 200, 0);

En este ejemplo definimos tres colores que luego asignamos con tint() a la imagen.

size(400, 536);
color yellow = color(220, 214, 41);
color green = color(110, 164, 32);
color tan = color(180, 177, 132);
PImage img;
img = loadImage("10.jpg");
tint(yellow);
image(img, 0, 0);
tint(green);
image(img, 100, 0);
tint(tan);
image(img, 200, 0);

Ejemplo asignando valores alpha de transparencia.

size(400, 536);
PImage img;
img = loadImage("10.jpg");
background(255);
tint(255, 102); // Alpha a 102 sin cambiar el color
image(img, 0, 0, 200, 268);
tint(255, 204, 0, 153); // Alpha a 153 y color amarillo
image(img, 100, 100, 200, 268);

Imágenes GIF y PNG guardan la información de transparencia cuando las leemos con processing,