Crossfade

Criar uma aplicação que realiza o crossfade entre 3 imagens de acordo com a posição vertical do mouse.

Imagens Usadas:

         


Código:

PImage img1;
PImage img2;
PImage img3;

float controle = 0.0;

void setup() {
  size(461, 539);
  img1 = loadImage("sora1.jpg");
  img2 = loadImage("sora2.jpg");
  img3 = loadImage("sora3.jpg");
}

void draw() {
  background(255);

  // controle varia de 1 ate 4
  controle = 3 * (mouseY/(float)height) + 1;

  float alpha;

  // controle entre 1.0 e 2.5 define o alpha da img1
  if (controle < 2.5) {
    alpha = (controle - 1.0)/1.5;
    alpha = 1.0 - alpha;
  } else {
    alpha = 0.0;
  }

  tint(255, alpha * 255);
  image(img1, 0, 0);

  // controle entre 1 e 4 define o alpha da img2
  alpha = abs(controle - 2.5)/1.5;
  alpha = 1.0 - alpha;

  tint(255, alpha * 255);
  image(img2, 0, 0);


  // controle entre 2.5 e 4 define o alpha da img3
  if (controle > 2.5) {
    alpha = (controle - 2.5)/1.5;
  } else {
    alpha = 0.0;
  }
   
  tint(255, alpha * 255);
  image(img3, 0, 0);

}

Resuldado:

 

T02 - Vídeo tutorial sobre o T01 da disciplina de M.A.M.I.

Este é um vídeo tutorial explicando o que fiz no primeiro trabalho parcial da disciplina de Matemática Aplicada à Multimídia Interativa. Ele equivale ao segundo trabalho parcial da disciplina.

Link: https://youtu.be/jZkYpz3jCM0

Histograma

A aplicação seguinte mostra o histograma dos canais RGB (do azul ao vermelho) da imagem mostrada.

Imagem:

Código:

int [] tons = new int[256];
PImage img;

void setup() {
  size(640, 480);
  int pos, t;
  img = loadImage("sora.jpg");
  for (int x = 0; x < 640; x++) {
    for (int y = 0; y < 480; y++) {
      pos = y*480 + x;
      t = (int)red(img.pixels[pos]);
      tons[t] = tons[t] + 1;
    }
  }
  int maior = tons[0];
  int tom = 0;
  for (int i =1; i<256 i="">
    if (tons[i]>maior) {
      maior = tons[i];
      tom = i;
    }
  }
    for (int i =0; i<256 i="">
    float tamanho = (tons[i]*height)/maior;
    fill(0);
    rect(i*2, height-tamanho, 2, height );
  }
}

Resultado:

Envelhecimento Digital

A aplicação seguinte mostra exemplos de envelhecimento digital de uma imagem, com adição de ruídos, amarelos e vermelhos.

Código:

PImage imgOriginal;
PImage imgCopia = createImage(320, 240, RGB);
PImage imgCopia2 = createImage(320, 240, RGB);
PImage imgCopia3 = createImage(320, 240, RGB);
float r;
float g;
float b;
float amarelo;
int vermelho;
int pos;

void setup() {
  size(1280, 240);
  imgOriginal = loadImage("imagem.jpg"); 
  for (int x = 0; x<320 i="" x="">
    for (int y = 0; y<240 i="" y="">
      pos = y*320+x;
      r = red(imgOriginal.pixels[pos]);
      g = green(imgOriginal.pixels[pos]);
      b = blue(imgOriginal.pixels[pos]);
      amarelo =40;
      vermelho = 40;
      float media = (r+g+b)/3;
      
      float ruido = random(-15, 15);
      imgCopia.pixels[pos] = color(media+ruido, media+ruido, media+ruido);
      imgCopia2.pixels[pos] = color(media+amarelo+ruido, media+amarelo+ruido, media-amarelo+ruido);
      imgCopia3.pixels[pos] = color(media+vermelho, media, media);
    }
  }
}

void draw() {
  image(imgOriginal, 0, 0); 
  image(imgCopia, 320, 0);
   image(imgCopia2, 640, 0);
 image(imgCopia3, 960, 0);
}

