quarta-feira, 10 de fevereiro de 2016

Tarefa 14 - Efeito KNOB

Nessa tarefa temos que criar uma aplicação que simula o funcionamento do  knob, realizando o efeito dissolve entre duas imagens de acordo com a posição vertical do mouse.

O knob é uma palavra inglesa que significa: botão ou maçaneta. No Brasil, geralmente é utilizada para designar potenciômetros de ajuste ou teclas de equipamentos eletrônicos. Como na imagem abaixo:

Assim, nesta atividade iremos substituir o knob pelo movimento do mouse, que determinará o aparecimento ou desaparecimento de uma imagem.
Para realização dessa atividade utilizamos essas duas imagens:
 Imagem que vai aparecer inicialmente


Imagem que aparece após a movimentação do mouse.

Eis o código:
PImage imgGoku, imgGokuSS;
float a = 0;
float r,g,b,r1,g1,b1;
int pos;

void setup(){
  size(180,300);
  imgGoku = loadImage("goku.jpg");
  imgGokuSS = loadImage("gokuss.jpg");
}

void draw(){
  loadPixels();
  
  a = (float(mouseY)*1)/(height-1);
  
  for (int x = 0; x < 180; x++){
    for (int y = 0; y < 300; y++){
      pos = y * 180 + x;
      
      r = (1-a)*red(imgGoku.pixels[pos]);
      g = (1-a)*green(imgGoku.pixels[pos]);
      b = (1-a)*blue(imgGoku.pixels[pos]);
      
      r1 = a*red(imgGokuSS.pixels[pos]);
      g1 = a*green(imgGokuSS.pixels[pos]);
      b1 = a*blue(imgGokuSS.pixels[pos]);
      
      pixels[pos] = color(r + r1, g + g1, b + b1);
      
    }
  }
  
  updatePixels();
}



Tarefa 13 - Como ajustar o contraste de uma imagem

A tarefa 13, consistia em ajustar uma imagem de acordo com o seu contraste. Antes de chegarmos a esse ponto, criamos várias outras atividades em que realizávamos mudanças nas cores das imagens nos padrões R, G, B e etc.

Agora iremos diminuir o contraste de um imagem qualquer.

A primeira coisa a se fazer, é justamente procurar uma imagem para ser modificada. Para tanto, escolhi como imagem o seguinte arquivo:

Imagem obtida nesse site

Assim, foi criado o seguinte código. É importante ressaltar que a imagem tem que está salva na mesma pasta em que o código estiver.

PImage imgFoto;
PImage imgCopia = createImage(320,240,RGB);
float r,g,b;
float con = 100;
float ajust = (255*(con + 255)) / (255 * (255 - con));
int pos;

void setup(){
  size (640,240);
  imgFoto = loadImage("narutofoto.jpg");
  
  for (int x = 0; x < 320; x++){
    for (int y = 0; y<240; y++){
      pos = y * 320 + x;
      
      r = red(imgFoto.pixels[pos]);
      g = green(imgFoto.pixels[pos]);
      b = blue(imgFoto.pixels[pos]);
      
      imgCopia.pixels[pos] = color(r*ajust, g*ajust, b*ajust);
      
    }
  }
}

void draw(){
  image(imgFoto,0,0);
  image(imgCopia,320,0);
}
Esse foi o resultado, com contraste positivo: 

Esse foi o resultado com contraste NEGATIVO:

Tarefa 12 - Tileset Isonométrico

A tarefa referente a aula 12, consiste em discutir sobre a criação de um tileset isonométrico. Em sala aprendemos a criar tileset utilizando o processing, tendo como base matemática a criação de matrizes.

Mas o que é um tileset isométrico?
Tilesets são um conjunto de gráficos usados para criar mapas em um jogo. Cada tile do tileset equivale a um espaço em pixels e é possível combiná-los em um mesmo espaço através do uso de camadas para criar o mapa. Quando isométrico, significa que usamos do efeito comumente chamado de 2,5D, que utiliza de gráficos 2D em uma certa posição para criar-se um efeito 3D.
Exemplo:

Assim, busquei criar o meu próprio tileset, utilizando apenas duas imagens. Acredito que se mais imagens fossem colocadas, o tileset ficaria mais legal.
int x,y;
float z;

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

