Aula -18 Aplicação de Sliders para controle de valores de uma imgem

A tarefa 18 consiste em criar uma aplicação onde a partir dos sliders colocados seja possível manipular os tons de cinza, vermelho e amarelo da imagem, além de acrescentar ruido à imagem.

Primeiramente, utilizando o código dado em sala de aula criei 5 slider (um para os tons de vermelho, outro pros tons de amarelo, outro para escala de cinza e outro para adicionar ruído.

Para adicionar os tons de vermelho utilizei  o incremento do slider (de 0 a 100) e acrescentei aos tons de vermelho (r) da imagem original. Assim fiz para os demais tons, sendo que nos amarelos utilizei o slider para somar aos tons vermelho e verde da imagem original.

Para o ruído, criei uma função separada e a imagem destino configurada para o padrão HSB

PImage imgDestinoR = createImage(320, 240, HSB);

Usei a variável "granulado" variando de 0 a 4000 no slider para que a dentro da função ruido() ela pudesse cobrir o maior número de pixels possíveis da imagem original.

Todas as aplicações foram criadas em imagens separadas para que a visualização fosse melhorada.

Segue o código para verificação:

import controlP5.*;
ControlP5 gui; //objeto 



PImage imgOriginal;//classe
PImage imgDestinoV = createImage(320, 240, RGB);
PImage imgDestinoA = createImage(320, 240, RGB);
PImage imgDestinoC = createImage(320, 240, RGB);
PImage imgDestinoR = createImage(320, 240, HSB);


color corOriginal, corDestinoV, corDestinoA, corDestinoC, corRuido;
float h, s, b, r, g, bl, mediap, vermelho, amarelo, cinza, nr, ng, nb, imgRuido, granulado;

void setup() {
  
  colorMode(RGB, 100);
  size(960, 500);
  background(0);
  imgOriginal = loadImage ("original.png");

  image (imgOriginal, 0, 0);


  gui=new ControlP5(this);
  gui.addSlider("vermelho")
    .setRange(0, 100)
    .setValue(0)
    .setPosition(20, 300)
    .setSize(100, 30);

  gui=new ControlP5(this);
  gui.addSlider("amarelo")
    .setRange(0, 100)
    .setValue(0)
    .setPosition(20, 350)
    .setSize(100, 30);

  gui=new ControlP5(this);
  gui.addSlider("cinza")
    .setRange(0, 10)
    .setValue(0)
    .setPosition(20, 400)
    .setSize(100, 30);

  gui=new ControlP5(this);
  gui.addSlider("granulado")
    .setRange(0, 4000)
    .setValue(0)
    .setPosition(20, 450)
    .setSize(100, 30);
}
void draw() {
  
  processaImagem();
  ruido();

  image (imgDestinoV, 320, 0);
  image (imgDestinoA, 640, 0);
  image (imgDestinoC, 640, 240);
  image (imgDestinoR, 320, 240);
  println(cinza);
}

void ruido() {

  imgDestinoR = loadImage("original.png");

  for (int i=0; i < granulado; i++) {
    int x = (int) random(0, 320);
    int y = (int) random(0, 240);

    corOriginal = imgOriginal.get(x, y);

    h = hue(corOriginal);
    s = saturation(corOriginal);
    b = brightness(corOriginal);

    corRuido = color(h*granulado, s*granulado, b*granulado);
    imgDestinoR.set(x, y, corRuido);
  }
}

void processaImagem() {

  for (int x=0; x<320; x++) {//scanline percorre toda a imagem
    for (int y=0; y<240; y++) {

      corOriginal=imgOriginal.get(x, y);//get pega cada pixel da cor da imagem original

      r=red(corOriginal);
      g=green(corOriginal);
      bl=blue(corOriginal);

      nr=map(cinza, 0, 100, 0, 10);

      
      mediap =(r*0.3+0.59*g+0.11*bl); //melhor aplicação dos tons médios de cinza com os pesos correspondetes ao RGB

      corDestinoV = color (r+vermelho, g, bl);// 
      corDestinoA = color( r+amarelo, g+1+amarelo, bl);
      imgDestinoV.set(x, y, corDestinoV); 
      imgDestinoA.set (x, y, corDestinoA); 
      if (cinza<=0) {
        corDestinoC = color (r, g, bl);
        imgDestinoC.set(x, y, corDestinoC);
      } else {
        corDestinoC = color (mediap*nr, mediap*nr, mediap*nr);
        imgDestinoC.set(x, y, corDestinoC);
      }
    }
  }
}