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();
}

Trabalho: Parte II

O olho do observador

Na aula de arco tangente, foi pedido para a sala de aula que produzisse uma aplicação no processing que simulasse um olho que seguiria o cursor do mouse.

Para isto, bastava calcular a inclinação que uma reta teria do centro até a posição que está o mouse, depois fazer duas circunferências: uma que represente a parte externa do olho e outra a pupila, que seguiria o cursor do mouse se limitando a ficar dentro da circunferência externa.

Durante a produção deste código, me lembrei do conhecido monstro de Dungeons and Dragons, o Beholder, e resolvi ilustrar o efeito colocando uma figura dele.

Segue o código abaixo comentado.

PImage beholder;
//variável que considera mouseX e o comprimento da tela
float a = 0;
//variável que considera mouseY e a altura da tela
float b = 0;
//variável que armazena o arco tangente
float arctan;



void setup(){
size(600,600);
beholder = loadImage("beholder.jpg");

}


void draw(){
  fill(255);
  background(255);
  //imagem do beholder
  image(beholder, 15, 50);
 
  //circunferência externa
 
  ellipse(width/2, height/2, 150,150);
  noStroke();
  fill(0);
  arctan = atan2(mouseY-height/2, mouseX-width/2);
  if(arctan<0){
    arctan += 2*PI;
  }
 
  a = mouseX - width/2;
  b = mouseY - height/2;
  //distância máxima que a "pupila" percorre
  a = 75*a/300*cos(arctan);
  b = 75*b/300*sin(arctan);
  //circunferência de dentro é feita considerando os quatro quadrantes dela
 
  //primeiro quadrante
 
 
  if(arctan>=0 && arctan<PI/2){
   
  ellipse(width/2 + a, height/2 + b, 25, 25);
 
  //segundo quadrante
  }else if(arctan>=PI/2 && arctan<PI){
   
  ellipse(width/2 - a, height/2 + b, 25, 25);
   //terceiro quadrante
  }else if(arctan>=PI && arctan<3*PI/2){
   
  ellipse(width/2 - a, height/2 - b, 25, 25);
  //quarto quadrante
  }else if(arctan>=3*PI/2 && arctan<2*PI){
   
  ellipse(width/2 + a, height/2 - b, 25, 25);
  }
 
}

Relógio de segundos

Na aula que foi apresentado o conceito de coordenadas polares, foi pedido como tarefa que os alunos produzissem no Processing uma aplicação que demonstrasse ser um relógio de segundos tendo seu ponteiro indicando o tempo correto utilizando a função millis(), a qual é uma função .

Considerando que o ponteiro irá ter sua extremidade percorrendo uma circunferência (o formato do relógio é redondo) e pra cada segundo o ângulo em radianos considerado é 2*PI/60 (referente aos sessenta segundos de um minuto), podemos chamar a função millis() e considerar que, dentro de um laço, enquanto millis (que será iniciado no primeiro frame da animação) dividido por 1000(resultando em um segundo no tempo que se passou) for diferente de 0, a linha será redesenhada em seguida.

Na coordenada X do fim da linha, será considerada o cosseno do ângulo (em radianos) multiplicado pelo tempo(uma variável que é incrementada a cada vez que o código é executado) menos PI/2 (isso é feito porque o ponteiro é iniciado no meio da parte superior da circunferência). Já a coordenada Y é considerado o seno do ângulo sob as mesmas condições já citadas.

Segue abaixo o código comentado.

float tempo = 0;
float ang = 2*PI/60;

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

void draw(){
  background(255);
  //aqui é esperado um segundo antes do código continuar a ser lido
  while (millis()%1000 != 0){}
  //coloração da circunferência
  stroke(0);
  //circunferência que representa o relógio
  ellipse(width/2, height/2, 400, 400);
  //coloração do ponteiro
  stroke(125, 0, 0);
  //cálculo de onde a linha será desenhada a cada segundo
  line(width/2,height/2,width/2 + 180*cos(tempo*ang - PI/2),height/2 + 180*sin(tempo*ang - PI/2));
  tempo++;
}

Fazer um polígono com qualquer número de lados

Dentre as atividades passadas para serem feitas e postadas neste blog, foi pedido que fosse produzido uma função no Processing que recebesse um número e retornasse um polígono com o número de lados relativo ao número que foi recebido.

Para a produção deste polígono, consideramos como base uma circunferência. Na produção deste polígono, temos que considerar que cada ângulo em radianos formado entre os lados deste polígono é referente a divisão de 2*PI radianos e o número de lados deste polígono.

Em seguida, é feito um laço que produz linhas que conectam os vértices do polígono. Para a coordenada X é considerado o cosseno do ângulo e para a coordenada Y é considerado o seno do ângulo.

O código comentado pode ser visto abaixo.

//raio da circunferência
int raio = 200;
//número de lados do polígono
int lados = 6;

void setup(){
  size(600,600);
  //ângulo do lado interno do polígono
  float ang = 2*PI/lados;
  /*circunferência que serve de base, retire o comentário
  para ver a circunferência ao executar o código*/
  //ellipse(width/2,height/2,2*raio,2*raio);
  //cálculo do local que fica cada vértice do polígono
  for (int i =0;i<lados;i++){
    line(width/2+raio*cos(i*ang),height/2 + raio*sin(i*ang), width/2 + raio*cos((i+1)*ang),height/2 + raio*sin((i+1)*ang));
  }
}