PImage imgGrama, imgTerra;

  imgGrama = loadImage("Grama.png");
  imgTerra = loadImage("Terra.png");  
  
  int[][]mapa = {{0,0,0,1,0,0,0,0},
                {0,0,0,1,0,0,0,0},
                {0,0,0,1,0,0,0,0},
                {0,0,0,1,0,0,0,0},
                {0,0,0,1,0,0,0,0},
                {0,0,0,1,0,0,0,0},
                {0,0,0,1,0,0,0,0},
                {0,0,0,1,0,0,0,0}};
                
  translate(width/2, 0);
  
  for(int i = 0; i<8; i++){
    x = 0;
    y +=25;
    z+=25.5;
     for(int j = 0; j<8; j++){
     x+=50;
       switch(mapa[j][i]){
       case 0: image(imgGrama, i*50-x,j*25+y);
       break;
       case 1: image(imgTerra, i*50-x,j*25+y);
       break;
       
     }
     }
  }
}

               

Tarefa 11 - Função vs Procedimento

Nessa tarefa deveremos discutir o uso da função e do procedimento como recurso indispensável para a construção de um código. Para fazermos a análise, precisamos inicialmente, conceituar cada um deles.

Função ou function:
Toda função que é criada por obrigação tem que ter um retorno. Utilizamos funções geralmente quando precisamos calcular  algo, retornar algum valor verdadeiro, ou retornar algum teste.

Ex.
boolean colisao(int xP, int x1, int x2) {
  if ((xP <= x1) || (xP >= x2)) {
    return false;
  } else {
    return true;
  }
}

Procedimento ou Procedure:
É quase igual a uma função, mas não precisa necessariamente ter retorno algum. Geralmente utilizamos procedimentos quando precisamos utilizar alguns códigos que vamos ter que ficar repetindo direto, sendo assim uma procedure concentra nossos códigos e podemos a qualquer momento chama-los.