Resultado:

Ajustes de Imagem

A aplicação a seguir ajusta uma determinada imagem aplicando filtros como negativo, escalas de cinza e variação de brilho.

Código:

PImage imgOriginal;
PImage imgCopia = createImage(320, 240, RGB);
PImage imgCopia2 = createImage(320, 240, RGB);
PImage imgCopia3 = createImage(320, 240, RGB);
PImage imgCopia4 = createImage(320, 240, RGB);
PImage imgCopia5 = createImage(320, 240, RGB);
int pos;
float r, g, b;
float brilho;
float valor_do_brilho = -0.5;


void setup() {
  size(960, 480);

  imgOriginal = loadImage("original.jpg");
  for (int x = 0; x < 320; x++) {
    for (int y = 0; y < 240; y++) {
      pos = y * 320 + x;
      r = red (imgOriginal.pixels[pos])  ;
      g = green(imgOriginal.pixels[pos]) ;
      b = blue(imgOriginal.pixels[pos]) ;

      float media = (r + g + b)/3;
      float media2 = (0.3*r + 0.59*g + 0.11*b)/1;

      float complemento_Blue = 255 - b;
      float complemento_Green = 255 - g;
      float complemento_Red = 255 - r;

      color cor = color(r, g, b); 

      brilho = brightness(cor);
      brilho = brilho * valor_do_brilho;

      imgCopia.pixels[pos] = color(complemento_Red, complemento_Green, complemento_Blue);
      imgCopia2.pixels[pos] = color(r, g, b);
      imgCopia3.pixels[pos] = color(media, media, media);
      imgCopia4.pixels[pos] = color(media2, media2, media2);
      imgCopia5.pixels[pos] = color(r+brilho, g+brilho, b+brilho);
    }
  }
}

void draw() {
  image(imgCopia, 0, 0);
  image(imgCopia2, 320, 0);
  image(imgCopia3, 320+320, 0);
  image(imgCopia4, 0, 240);
  image(imgCopia5, 320, 240);
}

Resultado:

Relógio

Aplicação que exibe um relógio mostrando horas, minutos e segundos, de acordo com o relógio do computador executado.

Código:

PImage I_Unidade_Hora;
PImage I_Dezena_Hora;
PImage I_Unidade_Minutos;
PImage I_Dezena_Minutos;
PImage I_Unidade_Segundos;
PImage I_Dezenas_Segundos;

void setup() {
  size(870, 121);
}

void draw() {
  background(255);

  int s = second();

  int unidade_segundos = s%10;
  int dezenas_segundos = s/10;

  int m = minute(); 

  int unidade_minutos = m%10;
  int dezenas_minutos = m/10;

  int h = hour(); 

  int unidade_hora = h%10;
  int dezena_hora = h/10;

  int numero = 99;

  int dezenas = numero/10;

  I_Dezena_Hora = loadImage(dezena_hora+".gif");
  I_Unidade_Hora = loadImage(unidade_hora+".gif");
  I_Dezena_Minutos = loadImage(dezenas_minutos+".gif");
  I_Unidade_Minutos = loadImage(unidade_minutos+".gif");
  I_Dezenas_Segundos = loadImage(dezenas_segundos+".gif");
  I_Unidade_Segundos = loadImage(unidade_segundos+".gif");


  image(I_Dezena_Hora, 0, 0);
  image(I_Unidade_Hora, 150, 0);
  image(I_Dezena_Minutos, 300, 0);
  image( I_Unidade_Minutos, 450, 0);
  image( I_Dezenas_Segundos, 600, 0);
  image( I_Unidade_Segundos, 750, 0);

  fill(0);
  ellipse(284, 47, 10, 10);
  ellipse(284, 77, 10, 10);
  ellipse(583, 47, 10, 10);
  ellipse(583, 77, 10, 10);
}

Resultado:

Olho Tonto

Recriar uma imagem que se assemelha um olho, onde a íris (círculo interno) acompanha a direção do mouse, sem sair da área do círculo externo.

Código:

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

