Exercício 17: Photocheap Filtros

O código a seguir, cria filtros para uma imagem para dar um ar de imagem envelhecida, o primeiro cria ruídos na imagem, o segundo deixa a imagem em tons de cinza, o terceiro deixa a imagem avermelhada, e o ultimo deixa a imagem amarelada, a seguir sera explicado como cada filtro atua.

Ruido: A variável pos guarda o numero  de pixels da imagem original que foi copiada, um numero randômico de inteiro de 0 até pos-1 é gerado para indicar um pixel da imagem, e nesse pixel é adicionado 16 a cada canal, esse numero pode ser ajustado. o numero de passos para o laços pode ser controlado, aumentando ou diminuído o numero de pixel a serem alterados,  no exemplo o numero de passos é 100000.

Cinza: Baseado na percepção das cores pelo ser humano cada cor da image, é multiplicado por um valor que representa a porcentagem de percepção que o ser humano tem daquela cor, depois uma variável media soma todos os canais já multiplicados, tendo assim a média ponderada das cores, e em todos os canais da imagem resultante a variável media é setada, resultando na imagem em tons de cinza.

Vermelho: O  filtro a seguir copia as cores G e B para a imagem resultante, e adiciona 64 ao canal R e copia para imagem resultante.,

Amarelo: Esse filtro é bem parecido com o ultimo, só que para adicionar amarelo, é necessário adicionar valor nos canais vermelho e verde.

Código-Fonte:

PImage img;
PImage imgRuido;
PImage imgCinza;
PImage imgRed;
PImage imgYellow;

float media,r,b,g;
int pos;
void setup(){
  size(800,600);
  img = loadImage("opa.jpg");
  imgRuido = createImage(640,447,RGB);
  imgCinza = createImage(640,447,RGB);
  imgRed = createImage(640,447,RGB);
  imgYellow = createImage(640,447,RGB);
 
  for (int x=0; x<640; x++) {
    for (int y=0; y<447; y++) {
      pos=y*640+x;
   
     imgRuido.pixels[pos] = img.pixels[pos];
     imgRed.pixels[pos] = img.pixels[pos];
     
    }

  }
    //Ruido
     int p =0;
     for (int i=0; i<100000; i++) {
          p = (int)random(0,pos-1);
         
           r=red(imgRuido.pixels[p])+16;
           g=green(imgRuido.pixels[p])+16;
           b=blue(imgRuido.pixels[p])+16;
         
          imgRuido.pixels[p] = color(r,g,b);
          imgCinza.pixels[p] = color(r,g,b);
     }
   
     //Cinza
     for (int x=0; x<640; x++) {
      for (int y=0; y<447; y++) {
        pos=y*640+x;
     
           r=red(imgRuido.pixels[pos])*0.3;
           g=green(imgRuido.pixels[pos])*0.59;
           b=blue(imgRuido.pixels[pos])*0.11;
         
           media = r+g+b;
     
       imgCinza.pixels[pos] = color(media,media,media);
     
       
        }
 
      }
   
     //Vermelho
     for (int x=0; x<640; x++) {
      for (int y=0; y<447; y++) {
        pos=y*640+x;
     
           r=red(imgCinza.pixels[pos])+64;
           g=green(imgCinza.pixels[pos]);
           b=blue(imgCinza.pixels[pos]);
     
       imgRed.pixels[pos] = color(r,g,b);
     
       
        }
 
      }
     
       //Amarelo
       for (int x=0; x<640; x++) {
        for (int y=0; y<447; y++) {
        pos=y*640+x;
     
           r=red(imgRed.pixels[pos])+64;
           g=green(imgRed.pixels[pos])+64;
           b=blue(imgRed.pixels[pos]);
     
       imgYellow.pixels[pos] = color(r,g,b);
     
       
        }
 
      }
     
 
}

void draw() {
  //image(img,0,0);
  //image(imgRuido,0,0);
  //image(imgCinza,0,0);
  //image(imgRed, 0, 0);
  image(imgYellow,0,0);
}

Exercício 16: Brilho da Imagem

