Because of the bottle shape, I am currently using a rectangular layer to cover the image of a full bottle water.
I draw an empty bottle on top of the over lay. As I resize the overlay height, it creates an animation of the water going up.

However, I have the problem with the overlay. As it keeps getting resized, the overlay become more visible to the background.

I was wondering if there a way I can crop the image instead of resizing it. Or if there any other way to make this animation work.

1. PImage a;
   PImage b;
   PImage c;
   PImage d;
   void setup() {
     b = loadImage("vol_pipette.png");
     a= loadImage("overlay.png");
     c= loadImage("beaker.png");
     d= loadImage("liquid.png");
     size(980, 920);
      frameRate(45);
   }
   int h2=0;
   int h1=0;
   int h=0;
   
   void draw(){
     background(255, 255, 255);
     image(b, 380, 130);
     if (h < 509) h++;
    
     a=reSize(a,74,509-h);
     image(a, 405, 137);
    
     image(b, 380, 130);
     image(c, 405, 560);
     h2++;
     if(h2%15 ==0){
       if(h1<27) h1++;
         if(h1<27) d.resize(53,27-h1);
     }
     image(d, 418, 609+h1);
   } 
   
   
   PImage reSize(PImage src,int w,int h) {
     PImage dest = new PImage(w,h,src.format);
     src.loadPixels();
     dest.loadPixels();
     for(int y = 0; y< dest.height;y++) {
       int y2 = floor(map(y,0,dest.height,0,src.height));
       for(int x = 0; x< dest.width;x++) {
         int x2 = floor(map(x,0,dest.width,0,src.width));
         dest.pixels[y*dest.width+x] = src.pixels[y2*src.width+x2];
       }
     }
     dest.updatePixels();
     return dest;
   }