Aula 20 - Movimento do barco

Nessa atividade foi solicitado que criássemos o movimento de um barco no mar e que o resultado fosse discutido aqui.

De início, carreguei a imagem de um barco. Semelhante ao que foi explicado em sala de aula, usei a função seno (sin) para guiar o movimento do barco.

A criação da variável "b" chamando a função seno com a variável "a" faz com que o movimento de onda guie a imagem do barco nas suas posições x e y da tela.

Segue o código com comentários para análise:

PImage imgbarco;
int angulo;
//PImage imgbarco = createImage(50, 50, RGB);
void setup() {
  size(800, 600);
  noStroke();
  imgbarco = loadImage ("barco.png");
}

float a=0;
void draw() {



  //rotate(radians(angulo));
  float b = sin (a);
  a+=0.1; //esse incremento vai mexer na velocidade da onda.
  background(255);
  image (imgbarco, a*10, b*5+250, 50, 50);
  fill(0);
  //ellipse(a*10+40,b*5+300,10,10);
} 

Aula -18 Aplicação de Sliders para controle de valores de uma imgem

A tarefa 18 consiste em criar uma aplicação onde a partir dos sliders colocados seja possível manipular os tons de cinza, vermelho e amarelo da imagem, além de acrescentar ruido à imagem.