O código a seguir é bem simples e usa o mesmo código da atividade FadeIn para ajustar o brilho da imagem, a grande diferença é que ha uma variável que controla o brilho, ela varia de -0.5 até 0.5, para isso ha uma pequena razão para uma metade da tela e outra para outra metade. Desse jeito a variável se comporta da maneira desejada, depois multiplica-se a variável brilho por 255 e o resultado é somado a cada canal daquele pixel da imagem, resultando em um aumento de brilho rustico porém funcional.

Código-Fonte:

PImage imgOriginal;
float r,g,b,brilho;
int pos;

void setup(){
  size(320,240);
  imgOriginal = loadImage("opa.jpg");
}

void draw(){
  loadPixels();
 
  if(mouseX>width/2){
  brilho= (mouseX*0.5)/width;
  }else if(mouseX<width/2){
    brilho= ((width/2-mouseX)*-0.5)/(width/2);
  }
  println(brilho);
 

  for(int x=0;x<320;x++){
    for(int y=0;y<240;y++){
      if(brilho<=0.5){
      pos=y*320+x;
        r = 255*brilho + red(imgOriginal.pixels[pos]);
        g = 255*brilho + green(imgOriginal.pixels[pos]);
        b = 255*brilho + blue(imgOriginal.pixels[pos]);
        pixels[pos] = color(r,g,b);
      }
    }
  }
   
    updatePixels();
}

Exercício 15: Relógio Digital

Para a criação do relógio digital, foi desenvolvida uma função que calcula dezenas e unidades e baseadas nela seleciona e mostra a imagem correspondente a dezena e a imagem considerando a posição x e y passadas, criando a dezena na posição x passada e a unidade 100 pixels para direita, essa função é usada para mostrar as horas, os minutos e os segundos.


Resultado:

Código-Fonte:


PImage i0, i1, i2, i3, i4, i5, i6, i7, i8, i9;

void setup() {
  size(800, 600);

  i0 = loadImage("0.png");
  i1 = loadImage("1.png");
  i2 = loadImage("2.png");
  i3 = loadImage("3.png");
  i4 = loadImage("4.png");
  i5 = loadImage("5.png");
  i6 = loadImage("6.png");
  i7 = loadImage("7.png");
  i8 = loadImage("8.png");
  i9 = loadImage("9.png");
}

void draw() {

  println(hour()+":"+minute()+":"+second());

  calculaDU(hour(),width-750,height/2-54);
  calculaDU(minute(),width-500,height/2-54);
  calculaDU(second(),width-250,height/2-54);
  fill(0);
  ellipse(width-525,height/2-20,20,20);
  ellipse(width-525,height/2+20,20,20);
  ellipse(width-275,height/2-20,20,20);
  ellipse(width-275,height/2+20,20,20);
}

void calculaDU(int valor, int X, int Y) {
  int dezena = valor/10;
  int unidade = valor%10;

  //println("dezena: "+dezena+" unidade: "+unidade);

  switch(dezena) {
  case 0:
    image(i0, X, Y);
    break;
  case 1:
    image(i1, X, Y);
    break;
  case 2:
    image(i2, X, Y);
    break;
  case 3:
    image(i3, X, Y);
    break;
  case 4:
    image(i4, X, Y);
    break;
  case 5:
    image(i5, X, Y);
    break;
  case 6:
    image(i6, X, Y);
    break;
  case 7:
    image(i7, X, Y);
    break;
  case 8:
    image(i8, X, Y);
    break;
  case 9:
    image(i9, X, Y);
    break;
  }

  switch(unidade) {
  case 0:
    image(i0, X+100, Y);
    break;
  case 1:
    image(i1, X+100, Y);
    break;
  case 2:
    image(i2, X+100, Y);
    break;
  case 3:
    image(i3, X+100, Y);
    break;
  case 4:
    image(i4, X+100, Y);
    break;
  case 5:
    image(i5, X+100, Y);
    break;
  case 6:
    image(i6, X+100, Y);
    break;
  case 7:
    image(i7, X+100, Y);
    break;
  case 8:
    image(i8, X+100, Y);
    break;
  case 9:
    image(i9, X+100, Y);
    break;
  }
}

