a port of the Processing Visualization Language


Move the pointer left and right across the image to change its position. This program overlays one image over another by modifying the alpha value of the image with the tint() function.

Original Processing.org Example: Transparency

// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

// @pjs preload must be used to preload the image so that it will be available when used in the sketch  

/* @pjs preload="data/construct.jpg,data/wash.jpg"; */

PImage a, b;

float offset;

void setup() 


  size(200, 200);

  a = loadImage("data/construct.jpg");  // Load an image into the program 

  b = loadImage("data/wash.jpg");   // Load an image into the program 



void draw() 


  image(a, 0, 0);

  float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0);

  offset += (offsetTarget-offset)*0.05; 

  tint(255, 153);

  image(b, offset, 20);

Fork me on GitHub