Knob mudando as imagens

Na aula sobre chroma key, foi pedido que fosse produzido uma aplicação no Processing que simulasse o efeito de um knob, que é um aparelho que faz um efeito de dissolver uma imagem para outra apenas mexendo uma manivela de forma gradual.

Segue abaixo o código comentado com um gif no final demonstrando o efeito.

//variáveis das imagens
PImage img1;
PImage img2;
/*variáveis que irão armazenar o valor RGB de cada uma das imagens que o laço
percorrer*/
float r1, g1, b1, r2, g2, b2;
//variável que irá guardar a posição do pixel da imagem quando percorre o laço
int pos;
//modificadores que irão variar dependendo de mouseY
float a, d;

void setup(){
  size(320, 240);
  img1 = loadImage("original.jpg");
  img2 = loadImage("original2.png");
}

void draw(){
 
  loadPixels();
 
  /*primeira imagem, que terá o "a" como modificador, será uma fração de mouseY em
  relação o tamanho da tela*/
   a = float(mouseY)/height;
   d = 1 - a;
 
  //segunda imagem, o mesmo que foi comentado anteriormente
  d = float(mouseY)/height;
  a = 1 - d;
   /*o laço percorre ambas as imagens, guardando os valores dos respectivos pixels
   em suas variáveis para formar a imagem final*/
   for( int x=0; x<320; x++){
     for(int y=0; y <240; y++){
       pos = y*320 + x;
       //recebimento dos valores RGB da primeira imagem
       r1 = a*red(img1.pixels[pos]);
       g1 = a*green(img1.pixels[pos]);
       b1 = a*blue(img1.pixels[pos]);
     
       //recebimento dos valores RGB da segunda imagem
       r2 = red(img2.pixels[pos])*d;
       g2 = green(img2.pixels[pos])*d;
       b2 = blue(img2.pixels[pos])*d;
       //formação da imagem, dependendo da posição do mouse
       pixels[pos] = color(r1 + r2, g1 + g2, b1 + b2);
     }
   }
 
 
   updatePixels();
}