Primeiramente, utilizando o código dado em sala de aula criei 5 slider (um para os tons de vermelho, outro pros tons de amarelo, outro para escala de cinza e outro para adicionar ruído.

Para adicionar os tons de vermelho utilizei  o incremento do slider (de 0 a 100) e acrescentei aos tons de vermelho (r) da imagem original. Assim fiz para os demais tons, sendo que nos amarelos utilizei o slider para somar aos tons vermelho e verde da imagem original.

Para o ruído, criei uma função separada e a imagem destino configurada para o padrão HSB

PImage imgDestinoR = createImage(320, 240, HSB);

Usei a variável "granulado" variando de 0 a 4000 no slider para que a dentro da função ruido() ela pudesse cobrir o maior número de pixels possíveis da imagem original.

Todas as aplicações foram criadas em imagens separadas para que a visualização fosse melhorada.

Segue o código para verificação:

import controlP5.*;
ControlP5 gui; //objeto 



PImage imgOriginal;//classe
PImage imgDestinoV = createImage(320, 240, RGB);
PImage imgDestinoA = createImage(320, 240, RGB);
PImage imgDestinoC = createImage(320, 240, RGB);
PImage imgDestinoR = createImage(320, 240, HSB);


color corOriginal, corDestinoV, corDestinoA, corDestinoC, corRuido;
float h, s, b, r, g, bl, mediap, vermelho, amarelo, cinza, nr, ng, nb, imgRuido, granulado;

void setup() {
  
  colorMode(RGB, 100);
  size(960, 500);
  background(0);
  imgOriginal = loadImage ("original.png");

  image (imgOriginal, 0, 0);


  gui=new ControlP5(this);
  gui.addSlider("vermelho")
    .setRange(0, 100)
    .setValue(0)
    .setPosition(20, 300)
    .setSize(100, 30);

  gui=new ControlP5(this);
  gui.addSlider("amarelo")
    .setRange(0, 100)
    .setValue(0)
    .setPosition(20, 350)
    .setSize(100, 30);

  gui=new ControlP5(this);
  gui.addSlider("cinza")
    .setRange(0, 10)
    .setValue(0)
    .setPosition(20, 400)
    .setSize(100, 30);

  gui=new ControlP5(this);
  gui.addSlider("granulado")
    .setRange(0, 4000)
    .setValue(0)
    .setPosition(20, 450)
    .setSize(100, 30);
}
void draw() {
  
  processaImagem();
  ruido();

  image (imgDestinoV, 320, 0);
  image (imgDestinoA, 640, 0);
  image (imgDestinoC, 640, 240);
  image (imgDestinoR, 320, 240);
  println(cinza);
}

void ruido() {

  imgDestinoR = loadImage("original.png");

  for (int i=0; i < granulado; i++) {
    int x = (int) random(0, 320);
    int y = (int) random(0, 240);

    corOriginal = imgOriginal.get(x, y);

    h = hue(corOriginal);
    s = saturation(corOriginal);
    b = brightness(corOriginal);

    corRuido = color(h*granulado, s*granulado, b*granulado);
    imgDestinoR.set(x, y, corRuido);
  }
}

void processaImagem() {

  for (int x=0; x<320; x++) {//scanline percorre toda a imagem
    for (int y=0; y<240; y++) {

      corOriginal=imgOriginal.get(x, y);//get pega cada pixel da cor da imagem original

      r=red(corOriginal);
      g=green(corOriginal);
      bl=blue(corOriginal);

      nr=map(cinza, 0, 100, 0, 10);

      
      mediap =(r*0.3+0.59*g+0.11*bl); //melhor aplicação dos tons médios de cinza com os pesos correspondetes ao RGB

      corDestinoV = color (r+vermelho, g, bl);// 
      corDestinoA = color( r+amarelo, g+1+amarelo, bl);
      imgDestinoV.set(x, y, corDestinoV); 
      imgDestinoA.set (x, y, corDestinoA); 
      if (cinza<=0) {
        corDestinoC = color (r, g, bl);
        imgDestinoC.set(x, y, corDestinoC);
      } else {
        corDestinoC = color (mediap*nr, mediap*nr, mediap*nr);
        imgDestinoC.set(x, y, corDestinoC);
      }
    }
  }
} 

 

Aula 17 - Mapa isométrico

Olá! Na postagem de hoje vou tentar fazer uma explicação de como consegui desenvolver uma aplicação no Processing que apresenta um mapa isométrico utilizando dois tiles pesquisados na internet.

De início precisamos entender o que são mapas isométricos. Numa definição mais ampla, podemos dizer que são representações 2D que acabam se transformando, visualmente falando, em uma representação 3D. Algumas áreas científicas, como por exemplo a Geografia,  utilizam-se desses mapas, por exemplo, para representarem com mais fidelidade características topométricas de determinadas regiões.

Na área de jogos esse tipo de representação traz um apelo visual muito mais interessante, tornando o aspecto semelhante a uma aplicação 3D, porém sem exigir recursos mais pesados.

Para que se chegue a esse resultado de um falso "3D" utilizam-se os chamados Tilesets isométricos que são nada mais nada menos que figuras 2D dispostas de tal forma que sua união geram a "ilusão" 3D tal como mostra a imagem abaixo:

 

 

No meu exemplo, utilizei 02 tilesets para compor meu mapa. No processing carreguei uma matriz de 8 X 8 com tiles de tamanho 60 x 30 que redimensionei no Photoshop. Apesar de não ter entendido muito bem a relação do tamanho dos tiles e as distancias entre eles de modo que formem um todo compacto, sei que é muito importante fazer essa relação matemática para que não se perca tempo multiplicando valores aleatórios e ir experimentando as distâncias.

Os tiles utilizados foram esses:

O exemplo abaixo mostra o quão simples é aplicação, mas confesso o quanto foi difícil chegar a esse resultado.

 Após criar a matriz, percorri seus 64 elementos, posicionando cada tile  contendo a imagem de grama de modo a preencher todo o espaço. Em seguida coloquei a imagem que representava uma estradinha de terra em pontos específicos a fim de determinar um caminho como o desenhado na figura acima.

O código ficou assim:

PImage imgGrama, imgCaminho;

int [][] mapa ={ 
  {1, 1, 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, 1, 1, 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, 1, 1}, 
  {0, 0, 0, 0, 0, 0, 0, 0}};

void setup() {
  imgGrama = loadImage("grama1.png");
  imgCaminho = loadImage("dirt.png");
  size (600,600);
  mostraMapa();
}
  
  void mostraMapa(){
  for (int i=0; i< 8; i++)
    for (int j=0; j<8; j++)

      switch (mapa[j][i]) {
      case 0:
      
        image(imgGrama, 270 - i * 30 + j * 30, 200+(i * 15 + j * 15));// 270 mexe na horizontal de todo o bloco e o 200 no deslocamento vertical 
        break;
        
        case 1:
        image (imgCaminho, 270 - i * 30 + j * 30, 200+(i * 15 + j * 15));

         
      }
}

 Então é isso. Espero que tenham ficado claras e corretas as informações sobre o processo que usei para fazer essa aplicação.

Até a próxima!!!

Aula 16 - Design da informação

A atividade de hoje consiste em avaliar criticamente os aspectos visuais e interativos de um dos exemplos do site www.informationisbeautiful.net que traz alguns exemplos de gráficos informativos, alguns deles contendo interações.

Bom, o exemplo que escolhi para avaliar foi o https://informationisbeautiful.net/visualizations/the-internet-of-things-a-primer/ que trata da internet das coisas suas tecnologias, aplicações e inovações, analisando desde desenvolvimento na decada de 90 até uma prospecção no ano de 2020. 

O apelo visual da aplicação é bastante interessante, predominantemente elaborado com cores em tons pastéis, onde seus elementos verbal (textos,números), pictórico (ícones, adornos figurativos e abstratos, desenhos figurativos, fotografias) e esquemático (caixas, linhas, figuras geométricas e pontos de condução) apresentam pouco contrastante, dando a impressão de sobriedade e imprimindo um ambiente mais "clean" ao usuário.

O uso do elemento geométrico circular é bastante explorado, o que faz com que a unidade visual seja mantida na maior parte da aplicação, embora acredite que a diversidade das formas poderia tornar ainda mais dinâmica a aplicação, mantendo a unidade e aumentando o interesse visual do usuário. Outros momentos são constituídos com geométricas mais retangulares dando destaque a informação a partir da sobreposição de tons semelhantes da mesma cartela de cores.

Se no visual a aplicação perde força, na interatividade ela supera as expectativas. Com interações remetendo a "balões de gás hélio", simulando até  mesmo a dinâmica do contato físico real desse tipo de material. Como mostra o vídeo abaixo:

 

As interação do tipo zoom in e zoom out causam impacto, agregando valor à informação apresentada. Juntamente com balões explicativos deixam a aplicação visualmente organizada destacando hierarquicamente a aparição de cada elemento.

 

Em resumo, um dos principais atributos do design da informação é aperfeiçoar a exposição dos dados, deixando-os mais atrativos e simples para as pessoas. Envolve também a criação de um ambiente interessante e menos cansativo na leitura de dados brutos, transformando-os em possibilidades de obtenção da informação de maneira lúdica e didática. 

Assim, essa aplicação cumpre seu papel tanto no aspecto visual quanto no interativo, tornando criativa a tarefa da leitura de gráficos e gerando conhecimento de forma agregada e positiva.

Aula 14 - Diagrama de Rosa de Florence Nightingale

Florence Nightingale foi uma enfermeira britânica e viveu entre 1820 e 1910. Ela cuidou de soldados feridos na Guerra da Criméia (atualmente uma república autônoma da Ucrânia).

Sua participação na guerra a fez escrever um relatório com o objetivo principal de apresentar os motivos pelos quais tantos soldados morreram. O Diagrama de rosa compõe esse relatório e evidencia que a maioria das mortes foi decorrente de doenças infecciosas adquiridas no hospital.

O diagrama de rosa é um dos diagramas mais influentes da história, pois mudou a atitude do exército britânico para a assistência médica, consequentemente influenciando também os hospitais civis.

O diagrama é dividido em  fatias coloridas, tendo o centro como o ponto comum. A área de cada fatia está na proporção da estatística que ela representa, e em três partes de cores diferentes (também proporcionais). Estas três cores eram representativas de três diferentes tipos de morte (por doenças contagiosas, por ferimento e por causa diversas).

A atividade consiste em criar uma aplicação que refaça o mesmo diagrama com dados simulados.

Entao aqui vai a explicação do código:

1) Iniciei o processo dividindo o círculo em 12 partes conforme os meses do ano, reservando um espaço 30 graus para cada mês. Em seguida atribui variáveis aos dados de morte ( infecção, ferimento, e outras causas) simulados aleatoriamente e uma cor para cada.

    float infec = random (1, 100)*200;
    float ferimento = random(1, 100)*200;
    float outras = random(1,100)*200;

