Estudo para Prova - Chroma Key

Fiz esse código para estudar para a prova, já que tinha perdido essa aula.

Para fazer o Chroma Key, criei a máscara baseada na imagem e no cenário. Então percorri os pixels da máscara usando 2 for e para substituir, eu criei um IF onde ele perguntava se a cor era braco(255,255,255) ou não. Se fosse branco, substituia pela imagem do personagem, se não,
substituía pelo cenário.

Exemplo de Prova - Histograma

Para criar a aplicação, fiz um for que percorria toda a imagem e usei o comando "brightness" para receber a claridade da imagem. Depois outro for para desenhar linhas recebendo esse valor de claridade, formando um gráfico.

Trabalho 2 - Espirógrafo Átomo

Parte 1 - O que é um Espirógrafo

Para iniciar o trabalho, primeiro tive que entender o que era um espirógrafo, eu já tive uma dessas ferramentas quando era criança, mas não fazia ideia do seu nome.

O espirógrafo é uma ferramenta de desenho que produz curvas matemáticas conhecidas como hipotroclóides e epitroclóides.

Como funciona um Espirógrafo

Um espirógrafo consiste em um conjunto de engrenagens de plástico e outras formas como anéis, triângulos, ou barras retas. Existem vários tamanhos e formas de engrenagens, e todas as extremidades possuem dentes para se encaixar em outras peças. Uma caneta é usada tanto para desenhar quanto para promover a força locomotiva; é requerida alguma prática sobre Espirógrafo para poder operá-lo através das peças fixas e móveis.

Espirógrafo

Exemplos de Desenhos feitos com Espirógrafos

Parte 2 - Inspiração

Para realizar meu próprio espirógrafo, busquei inspiração em alguma forma, para fazer algo que não fosse somente um desenho aleatório, decidi então que faria um espirógrafo que se inspirasse, pelo menos no início, no formato de um átomo.

O Átomo é uma unidade básica de matéria que consiste num núcleo central de carga elétrica positiva envolto por uma nuvem de eletrões de carga negativa. Ele é representado geralmente por esse símbolo:

Parte 3 - O Código

Para realizar os desenhos do espirógrafo, utilizei obviamente dos calculos de seno e coseno de variáveis de raio já informadas previamente. Usando o comando BeginShape, o código utiliza de um for que vai se incrementando patra desenhar a forma baseada nos calculos trigonometricos. O comando vertex então desenha as formas conectando uma série de vértices recebendo os valores do raio.

Para interação, adicionei comandos para os três botões do mouse, o esquerdo incrementa com um valor aleatório o valor do raio inicial, o esquerdo diminui e o do meio muda a cor do desenho. Interessante notar que, mesmo com valores alatórios, o código ainda consegue formar imagens interessantes e bonitas de certa forma, pois esses valores aleatórios passam por um calculo trigonométrico e já terminam em um certo padrão matemático.

Para deixar o código mais interessante e que não ficasse tão estático, adicionei também um movimento ao desenho formado.

Código:

int x = 0;

float raio1 = 7;

float raio2 = 4;

float raio = raio1/raio2;

float R = 450;

float r = R/raio;

float angulo = 0;

float inc = PI/60;

color espi = color(random(10, 245), random(10, 245), random(10, 245));

void setup() {

  size(800, 500);

  smooth();

  noFill();

  strokeWeight(2);

  frameRate(60);

  if (raio < 1) { 

    R = 225*raio/(1-raio/2); 

    r = R/raio;

  }

}

void draw() {

  background(0);

  fill(255);

  text ("Use o Mouse", 10, 140);

  text ("Esquerdo - Modifica o Desenho(aumenta o raio)", 10, 160);

  text ("Direito - Modifica o Desenho(diminui o raio)", 10, 170);

  text ("Meio - muda a cor", 10, 180);

  noFill();

  ellipse (50, 80, 50, 80);

  ellipse (50, 60, 5, 10);

  line (30, 60, 70, 60);

  line (50, 60, 50, 40);

  translate(width/2, height/2);

  translate(abs(R-r)/2*cos(angulo), abs(R-r)/2*sin(angulo));

  stroke(espi);

  strokeWeight(3);

  espi();

  angulo += inc;

}

void espi() {

  beginShape();

  for (float i=0; i<angulo; i+= PI/100) {

    vertex(abs(R-r)/2*cos(i) + r/2*cos(-i*raio), abs(R-r)/2*sin(i) + r/2*sin(-i*raio));

  }

  endShape();

}

void mousePressed() {

  if (mouseButton == LEFT) {

    raio=-random(1, 10);

  } else if (mouseButton == RIGHT) {

    raio=+random(1, 10);

  } else { 

    espi = color(random(10, 245), random(10, 245), random(10, 245));

  }

}

Screenshot:

Gráficos de lançamento de moedas

Para fazer essa aplicação, usei o código para sorteio de lançamento de moeda mostrado em sala. Para gerar os gráficos em barra, somente diminui o valor do resultado pela altura da aplicação para fazer com que ele ficasse no fundo da tela e fiz com que a altura dos retangulos fosse igual ao valor de Caras ou Coroas.

