Exercício 15 - Knob

Neste exercício será necessário criar uma aplicação que simula o funcionamento de um knob, realizando o efeito dissolve entre duas imagens de acordo com a posição vertical do mouse. Em sala foi pedido para fazer um fade in/out com uma imagem, então aproveitarei o código para realizar esse exercício.

Para fazer a mecânica de dissolve com o mouse primeiro será necessário fazer uma proporção, o tamanho da altura da imagem será entre 0 e 1, enquanto um valor aumenta o outro diminui, com duas variáveis a1 e a2:

  a1 = (mouseY*1.0/240); 

  a2= ((height*1.0/240)-(mouseY*1.0/240));

       

Com isso, será apenas necessário importar as imagens, a primeira recebendo a1*RGB e a outra recebendo  a2*RGB, por fim, pixels[pos] irá receber as somas das cores dos RGBs :

 PImage imgImagem1,imgImagem2;

float a1=1;
float a2=0;
float r, g, b,r2,g2,b2;
int pos;

void setup() {
  size(320, 240);
  imgImagem1 = loadImage("imagem1.jpg");
  imgImagem2 = loadImage("imagem2.jpg");
}

void draw() {
  //a1= alpha que aumenta, a2=alpha que diminui 
  a1 = (mouseY*1.0/240);
  a2= ((height*1.0/240)-(mouseY*1.0/240));
  
  loadPixels();
  for (int x=0; x<320; x++) {
    for (int y=0; y<240; y++) {
      pos= y * 320 + x;
      
      r = a1*red(imgImagem1.pixels[pos]);
      g = a1*green(imgImagem1.pixels[pos]);
      b = a1*blue(imgImagem1.pixels[pos]);
      r2 = a2*red(imgImagem2.pixels[pos]);
      g2 = a2*green(imgImagem2.pixels[pos]);
      b2 = a2*blue(imgImagem2.pixels[pos]);
      pixels[pos]= color(r+r2, g+g2, b+b2);
    }
  }
  updatePixels();
}

Download do arquivo .pde com as imagens: Knob