2) Na sequencia fiz um laço para repetir 12 vezes preenchendo com a  função arc() as partes de um gráfico de pizza. Dentro do laço estabeleci que o mês de janeiro começaria no primeiro quadrante do gráfico, em 0 graus e terminaria em 30 graus e os outros meses obedeceriam o mesmo intevalo através das variáves angInicial e angFinal.

  float angInicial=0;
  float angFinal=30;

3) Para dentro de cada um dos 12 arcos criados,uma subdivisão em três partes criaria o cenário representativo do motivo das mortes.

4) o código final ficou assim:

void setup() {

  size (400, 600);
  float angInicial=0;
  float angFinal=30;
  
  for (int i=1; i<=12; i++) {
    float infec = random (1, 100)*200;
    float ferimento = random(1, 100)*200;
    float outras = random(1, 100)*200;

    noStroke();
    fill(32,178,170);
    arc(width/2, height/2, radians(infec), radians(infec), radians(angInicial), radians(angFinal));
    fill(255,99,71);
    arc(width/2, height/2, radians(ferimento), radians(ferimento), radians(angInicial), radians(angFinal));
    fill(218,165,32);
    arc(width/2, height/2, radians(outras), radians(outras), radians(angInicial), radians(angFinal));
    
    angInicial = angInicial+30;
    angFinal=angFinal+30;
  }
} 

A figura final ficou assim:

Aula 8 - Adaptive logo

Meu exemplo de adaptive logo foi do logotipo da COP15 (Conferência das Nações Unidas sobre Mudanças Climáticas, realizada em Copenhague em 2009) projetado pelo empresa nr2154.

Segundo os criadores o objetivo era gerar o logotipo com base em padrões dinâmicos e generativos, regidos por regras como flocagem e campos de força, tentando expressar as complexas decisões e negociações em andamento na conferência.


O software de animação para manipulação da logo era personalizável para renderizar uma grande variedade de estilos e modos em formatos utilizáveis b​​para transmissão de HD-TV e gráficos vetoriais para mídia impressa.