Exercício 14: O Olho Que Tudo vê

O código a seguir cria um "olho" que fica olhando para a direção do mouse, para fazer isso foi usado as coordenadas polares para restringir a movimentação da pupila a área da Esclerótica. É calculado a tangente entre o as posições mouseY-height/2 e mouseX-width/2, e a partir dessa tangente é calculado um angulo resultante. após isso é só chamar a função das coordenadas polares (retornaLinha) passando o raio e o angulo. Dependendo do quadrante o programa adiciona um valor ao angulo, para que este retorne o equivalente no quadrante especifico.

Código-Fonte:

int meioX, meioY;
float x, y, anguloRes=0;

void setup() {
  size(800, 800);
  meioX = width/2;
  meioY = height/2;
  mouseX=1;
}

void draw() {
  background(0);

  if(mouseX!=0)
  {
    anguloRes=degrees(atan(float(mouseY-height/2)/float(mouseX-width/2)));
    println(anguloRes);
  }
  if(mouseX<width/2 && mouseY>height/2 || mouseX<width/2 && mouseY<height/2)
  {
    anguloRes=anguloRes+180;
    println(anguloRes);
  }
  if(mouseX>width/2 && mouseY<height/2)
  {
    anguloRes=anguloRes+360;
    println(anguloRes);
  }


  println(anguloRes);
  retornaLinha(25, anguloRes);


  fill(255);
  ellipse(meioX, meioY, 100, 100);
  fill(0);
  ellipse(meioX+x,meioY+y,40,40);

}

void retornaLinha(float r, float ang) {

  x = r * cos(radians(ang));
  y = r * sin(radians(ang));
}

Exercício 13: O Relógio de Segundos

O código a seguir cria um pequeno relógio com um único ponteiro de segundos. O programa é simples e usa coordenadas polares. Ao iniciar a variável tempoInicial salva o tempo em milisegundos inicial, depois o programa testa sempre no inicio da funcao draw se entre tempoAtual e o tempoInicial  a diferença e maior igual a 1000 (1 segundo), se sim, incrementa a variáveis segundos em 1, outro teste reinicia a variável segundos para 0, a posição do ponteiro e gerada usando uma função de coordenadas polares, e seu angulo e calculado com uma pequena razão: (Segundos*360)/60. Depois disso é só inverter o x, para que o ponteiro gire em sentido horário, e diminuir 270 no angulo para que ele comece de cima.



Código-Fonte:

int meioX, meioY,tempoInicial,tempoAtual,segundos=0,anguloRes=0;
float x,y;

void setup(){
  size(800,600);
  meioX = width/2;
  meioY = height/2;
  tempoInicial = millis();
}

void draw(){
  background(0);
 
  tempoAtual = millis();
 
  if(tempoAtual-tempoInicial>=1000){
    segundos++;
    if(segundos>=60){segundos=0;}
    tempoInicial=tempoAtual;
    println("Segundos: "+segundos);
    println("Tempo Inicial: "+tempoInicial);
  }

    anguloRes = (segundos*360)/60;
    retornaLinha(50,anguloRes-270);
    //line(0,meioY,width,meioY);
    ellipse(meioX,meioY,100,100);
    line(meioX,meioY,meioX+(x*-1),meioY-(y));
   
}

void retornaLinha(float r, float ang){
 
      x = r * cos(radians(ang));
      y = r * sin(radians(ang));
     
}

Exercício 12: Barco - SS Seno

O código é bem simples é calculado uma variação baseado no seno de um angulo x, as ondas são formadas pelo segmento de elipses e o "barco" e representado por um retângulo com as duas quinas inferiores arredondadas, a variação é multiplicada por um valor, pois esta só vai de 0 a 1. Após isso, é so adaptar para o "barco" ficar em cima da onda e antes de seu final.

Apesar de não ficar tão realista (o barco não reage a a bruscas mudanças de atitude), o resultado é razoavelmente satisfatório.


