Podemos utilizar imágenes bitmap (jpg, png...) en nuestos dibujos. Para ello tenemos que colocar la imagen dentro de la carpeta "data" del sketch (localizarla con "show sketch folder").

 

Imagen de fondo

Podemos cargar una imagen de fondo sobre la que se dibujen las formas posteriores.

 

background("sky.jpg");

 

 

PImage img1;

void setup() {
  size(800, 600);
  img1 = loadImage("sky.jpg");
  noLoop();
  }

void draw() {
  fill(255, 60);
  background (img1);
  for (int i=0; i<20; i++) {
  strokeWeight(random(8));
  rect(random(width), 140+random(100), 60, random(400) );
  }
  }

 

 

Dibujando imágenes
Creamos un objeto del tipo PImage, que cargará la imagen:

PImage img1;

Cargamos el archivo desde el disco:

img1 = loadImage("photo01.jpg");

Dibujamos la imagen en cualquier parte de la pantalla:

image (img1, 20,50);

La imagen se dibuja en su tamaño original (en píxeles). 
Podemos reescalarla añadiendo como parámetros el ancho y alto:

image (img1, 20,50, 400,250);

 

Tiñendo la imagen
Podemos aplicar un filtro que coloree la imagen:

tint (20,40,200); // el color de teñido en RGB
image (img1, 20,50);

 

y utilizarlo para crear un efecto de transparencia, incluyendo el valor alpha:

tint (20,40,200,90); // el último parámetro define la transparencia
image (img1, 20,50);

 

 

// código completo de esta imagen:
PImage img1;

void setup() {
  size(800, 600);
  img1 = loadImage("img01.jpg");
  }

void draw() {
  background (255);
  tint (255, 255, 255, 255);
  image (img1, 20, 20, 400, 250);
  tint (255, 90, 0, 90); //el color de teñido en RGB 
  image (img1, 50, 50, 400, 250);
  tint (190, 90, 255,100); // el último parámetro define la transparencia
  image (img1, 80, 80, 400, 250);
  }

Modos de fusión
Podemos conseguir efectos similares a los modos de fusión de capas utilizando blend en vez de image:

blend(img, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);


Los modos disponibles son:

BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN

 

 

 

// código completo de esta imagen:

PImage img1;

void setup() {
   size(800, 600);
   img1 = loadImage("img01.jpg");
   }

void draw() {
   background (255);
   tint (255, 255, 255, 255);
   image (img1, 20, 20, 400, 250);
   blend(img1, 0, 0, 400, 250, 70, 70, 400, 250, DARKEST);
   blend(img1, 0, 0, 400, 250, 120, 120, 400, 250, MULTIPLY);
   blend(img1, 0, 0, 400, 250, 190, 190, 400, 250, EXCLUSION);
   }

 

Copiando fragmentos

Podemos copiar partes de la imagen, especificando el fragmento de origen y su posición final:

copy(src, sx, sy, sw, sh, dx, dy, dw, dh)

 

Nos permite ampliar y reducir los fragmentos copiados, ya que definimos el tamaño de destino (sw,sh - source width y height ) y el tamaño de destino (dw, dh - destination width y height).

 

// código completo de esta imagen:

PImage img1;

void setup() {
   size(800, 600);
   img1 = loadImage("img02.jpg");
   }

void draw() {
   background (255);
   image (img1, 20, 20, 400, 250);
   copy(img1, 100, 100, 50, 30, 420, 270, 50, 30);
   copy(img1, 200, 160, 100, 60, 480, 270, 100, 60);
   copy(img1, 200, 260, 100, 60, 280, 310, 100, 60);
   copy(img1, 300, 260, 100, 60, 80, 300, 150, 90);
   copy(img1, 554, 263, 25, 15, 440, 20, 300, 180);
   copy(img1, 718, 160, 25, 15, 440, 370, 300, 180);
   copy(img1, 120, 386, 15, 20, 20, 440, 390, 80);
   }

 

Filtros y efectos

Podemos aplicar algunos efectos a la imagen dibujada en pantalla:

filter(INVERT);

filter(BLUR, 6);

Afecta a toda la imagen en pantalla, no podemos aplicarlo en zonas.

Los efectos posibles son:
THRESHOLD, GRAY OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE

 

 

Imágenes desde Internet

Podemos cargar la imagen desde un servidor web, especificando su ruta completa:

String url = "https://processing.org/img/processing-web.png";

// Load image from a web server 

webImg = loadImage(url, "png");

Para evitar que el sketch intente utilizar la imagen antes de que se haya descargado completamente,  utilizamos requestImage() que emplea una hebra diferente, en paralelo a la ejecución del programa principal.

 

Puntos de una imagen

Podemos acceder a puntos concretos de una imagen:

get(x, y); //devuelve un color

y cambiar el color de esos puntos individuales: set(x,y);

 

Crear una imagen vacía

Podemos crear una imagen y llenar sus puntos directamente desde código:

createImage(w, h, format); // format: RGB, ARGB, ALPHA 

 

La matriz de la imagen Podemos acceder directamente a la matriz en la que se guardan los datos de todos los píxeles de una imagen, y leer o modificar su contenido:

 

PImage img = createImage(66, 66, RGB); 

img.loadPixels();

for (int i = 0; i < img.pixels.length; i++) {

  img.pixels[i] = color(i/14, 90, 102-i);

}

img.updatePixels();

image(img, 17, 17);

 

La imagen en pantalla La mayor potencia de trabajo con la imagen ya dibujada en pantalla se obtiene accediendo a la matriz en que se han cargado los valores de todos sus píxeles. Tenemos que cargarla previamente:

 

loadPixels();

for (int i = 0; i < halfImage; i++) {

    pixels[i+halfImage] = pixels[i];

  //modificamos los píxeles uno a uno

}

updatePixels();

 

// código completo de esta imagen:
PImage img1;

void setup() {
   size(800, 600);
   img1 = loadImage("img03.jpg");
   }

void draw() {
  background (255);
  tint (255, 255, 255, 255);
  image (img1, 0, 0, 400, 250);
  blend(img1, 0, 0, 400, 250, 70, 70, 400, 250, DARKEST);
  blend(img1, 0, 0, 400, 250, 120, 120, 400, 250, MULTIPLY);
  blend(img1, 0, 0, 400, 250, 190, 190, 400, 250, EXCLUSION);
  loadPixels();
  for (int i = 0; i < 240000; i++) { 
    pixels[i+400] = pixels[i]; //modificamos los píxeles uno a uno
    }
  }

Tutorial completo en Processing.org

https://www.processing.org/tutorials/pixels/

...