Question

Very simple thing I’m trying to do here. I would like to have 2 images on top of one another. When i use my mouse event dragged and clicked on the top image, the area of the top level image selected will fade and make the lower image visible.

The way I see it, there are 2 ways I can do this:

I can make the top image Transparent over time (within the selected area)
or
I can delete the pixels individually in a spray can style fashion. Think the spray can tool from MS paint back in the day.

Heres some very basic code that i started which just lays the images on top of eachother

  PImage sand;
  PImage fossil;

void setup()
{
  size(400,400);
  background(255,255,0);
  frameRate(30);

  fossil = loadImage("foss.jpg");
  sand = loadImage("sand.jpeg");
}

void draw()
{

   image(fossil, 0, 0, width,height);
   image(sand, 0, 0, width,height);
   smooth();

 if (mousePressed) {
    fill(0);
    tint(255,127); //the opacity function
  } else {
    fill(255);
  } 
}

So has anyone any comments on these 2 ways of creating opacity or perhaps there an easier way I’ve overlooked?

---

Perhaps I wasn’t clear in my Spec as the 2 comments below are asking for clarification.

In its simplest terms, I have 2 images on top of each other. I would like to be able to make some modification to the top level image which would make the bottom image visible. However I need to make this modification to only part of the top level image.

I would like to know which is the better option. To make part of the top image become transparent using tint() or to delete the pixels from the top layer.

Then I will proceed with that approach. Any indication as to how to do it is also appreciated.

I hope this clears up any confusion.

Answer 1

If you simply want to crossfade between images, it can be with tint() as you code suggest. You were in fact quite close:

PImage sand;
PImage fossil;

void setup()
{
  size(400, 400);
  fossil = loadImage("CellNoise.jpg");
  sand = loadImage("CellVoronoi.jpg");
}

void draw()
{
  //tint from 255 to 0 for the top image
  tint(255,map(mouseX,0,width,255,0));
  image(fossil, 0, 0, width, height);
  //tint from 0 to 255 for the bottom image - 'cross fade'
  tint(255,map(mouseX,0,width,0,255));
  image(sand, 0, 0, width, height);
}

For the “spray can style ” erosion you can simply copy pixels from a source image into the destination image. It’s up to you how you loop through pixels (how many, what order, etc.) to get the “spray” like effect you want, but here’s a basic example of how to use the copy() function:

PImage sand,fossil;
int side = 40;//size of square 'brush'
void setup()
{
  size(400, 400);
  fossil = loadImage("CellNoise.jpg");
  sand = loadImage("CellVoronoi.jpg");
}
void draw()
{
  image(fossil, 0, 0, 400, 400);
  if(mousePressed) {
    for(int y = 0 ; y < side ; y++){
       for(int x = 0; x < side; x++){
        //copy pixel from 'bottom' image to the top one
        //map sketch dimensions to sand/fossil an dimensions to copy from/to right coords
        int srcX = (int)map(mouseX+x,0,width+side,0,sand.width);
        int srcY = (int)map(mouseY+y,0,height+side,0,sand.height);
        int dstX = (int)map(mouseX+x,0,width+side,0,fossil.width);
        int dstY = (int)map(mouseY+y,0,height+side,0,fossil.height);
        fossil.set(dstX, dstY, sand.get(srcX,srcY));
       }
     }
  }
}

Note what I am simply looping to copy a square (40×40 in my case), but you can find other fun ways to loop and get different effects.

Have fun!