void draw() {

  int r = 100;

  int x = mouseX;
  int y = mouseY;
  background(0);
  fill(255);
  ellipse(width/2, height/2, 3*r, 3*r);
  
  fill(0);

  if (mouseX < 140) {
    x = 140;
  }
  if (mouseX > 260) {
    x = 260;
  }
  if (mouseY < 140) {
    y = 140;
  }
  if (mouseY > 260) {
    y = 260;
  }

  float cat_Oposto = height/2-mouseY;
  float cat_Adjacente = width/2 - mouseX;

  float passe_Hipotenusa = sq(cat_Oposto)+sq(cat_Adjacente);
  float hipotenusa = sqrt(passe_Hipotenusa);

  println(hipotenusa, mouseX, mouseY);
  float SENO = (mouseY - height/2)/ hipotenusa;
  float COSSENO = (mouseX - width/2)/ hipotenusa;

  float distanciaY =(mouseY - height/2)*SENO;
  float distanciaX =(mouseX - width/2)*COSSENO;


  float distanciaX1 = COSSENO*r ;
  float distanciaY1 = SENO*r ;

  float distanciaD = hipotenusa - 100;

  float AREA = 2*PI*sq(r);

  float calculoX = distanciaX1+width/2;
  float calculoY = distanciaY1+height/2;

  if (hipotenusa < 100) {
    calculoX = mouseX;
    calculoY = mouseY;
  }
  ellipse(calculoX, calculoY, 80, 80);
}

Resultado:

Cronômetro Segundos

Uso da função "millis" para recriar um cronômetro que marca os segundos, mostrados através do "println".

Código:

float angulo = 360/60;
int raio = 100;


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

void draw() {
  int m = millis();
  float segundos = m/1000;

  println(segundos);


  background(255);
  noFill();
  ellipse(width/2, height/2, 210, 210);
  line(width/2, height/2, width/2 + raio* cos(radians(segundos*angulo- 15*angulo)), height/2 +raio* sin(radians(segundos*angulo - 15* angulo)));
}

Resultado:

Movimento de um Barco

Usando as funções Seno e Cosseno foi possível recriar o movimento de um barco no mar. Aplicando-se os conceitos das funções pra mostrar a amplitude e o período da onda do mar, e num retângulo representando o barco em movimento sobre a onda.

Código:

int xspacing = 16;   
int w;              
float theta = 0.0;  
float amplitude = 15.0;  
float period = 250.0;  
float dx;  
float[] yvalues;
int angulo;

void setup() {
  size(640, 360);
  w = width+16;
  dx = (TWO_PI / period) * xspacing;
  yvalues = new float[w/xspacing];
}

void draw() {
  background(0);
  calcWave();
  renderWave();
  
  angulo ++;

  if (angulo >360) {
    angulo =0;
  }
  float seno = sin(radians(angulo));
  float coseno = cos(radians(angulo));
  
  rectMode(CENTER);
    fill(100, 255, 200);
    rect(width/2, 20*seno+height/2, 50, 20);
    
}

void calcWave() {
  
  theta += 0.02;
  
  float x = theta;
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x)*amplitude;
    x+=dx;
  }
}

void renderWave() {
  noStroke();
  fill(255);
  
  for (int x = 0; x < yvalues.length; x++) {
    fill(0, 150, 150);
    ellipse(x*xspacing, height/2+yvalues[x], 16, 16);
  }
}

Resultado:

Polígono Regular

A aplicação seguinte cria um polígono regular centralizado na tela, onde o número de lados é informado e pode ser alterado pra qualquer quantidade desejável, através de uma variável declarada no início do código. Ele se inicia no ponto central e gira em torno dele dependendo do número de lados declarado, usando o comando "rotate".
No exemplo seguinte usei um polígono de 5 lados, um pentágono.

Código:

int t = 100;
int l = 5;
int a = 360/l;

void forma(int a, int t) {
  for (int i = 0; i < l-1; i ++ ) {
    translate(t, 0);
    rotate(radians(a));
    line(0, 0, t, 0);
  }
}

void setup() {
  background(255);
  size(500, 500);
}


void draw() {
  translate(width/2-50, height/2-80);
  line(0, 0, t, 0);
  forma(a, t);
}

Resultado: