A importância dos conjuntos nas aplicações

A teoria dos conjuntos ajuda principalmente na organização do raciocínio crítico e no desenvolvimento de métodos que solucionem problemas. Por exemplo, na aula do dia 15/02, foi passado uma atividade que consistia de aplicarmos de forma contínua mais e mais filtros e ruídos a uma image, finalmente colocando-a em uma moldura.

Isso foi a aplicação da teoria dos conjuntos, em que uma propriedade era aplicada sobre a outra, adicionando a anterior e obtendo um resultado que só era possível com a junção da aplicação dos dois métodos. É uma clássica representação da propriedade de um conjunto estar contido no outro, no caso, de uma propriedade estar contida em outra.

Ajuste de contraste

O ajuste de contraste numa imagem é feito a partir da alteração dos valores RGB desta imagem. Quanto maior for o valor dado aos parâmetros RGB, a imagem será mais clara, assim como quanto menores forem estes valores ela vai se tornando mais escura.

Segue abaixo o código que fiz junto com os comentários explicando cada parte do código. Ao final, uma imagem demonstrando o resultado.

//variável com a imagem original
PImage imgOriginal;
//variável que irá armazenar a cópia da imagem, informando o tamanho dele
PImage imgCopia = createImage(320, 240, RGB);

//variável que referencia a posição dos pixels
int pos;
/*variáveis que armazenam o valor dos pixels referenciando, respectivamente,
red, green e blue*/
float r;
float g;
float b;
//variável que receberá o valor de contraste
float contraste;

void setup(){
  size(640, 480);
  imgOriginal = loadImage("original.jpg");
  //loop que percorrerá a imagem original
  for (int x = 0; x < 320; x++){
    for (int y = 0; y <240; y++){
      pos = y * 320 + x;
      //valor dado ao contraste que irá modificar a imagem
      contraste = 30;
      //armazenamento do valor RGB dos pixels da imagem original somados ao contraste
      r =  contraste + red(imgOriginal.pixels[pos]);
      g = contraste + green(imgOriginal.pixels[pos]);
      b = contraste + blue(imgOriginal.pixels[pos]);
      //imagem recebe os valores RGB somado com o contraste
      imgCopia.pixels[pos] = color(r, g, b);
     
    }
  }
}

void draw(){
  //posicionamento das imagens
  image(imgOriginal, 0, 0);
 
  image(imgCopia, 320, 0);
}

Criação de um mapa com tileset isométrico

Na construção do mapa de um jogo, precisamos nos questionar como ele será apresentado na tela, levando sempre em consideração a dimensão dos tiles (ou seja, as imagens) que o compõem.

Para o exercício da aula sobre conjuntos, foi construído com a ajuda de uma matriz uma imagem com diferentes tilesets. Dependendo do valor que havia na matriz, era carregada uma imagem diferente.

Para o exercício passado para casa, foi pedido que construíssemos no Processing uma imagem utilizando um tileset isométrico.

Abaixo, segue o código comentado explicando cada parte dele e em seguida a imagem resultante.


//variáveis que irão armazenar as imagens utilizadas nesta atividade
PImage imgroadNorth, imgroadSouth, imgroadWest, imgroadEast;


//montagem da matriz que irá inserir os elementos da imagem
int[][]mapa = {{2,2,2,2,2,2,2,2},
               {3,1,0,1,0,0,1,0},
               {0,2,0,0,0,1,3,0},
               {0,3,0,2,1,0,0,0},
               {0,2,0,3,0,0,1,0},
               {0,0,1,2,0,2,0,0},
               {0,1,0,2,0,2,1,0},
               {1,1,1,1,1,1,1,1}};
             

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

void draw(){
  //arquivos usados: olhe o nome depois de "img"
  //tamanho das imagens: 100 x 65
  imgroadNorth = loadImage("roadNorth.png");
  imgroadSouth=  loadImage("roadTSouth.png");
  imgroadWest= loadImage("roadTWest.png");
  imgroadEast = loadImage("roadEast.png");
 
  //para fazer a imagem, foi feito um laço dentro de outro laço que percorrem a matriz
  //a matriz é percorrida de coluna em coluna de forma sequencial.
  //Terminada uma coluna, é passado para a próxima.
  for(int i=0; i<8; i++){
    for(int j=0; j<8; j++){
      /*ao percorrer a matriz, é considerado a numeração de cada índice
      para que sejam escolhidas as imagens que serão desenhadas na tela*/
      switch(mapa[j][i]){
        case 0:
        /*para a localização de cada imagem, foi considerado tanto o formato da figura que
        ela possui quanto suas dimensões, além das dimensões da tela.
        Além disso, era necessário considerar o posicionamento da próxima figura
        na tela. Para cada elemento, ele soma na posição Y um quarto da altura
        da imagem e na posição X ele diminui um quarto da largura da imagem.
        Claro, isto funciona nas dimensões destas imagens.
        */
        image(imgroadNorth, i*50-j*50+width/2-50, j*25+i*25);
        break;
       
        case 1:
        image(imgroadSouth,  i*50-j*50+width/2-50, j*25+i*25);
        break;
       
        case 2:
        image(imgroadWest,  i*50-j*50+width/2-50, j*25+i*25);
        break;
       
        case 3:
        image(imgroadEast,  i*50-j*50+width/2-50, j*25+i*25);
        break;
      }
    }
  }
}
 

TED Talk: A Beleza na visualização dos dados

TED Talks costumam ser pequenas palestras que tentam ser concisas e buscam sempre mostrar um ponto de vista diferenciado com seus palestrantes. Não por coincidência, somos surpreendidos pela bela palestra de David McCandless com sua demonstração sobre a importância da forma que visualizamos os dados de qualquer pesquisa.

Números, por si só, não colaboram na demonstração realista dos fatos que eles representam. Dizer que uma crise econômica irá prejudicar no desenvolvimento da maioria dos países é uma coisa, entretanto no momento que ele demonstrou graficamente que todo o prejuízo causado por esta crise engoliria facilmente todas as riquezas produzidas por vários países desenvolvidos no curso de um ano, o impacto dessa visualização é sentido na platéia.

A utilização de gráficos facilita a compreensão do dado bruto, o qual quando apenas colocado em uma tabela não deixa fácil sua leitura ou sua compreensão. Outro exemplo, demonstrado pelo palestrante é como fica mais fácil encontrar uma vitamina que ele toma como suplemento se ele se utilizar não apenas de uma demonstração visual dos dados que ele possui, mas aplicar também uma interatividade com a aplicação que está demonstrando aquele dado, destacando de forma dinâmica exatamente o que ele mais precisa.

Na realidade, a percepção da importância da utilização de representação gráfica de dados tem sido algo que tem aumentado bastante. Por exemplo, existe um subreddit (que é uma comunidade dentro do site de compartilhamento de links chamado reddit) chamado Data is Beautiful, o qual consiste de mostrar diferentes representações gráficas que demonstram desde que pessoas que trabalham em casa durante tempestades de neve produzem mais até demonstrar a correlação dos gastos nos Estados Unidos em ciência, viagem espacial e tecnologia com suicídios por enforcamento, estrangulamento e sufocamento.

Trabalho: Parte I

Artista escolhido: Luiz Sacliotto

Obra escolhida: Concreção 9768

Análise geométrica

A obra que escolhi para analisar geometricamente e basear meu trabalho foi a concreção 9768 do artista abstracionista Luiz Sacliotto.

Pela análise geométrica da obra do artista, pode perceber o padrão do distanciamento entre cada um dos quadrados, o qual ocorria sempre a uma distância fixa. Se considerarmos cada cor de preenchimento como pertencente a um quadrado de tamanho diferente, é possível construir um programa que se faça valer destas propriedades. 

Programação

Primeiramente, dividi a obra em quatro partes, para melhor programar seu preenchimento.

Utilizando a função rect do Processing, fiz uma função chamada luizSacliotto que recebe 3 inputs: o tamanho que terão os quadrados menores e as coordenadas "x" e "y" na qual será iniciada a construção da obra. Como o quadrado maior de uma parte tem 4 vezes o tamanho do lado do quadrado menor, uma variável chamada "c" é criada para guardar este valor.

Em seguida, coloquei esta função dentro de um laço que decrementa a cada repetição o valor de "c" em "h", construindo assim quadrados menores. Além disso, a coordenada y tinha seu valor somado em "h" para que o próximo quadrado fosse construído a uma distância que fosse igual ao lado do menor quadrado.

Para o preenchimento de cada quadrado, antes do laço iniciar uso a função fill do Processing para preencher o quadrado maior. Depois disso, faço uma condicional para que a cada repetição par, o quadrado seja preenchido por uma coloração vermelha.

Feito isso, está completa a primeira parte da obra.

 Feito isto, para a segunda parte, precisamos que a coordenada inicial "x" tenha o valor do quadrado maior para que a próxima parte tenha sua formação iniciada ao lado da parte anterior sem sobrepô-la. Além disso, a cada repetição do laço, tanto a coordenada x quanto a y na função rect terão seus valores respectivamente somados e diminuídos por "h", para que os quadrados seguintes sejam feitos na mesma proporção que a parte anterior.

Para o preenchimento, é invertida a ordem que foi feita os preenchimentos da parte anterior.

Tomando este cuidado com todas as partes, temos finalmente a reprodução da obra:

Apropriação

Feita a replicação da obra, resolvi colocar a função dentro de um laço e a cada repetição do laço a totalidade da obra feita anteriormente se tornaria a primeira parte de uma obra ainda maior.

Segue abaixo todo o meu código completo para executar esta última etapa.

void setup(){
  background(255);
  size(1920, 1080);
}

void luizSacliotto(int h, int posX, int posY){
 
 
  int c = h * 4;
 
  fill(0);
  //primeira parte
  for(int i = 0; i<=3 ; i++){
   
     rect(posX, posY, c, c);
     posY += h;
     c = c - h;
     if(i%2==0){
     
       fill(125,0 , 0);
     }else{
       fill(0);
     }
   
  }
 //segunda parte
 c= 4*h;
 posX = c;
 posY = 0;
 fill(125,0,0);
 for(int j = 0; j<=3; j++){
 
    rect(posX, posY, c, c);
    posY +=h;
    posX += h;
    c = c - h;
    if(j%2==0){
      fill(0);
    }else{
      fill(125,0,0);
    }
 }

 //terceira parte
 c = 4*h;
 posX = 0;
 posY = c;

 fill(125,0,0);
 for(int k = 0; k<=3; k++){
    rect(posX, posY, c, c);
   
    c -=h;
    if(k%2==0){
      fill(0);
    }else{
      fill(125, 0, 0);
    }
 }

 //quarta parte
 c= 4*h;
 posX = c;
 posY = c;

 fill(0);
 for(int m = 0; m<=3; m++){
    rect(posX, posY, c, c);
    posX +=h;
    posY +=h;
    c -=h;
    if(m%2==0){
      fill(125,0,0);
    }else{
      fill(0);
    }
 
 }

}

void draw(){
  int localX = 0;
  int localY = 0;
  int tamanho = 40;
 
   
    for(int j=0; j<=4; j++){
     
 
  luizSacliotto(tamanho, localX, localY);
 
  localX += 8*tamanho;
  tamanho+= tamanho;
    }
}

As facilidades das funções

Na nossa aula do dia 19/11/2015, foi passado para nós a seguinte atividade em sala de aula: fazer uma barra de slider no Processing.

Uma barra de slider é algo que vemos comumente em interfaces que querem dar várias opções em um menu. Por exemplo, para deixarmos o nível do volume de um som num nível agradável, normalmente representamos a intensidade do som reproduzido através de uma barra de slider.

Para este exercício, produzi o código abaixo. Para dar um efeito visual mais interessante, fiz com que o quadrado deste slider se desloque continuamente entre as extremidades:

float x;
float d = 0.01;

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

//função do quadrado menor
void slideBar(float p){ //pega um valor que vai mexer o quadrado
   fill(255);
  rect(25, 20, 550, 100);
  float whatever; //este será o valor que vai ser a coordenada X
  whatever = 25+450*p; //25(distancia da borda da janela) + 450(tamanho do retângulo maior - lado do quadrado) * p(a proporção que vai ser o input da função
  fill(125);
  rect(whatever, 20, 100,100);

}



void draw(){
  background(0);
 

 
  x = x + d;
  if(x >= 1 || x <=0){
    d = -d;
  }
 
  slideBar(x);
 
 
 
}

Como podemos ver no código para facilitar meu trabalho eu resolvi compartimentar grande parte dele dentro de uma função.

Funções são ferramentas importantes na programação, permitindo que certas partes do código sejam compartimentadas em diferentes porções, sendo chamadas apenas quando necessário. Além disso, posso utilizá-los várias vezes dentro do mesmo bloco de código, o que o torna até mesmo mais legível.

Além disso, o código quando é reservado para uma função torna sua alteração mais rápida e fácil. Se eu preciso modificar alguma coisa, basta modificar dentro da função que essa alteração será aplicada em todas as instâncias que ela for chamada.

Em resumo, a utilização de funções dinamiza e facilita a compreensão não apenas do código, mas da lógica da programação empregada na construção do mesmo.

Bolas que se colorem com a seta do mouse

Dentre as atividades que foram passadas para serem feitas em casa e postadas aqui neste blog, foi pedido que fizéssemos um programa no Processing que produzisse em locais aleatórios duas circunferências, também com raios aleatórios.

Quando a seta do mouse passasse sobre elas, estas circunferências devem mudar de cor e quando a seta do mouse sair de cima delas, elas devem deixar de ter essa cor.

Para facilitar meu trabalho, reaproveitei o código de uma outra atividade feita em sala que calcula a distância entre dois pontos, apenas adicionando novas variáveis que tem seu valor gerado randomicamente a cada vez que o programa é aberto e chamando as funções apenas para mudar a cor das circunferências dentro da condição estabelecida (mouse dentro da circunferência). Segue o código explicado através de comentários abaixo.

 float xBola1;
float yBola1;
float xBola2;
float yBola2;
float raio1;
float raio2;

//cálculo da distância entre dois pontos na mesma linha
float distancia1D(float X1, float X2){
  float resposta;
  resposta = X2 - X1;
  return sqrt(pow(resposta, 2));
 
}

//cálculo da distância entre dois pontos em qualquer lugar na tela
float distancia2D(float x1, float y1, float x2, float y2){
 
  float coordenadaX;
  coordenadaX = distancia1D(x2, x1);
  float coordenadaY;
  coordenadaY = distancia1D(y2, y1);
 
  float distancia = round(sqrt(pow(coordenadaX, 2) + pow(coordenadaY, 2)));
  return distancia;
   
 
}

void setup(){
 size(600, 600);
 //determinar de forma aleatória a localização e o raio das circunferências
 xBola1 = round(random(width));
 yBola1 = round(random(height));
 xBola2 = round(random(width));
 yBola2 = round(random(height));

 raio1 = round(random(20, 80));
 raio2 = round(random(20, 80));


}

void draw(){
  background(0);
  //colocamos a condicional para colorir a bola caso o mouse entre nela

 if(distancia2D(mouseX, mouseY, xBola1, yBola1) <= raio1){
     fill(125);
 }
 //fazemos a primeira ellipse dando como parâmetros sua localização e o raio gerado

 ellipse(xBola1, yBola1, raio1*2, raio1*2);
 //ao afastar a seta do mouse, volta a ficar branca
 fill(255);
 //faz o mesmo com a outra circunferencia
  if(distancia2D(mouseX, mouseY, xBola2, yBola2) <=raio2){
    fill(0, 123, 200);
  }
    ellipse(xBola2, yBola2, raio2*2, raio2*2);
    fill(255);
 
 
}