Para o gráfico de pizza, só precisei fazer um arco de pizza com um doa valores em cima de uma ellipse completa, o que sobrou do círculo fica demostrado com a elipse atrás da mesma cor dos gráficos de barra.Para transformar o valor de porcentagem em radianos, fiz uma regra de três.

Código:

void setup () {
  size (400, 200);
  int Sorteado;
  int Caras = 0, Coroas = 0;
  for (int i = 0; i < 100; i++) {
    Sorteado = (int(random(2)));
    if (Sorteado == 0)
      Caras++;
    else
      Coroas++;
  }
  noStroke();
  fill(#F51E1E);
  rect (200, height-Caras, 30, Caras);
  fill(#1CCAEA);
  rect (260, height-Coroas, 30, Coroas);
  fill(0);
  text("Caras "+Caras, 140, height);
  text("Coroas "+Coroas, 300, height);
  text("Caras "+Caras+"%", 80, 150, height);
  text("Coroas "+Coroas+"%", 80, 60, height);
  println(Caras);
  println(Coroas);
  float radCaras = (6.28*Caras)/100;
  float radCoroas = (6.28*Coroas)/100;
  fill(#1CCAEA);
  ellipse (50, 100, 80, 80);
  fill(#F51E1E);
  arc(50, 100, 80, 80, 0, radCaras, PIE);
  println("Caras: " + Caras);
  println("Coroas: " + Coroas);
}

CrossFade

Tentei fazer esse código da forma mais simples, então usei o comando tint(), que mexe no alpha da imagem. Coloquei o valor do alpha para pegar a posição Y do mouse e então consegui um crossfade de uma forma bem concisa.

Envelhecimento de Imagem

Para fazer esse código usei alguns comandos do anterior (fazer o upload de imagem e deixá-la com tons de cinza).

Para deixar em tons de sépia, usei o comando tint() que pinta uma imagem da cor escolhida, e para gerar o ruído, usei 2 "for", um com tons de laranja e o outro preto, eles geravam centenas de círculos minúsculos aleatórios em toda imagem, gerando assim, um noise.

Imagem Original:

Resultado:

Código:

PImage imgOriginal;

PImage imgCopia = createImage(800, 800, RGB);

float r;

int pos;

void setup() {

 size(800, 800);

 imgOriginal = loadImage("original.jpg");

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

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

 pos = y * 800 + x;

 r = red(imgOriginal.pixels[pos]);

 imgCopia.pixels[pos] = color(r, r, r);

 }

 }

 tint (#C69220);

 image(imgCopia, 0, 0);

 for (int i = 0; i < 800; i++) {

   stroke(random(0,200),random(0,100),0);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

    

 }

 for (int i = 0; i < 800; i++) {

   stroke(0);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

                  

 }

saveFrame();

}

Matriz/Edição de Imagem

O programa a seguir, isola cada cor RGB de uma imagem, além disso, ele isola os valores CMYK somando os RGB, deixa a imagem com tons de cinza(informando o mesmo valor para cada cor RGB), inverte (subtraindo-255 de cada cor), cria uma imagem em tons de cinza usando uma média ponderada e finalmente, adiciona uma variável que mexe no brilho da imagem.

O 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);
PImage imgCopia6 = createImage(320, 240, RGB);
PImage imgCopia7 = createImage(320, 240, RGB);
PImage imgCopia8 = createImage(320, 240, RGB);
PImage imgCopia9 = createImage(320, 240, RGB);
PImage imgCopia10 = createImage(320, 240, RGB);
float b2 = 100;
float bri = b2*2;
float g = 0;
float b = 0;


float r;
int pos;
void setup() {
 size(1280, 2000);
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = blue(imgOriginal.pixels[pos]);
 imgCopia4.pixels[pos] = color(0, r, r);
 }
 }
 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]);
 imgCopia.pixels[pos] = color(r, 0, 0);
 }
 }

 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = blue(imgOriginal.pixels[pos]);
 imgCopia3.pixels[pos] = color(0, 0, r);
 }
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia2.pixels[pos] = color(0, r, 0);
}
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia5.pixels[pos] = color(r, r, 0);
}
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia6.pixels[pos] = color(r, 0, r);
}
 }
  imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia7.pixels[pos] = color(r, r, r);
}
 }

 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 g = green(imgOriginal.pixels[pos]);
 b = blue(imgOriginal.pixels[pos]);
 imgCopia8.pixels[pos] = color(255-r,255-g,255-b);
}
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia9.pixels[pos] = color(r+0.3,r+0.59,r+0.11);
}
 }
 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]);
 imgCopia10.pixels[pos] = color(r+bri,g+bri,b+bri);
}
 }

}
void draw() {
  noTint();
 image(imgOriginal, 0, 0);
 image(imgCopia, 320, 0);
 image(imgCopia2, 640, 0);
 image(imgCopia3, 960, 0);
 image(imgCopia4, 0, 240);
 image(imgCopia5, 320, 240);
 image(imgCopia6,640, 240);
 image(imgCopia7,960, 240);
 image(imgCopia8,0, 480);
 image(imgCopia9,320, 480);
 image(imgCopia10,640, 480);
}