O painel de controle do software permitia muitas configurações diferentes. Poderia salvar
10 configurações preferidas e tinha a capacidade  para adaptar a evolução da animação

 

.

https://vimeo.com/8193600

Trabalhho PARTE I

O jogo escolhido para ser desenvolvido foi o Plaque Attack lançado em 1983 para o console ATARI 2600.

 

Estabelecendo o modelo natural

Nesse jogo o jogador controla um tubo de pasta de dente que flutua dentro de uma boca e “atira”. Seu objetivo é eliminar “alimentos inimigos” como hambúrgueres, sorvetes e doces que tentam chegar aos dentes.

O jogador deve usar o  tubo para lançar jatos de pasta dental nos inimigos que, inicialmente surgem de cima para baixo numa velocidade reduzida, em fila de três elementos dispostos horizontalmente. Caso não consiga atingir os inimigos, os dentes inicialmente dispostos num total de 4 na parte inferior e 4 na superior, serão destruídos a medida que os “alimentos inimigos” os tocam.

Para avançar na primeira fase é necessário que jogador consiga destruir os alimentos até atingir a pontuação de 120, sendo que para cada acerto são contabilizados 5 pontos. Para cada dois mil pontos conseguidos pelo jogador, o game irá doar um novo dente. A cada dente atingido a direção dos inimigos é invertida, necessitando do jogador uma atenção especial para não deixar que dentes do lado oposto sejam atingidos.

A velocidade do jogo aumenta a medida que ocorre o avanço dos níveis das fases. A forma dos inimigos se movimentarem também começa a mudar e agora ao invés de se movimentarem em linha reta eles irão fazer uma espécie de zig-zag na tela, dificultando assim a precisão do jogador em atingir o alvo.

Imagem do jogo

 Estabelecendo o modelo matemático

É possível realizar a movimentação do tubo de pasta de dentes, nosso “personagem” principal, nas direções para a parte superior da tela e para a inferior, quando automaticamente a ponta do tudo também se inverte acompanhando as mesmas direções. É possível também movimentar o tubo da direita para esquerda com incrementos de 5 pixels, porém a ponta do mesmo não acompanha esse movimento, estando sempre apontada para cima ou para baixo.

Os inimigos surgem com deslocamento a partir das laterais direita e/ou esquerda  e logo realizam o movimento até a borda inferior em linha reta sempre em fila de três ou mais elementos, porém com o avançar das fases os movimentos também são executados em pequenas diagonais.

A cada colisão com um dos dentes, os inimigos invertem a direção no eixo Y, ora decrescendo, ora aumentando o valor do incremento de  pixels no eixo. Não há colisão entre o tubo de pasta e inimigos em si. Apenas acontece colisão entre o jato  lançado pelo tubo de pasta e os alimentos.

Os elementos do protótipo do jogo basicamente podem ser desenhados utilizando-se das formas básicas como retângulos, elipses ou círculos, arcos e triângulos.

Os “dentes” do nosso jogo estão subdivididos nas partes inferior e superior da tela posicionados inicialmente a 100 pixels da extremidade esquerda da tela e distanciados uns dos outros por uma diferença também de 100 pixels totalizando 4 na parte superior e 4 na inferior. Possuem o formato retangular com 20 pixels de largura e 30 de altura.

O tudo de pasta tem as dimensões de 20 pixels de largura por 60 de altura e movimentação obedecendo os deslocamentos vertical, e horizontal ao comando das teclas de direção direita, esquerda, inferior e superior do teclado.

 

Exemplo do modelo matemático

 Estabelecendo o modelo computacional

O tipo de programação utilizada será baseada em procedimentos. A ferramenta a ser utilizada será o Processing.

Alguns procedimentos foram criados para constituir os elementos básicos do jogo. Os procedimentos desenhaTubo(),  desenhaDenteSup(),  desenhaDenteInf() e  DesenhaInimigos() criam os personagens principais e são chamadas no jogo através da função void Draw(). No primeiro procedimento o elemento criado é o tudo de pastas, no qual foi utilizado as funções nativas do processing rectMode(), rect() e triangle() além de uma estrutura condicional para que o objeto pudesse se movimentar através das teclas de direcionamento do teclado.

Para desenhar os inimigos na tela foi utilizada a função ellipse() padronizando a altura e largura para todos eles. A movimentação dos mesmos será autônoma em L ou zig-zag

.

Já para o protótipo dos dentes foram usadas as funções rectMode() e rect() com um laço de repetição para criar a quantidade de elementos necessárias, num total de três elementos. A colisão entre eles e os inimigos fará com que o dente atingido seja destruído e imediatamente os inimigos irão inverter o movimento no eixo Y (ainda nao implementado).

 

Modelo computacional

Modelos dos protótipos dos elementos do jogo: