Tarefa 14 - Efeito KNOB

Nessa tarefa temos que criar uma aplicação que simula o funcionamento do  knob, realizando o efeito dissolve entre duas imagens de acordo com a posição vertical do mouse.

O knob é uma palavra inglesa que significa: botão ou maçaneta. No Brasil, geralmente é utilizada para designar potenciômetros de ajuste ou teclas de equipamentos eletrônicos. Como na imagem abaixo:

Assim, nesta atividade iremos substituir o knob pelo movimento do mouse, que determinará o aparecimento ou desaparecimento de uma imagem.

Para realização dessa atividade utilizamos essas duas imagens:

 Imagem que vai aparecer inicialmente

Imagem que aparece após a movimentação do mouse.

Eis o código:

PImage imgGoku, imgGokuSS;

float a = 0;

float r,g,b,r1,g1,b1;

int pos;

void setup(){

  size(180,300);

  imgGoku = loadImage("goku.jpg");

  imgGokuSS = loadImage("gokuss.jpg");

}

void draw(){

  loadPixels();

  

  a = (float(mouseY)*1)/(height-1);

  

  for (int x = 0; x < 180; x++){

    for (int y = 0; y < 300; y++){

      pos = y * 180 + x;

      

      r = (1-a)*red(imgGoku.pixels[pos]);

      g = (1-a)*green(imgGoku.pixels[pos]);

      b = (1-a)*blue(imgGoku.pixels[pos]);

      

      r1 = a*red(imgGokuSS.pixels[pos]);

      g1 = a*green(imgGokuSS.pixels[pos]);

      b1 = a*blue(imgGokuSS.pixels[pos]);

      

      pixels[pos] = color(r + r1, g + g1, b + b1);

      

    }

  }

  

  updatePixels();

}