Código-Fonte:
void setup() {

  size(800, 600);
  //noStroke();
}

float x = 0;
void draw() {

  float y = sin(x);
  x+=0.01;

  stroke(0);
  fill(92,51,23);
  rect(x*75-475, height/2 +y*25-20, 50, 20, 0, 0, 12, 12);
  noStroke();
  fill(0,25,128);
  ellipse(x*75, height/2 +y*25, 5, 5);
}

Exercício 11: Função cria polígonos(Fazendo o trabalho do processing)

Esse código cria polígonos regulares baseado no numero de lados e um "raio".

A função criaPoligono recebe o raio e o numero de lados. baseado no numero de lados a função gera as coordenadas X e Y dos vértices do polígono, exemplo: 4 lados ele gera coordenadas de três pontos, sendo o ultimo também o primeiro, após gerar os valores ela os guarda em dois vetores X e Y criadas com o numero de índices sendo o numero de lados.

Após isso linhas são desenhadas com as coordenadas, tendo um pequeno tratamento de exceção para ArrayOutOfBounds, para se o próximo índice não existir, indicar para o primeiro índice.

A segunda função se difere apenas na opção de passar o centro do poligono.

Pretendo atualizar esse código usando o código da flor x para deixar os pontos em x invés de +.

Código-Fonte:

float x,y;
void setup() {
  size(800, 600);

  //criaPoligono(120,4);
  criaPoligono2(120,4,width/2,height/2);

 //linhas centrais que cruzam a tela
  line(0,height/2,width,height/2);
  line(width/2,0,width/2,height);
}

void draw() {
  retornaLinha(2,60);

  //println("X = "+x+" Y = "+y);
  //line(width/2,height/2,int(x)*16,int(y)*16);
}

void retornaLinha(float r, float ang){
      int[] numbers = new int[3];
   

      x = r * cos(radians(ang));
      y = r * sin(radians(ang));
   
      //pontos[0] = int(x);
     // pontos[1] = int(y);

}


void criaPoligono(float r, int lados){
      int[] X = new int[lados];
      int[] Y = new int[lados];
   
   
      int angulo = 360 / lados;
      int yopa = 0;
      int cont = 0;
      while(cont<lados){

      x = r * cos(radians(yopa));
      y = r * sin(radians(yopa));
   
      X[cont] = int(x);
      Y[cont] = int(y);
   
      strokeWeight(2);
     // line(width/2+int(x),height/2+int(y),int(x)+width/2,int(y)+height/2);
      println("X = "+x+" Y = "+y);
      cont++;
      yopa+=angulo;
   
      }
   
      cont=0;
      while(cont<lados){
   
        try{
        line(X[cont]+width/2,Y[cont]+height/2,X[cont+1]+width/2,Y[cont+1]+height/2);
        }catch(Exception e){
          line(X[cont]+width/2,Y[cont]+height/2,X[0]+width/2,Y[0]+height/2);
        }
   
      cont++;
   
      }
   

}

void criaPoligono2(float r, int lados, int centerX, int centerY){
      int[] X = new int[lados];
      int[] Y = new int[lados];
   
   
      int angulo = 360 / lados;
      int yopa = 0;
      int cont = 0;
      while(cont<lados){

      x = r * cos(radians(yopa));
      y = r * sin(radians(yopa));
   
      X[cont] = int(x);
      Y[cont] = int(y);
   
      strokeWeight(2);
     // line(width/2+int(x),height/2+int(y),int(x)+width/2,int(y)+height/2);
      println("X = "+x+" Y = "+y);
      cont++;
      yopa+=angulo;
   
      }
   
      cont=0;
      while(cont<lados){
   
        try{
        line(X[cont]+centerX,Y[cont]+centerY,X[cont+1]+centerX,Y[cont+1]+centerY);
        }catch(Exception e){
          line(X[cont]+centerX,Y[cont]+centerY,X[0]+centerX,Y[0]+centerY);
        }
   
      cont++;
   
      }
   

}