Ex. 
void mostraGrade(){
  for (int i = 0 ;i < 12;i++){
  line(i*50,0,i*50,600);
  stroke(0, 150, 136);
  }
Assim, é fácil perceber que ao criarmos um procedimento ou função, estamos justamente clarificando e simplificando o nosso código, permitindo assim a criação de módulos que irão facilitar e muito nossa intervenção nesse código.

Jogo PONG - Tarefa 10

Tarefa: considerando também a movimentação vertical, criar uma versão simplificada do jogo Pong, com um único ponto disputado.

int r = 10;
int xC = 10;
int yC = 10;
int dX = 2;
int dY = 2;
int pontoD = 0;
int pontoE = 0;


int yBD = height/2 + 40;
int yBE = height/2 + 40;

boolean z;
boolean e;
boolean w;
boolean p;

void setup() {
  size(320, 240);
  background(0);
}

boolean colisao(int xP, int x1, int x2) {
  if ((xP <= x1) || (xP >= x2)) {
    return false;
  } else {
    return true;
  }
}


void draw() {
  background(197, 202, 233);
  
  if(keyPressed == true) if(keyCode == UP) yBD--;
  if(keyPressed == true) if(keyCode == DOWN) yBD++;
  if(keyPressed == true) if(keyCode == SHIFT) yBE--;
  if(keyPressed == true) if(keyCode == CONTROL) yBE++;
  
  
  fill(63, 81, 181);
  noStroke();
  rect (width - 40, yBD, 20, 80);
  rect (20, yBE, 20 ,80);

fill(255, 64, 129);
ellipse(xC, yC, r*2, r*2);
  
   xC = xC + dX;
   yC = yC + dY;
  
  
  if (xC >=width-r){
   
    pontoE = 1;
    dX = -dX;
  }else if(xC<=r){
    
    pontoD = 1;
    dX = -dX;
  }
  if (yC >=height-r){
    
    dY = -dY;
  }else if(yC<=r){
    dY = -dY;
  }
  
 z = colisao(xC, width - 40, width - 20);
 e = colisao(yC, yBD, yBD + 80);
 if ((z == true) && (e == true)){
   dX = -dX;
 }
 w = colisao(xC, 20, 40);
 p = colisao(yC, yBE, yBE + 80);
 if ((w == true) && (p == true)){
   dX = -dX;
 }
 
 if (pontoD == 1) {
    background(0,0,0,25);
    fill(255);
    text("O lado direito ganhou!", width/3.5, height/2);
  } else if (pontoE == 1) {
    background(0,0,0,25);
    fill(255);
    text("O lado esquerdo ganhou!", width/3.5, height/2);
  }

 if ((colisao(xC, width - 40 - r, width - 20) == true) && (colisao(yC, yBD, yBD + 80) == true)){
  println("direita");
}
  if ((colisao(xC, 20, 40)== true) && (colisao(yC, yBE, yBE + 80) == true)){
  println("esquerda");
}
 
}

Tarefa 09 - Bola quicando = aumento de velocidade

A tarefa de hoje é bem simples, temos que aumentar a velocidade de uma elipse em movimento em 1% toda vez que a mesma colidir com as bordas. Podemos relacionar esse trabalho com o conteúdo de M.R.U.V. ao perceber que há uma variação uniforme na velocidade do movimento da bola.

Assim, para realizarmos essa atividade, se faz necessário criar algumas variáveis, específicas para os eixos de movimentação da bola: eixo X e Y. Após, incrementamos condições para movimentação da bola, indicando que a mesma ao colidir com a parede (width e height) sua velocidade será aumentada em 1%.
Eis o código:
int r = 50;
float bolaX = 50;
float bolaY = 50;
float dX = 5;
float dY = 5;

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

void draw(){

  background(0);
  fill(255);
  ellipse(bolaX,bolaY,r*2,r*2);
  
  bolaX = bolaX + dX;
  bolaY = bolaY + dY;
  
  if (bolaX >= width - r){
    dX = dX + (dX/100);
    dX = -dX;
  }
  else if(bolaX <= r){
    dX = dX + (dX/100);
    dX = -dX;
  }
  
  if (bolaY >= height - r){
    dY = dY + (dY/100);
    dY = -dY;
  }
  else if(bolaY <= r){
    dY = dY + (dY/100);
    dY = -dY;
  }
  
  println(dX,dY);
  

}

Tarefa 08 - Cores de círculos

Tarefa: criar e discutir uma aplicação que muda individualmente a cor do preenchimento de dois círculos, com raios e centros randômicos, sempre que o cursor do mouse passar sobre os mesmos


float distancia1D(float x1,float x2){
  return (int)sqrt(pow(x2 - x1,2));
}
float distancia2D(float x1, float y1, int x2, int y2){
  int a2;
  float b = distancia1D(x1,x2);
  float c = distancia1D(y1,y2);
  a2 = (int)sqrt(b*b + c*c);
  return a2;
}
float x1 = random(1,550);
float x2 = random(1,550);
float y1 = random(1,550);
float y2 = random(1,550);
float r1 = random(50,200);
float r2 = random(50,200);
void mudaCor(){
  if(distancia2D(x1,y1,mouseX,mouseY) <= r1/2){
    fill(255,0,0);
    ellipse(x1,y1,r1,r1);
  }else{
    fill(0,0,255);
    ellipse(x1,y1,r1,r1);
  }
    if(distancia2D(x2,y2,mouseX,mouseY) <= r2/2){
    fill(244,231,0);
    ellipse(x2,y2,r2,r2);
  }else{
    fill(0,135,56);
    ellipse(x2,y2,r2,r2);
  }
  }
void setup(){
  size(600,600);
}
void draw(){
  background(0);
  mudaCor();
  textSize(16);
  fill(255);
  text("d círculo 1: " + distancia2D(x1,y1,mouseX,mouseY),mouseX+20,mouseY+20);
  text("d círculo 2: " + distancia2D(x2,y2,mouseX,mouseY),mouseX+20,mouseY+40);
  text("círculo 1",x1 - r1/4,y1 - (r1/2 + 20));
  text("círculo 2",x2 - r2/4,y2 - (r2/2 + 20));
  stroke(255);
  line(x1,y1,mouseX,mouseY);
  line(x2,y2,mouseX,mouseY);
}