Trabalho de MAMI - Gerador de Arte (Parte 2)

Link do código: https://drive.google.com/open?id=1AUI4WUZtjbgH_A4s6xBvi9jPa_UV_rkT

Atividade 21 - The Beauty of Data Visualization (MAMI - 2017.2)

O vídeo "The Beauty of Data Visualization", que pode ser acessado ao clicar aqui, fala de um dos maiores problemas da atual "Era Digital", o excesso de dados e informação nas esferas midiáticas. Usando gráficos variados, o palestrante, David McCandless, exibe de forma sistemática gráficos e diagramas que extraem dados e informações, por exemplo, de notícias obtidas no meio jornalístico, exibindo-as de forma a ser facilmente interpretadas, demonstrando, dessa maneira, a importância do Designer de Informação no contexto atual.

Na minha perspectiva, apesar do conteúdo ser excelente, achei um pouco tendencioso, provavelmente por causa das inclinações e/ou nacionalidade do autor. Pois, após exibir os dados brutos do investimento dos Estados Unidos na indústria bélica (que é o primeiro do mundo na categoria), ele mostra um gráfico de porcentagem dessa espécie de investimento pelo PIB e conclui que os EUA estão em 8º, e não aprofunda mais no assunto. Acontece o mesmo quando ele mostra o diagrama de doações dos EUA para instituições de caridades (que tem peso maior vários países juntos), e não explora os "porquês" por trás dessa realidade.

Além disso, muitas das informações diagramadas não foram devidamente creditadas às suas fontes originais. Poderiam também ter sido apresentados mais organogramas interativos e divulgado sobre o mercado de trabalho voltado para o Design de Informação

No entanto, achei o vídeo muito bom, porque nos traz à tona a necessidade cada vez maior do profissional Designer da Informação para a nossa realidade.

Atividade 20 - Einstein (MAMI - 2017.2)

Nessa atividade, criei 2 versões adicionais, para as imagens abaixo:

Aplicando essa no Processing, vemos:

Aplicando essa no Processing, vemos:

Aqui estão elas, a primeira de cada com maior brilho, e a segunda com maior contraste:

 

Aplicando essa no Processing, vemos: 

A média de tons aumentou, por causa do aumento da quantidade da cor branca na foto. A variância também aumentou, porque agora temos novos tons (mais próximos do branco puro). E o desvio também aumentou, porque os valores se distanciam mais da média.

 Aplicando essa no Processing, vemos: 

A média de tons aumentou ligeiramente, porque algumas partes que já eram brancas ficaram mais ainda. A variância aumentou, porque o contraste criou uma maior gama de tons. O desvio aumentou, porque locais que já eram escuros ficaram mais ainda, assim como os claros ficaram mais claros.

Aplicando essa no Processing, vemos: 

A média de tons aumentou, afinal estamos trabalhando com uma tela monocromática. A variância aumentou alguns décimos, acho que deve ser o ruído do formato da imagem .jpg. Idem para o desvio.

 

 Aplicando essa no Processing, vemos: 

Todos os valores permaneceram, afinal não há como contrastar uma imagem monocromática.

Atividade 19 - Olhão (MAMI - 2017.2)

Para fazer o olhão, utilizei a função atan2 para fazê-lo acompanhar o cursor, aplicando mouseY-height/2 e mouseX-width/2 na função. Além disso, criei uma variável que recebe o ângulo do atan2, e depois apliquei ao círculo interior para receber suas respectivas coordenadas cartesianas.

Link do código: https://drive.google.com/open?id=1sxCq6reBkIYBT-6h5T-txV5R7Yp93kR_

Atividade 18 - Cronômetro (MAMI - 2017.2)

Para fazer o cronômetro mostrado acima, utilizei a função millis dividido pelo módulo de 1000 e 60 como a variável t, e um conversor das coordenadas polares para adquirir as coordenadas cartesianas, tendo o resultado multiplicado por 2*PI, que representa os 360º. Para cada posição, foi criada uma variável correspondente a um array de coordenadas cartesianas, que são aplicadas às posições de cada instante do relógio em uma linha. Para parecer um relógio, carreguei uma imagem de relógio no fundo.

Link do código: https://drive.google.com/open?id=1KvsQCEIlw72wwIuthdh0YR1n0VndGOMc

Atividade 17 - Maré Senoidal (MAMI - 2017.2)

Para fazer o barquinho navegando no mar, utilizei duas linhas para representar as correntes marítimas, as quais variam suas coordenadas X e Y de acordo com o seno de uma variável angular, dnado a sensação de ondulamento. Quando é completado um ciclo dessa variação, o movimento começa novamente por meio do reestabelecimento do valor inicial da variável.

Para acompanhar o movimento das ondinhas, a imagem do barquinho é orientada de acordo com as funções translate e rotate, que recebem o mesmo seno do ângulo da maré.

Link do código: https://drive.google.com/open?id=17-_Uwk8S8ZJriggBuN_njU-KJW_4wTyb

Atividade 16 - Polígonos (MAMI - 2017.2)

Nessa atividade, foi proposta a criação de uma aplicação que desenhasse um polígono regular (centralizado na tela), empregando a função rotate() e a quantidade de lados da figura que será gerada.

Para isso, usei uma variável que utiliza o valor de 2*PI e divide pelo número de lados. Para cada fatia resultante dessa divisão, é criado um triângulo com um dos vértices centralizado na tela, que por meio do seno e cosseno de cada ângulo gerado, multiplicado pelo tamanho do desejado, é posicionado pelo função rotate(), de modo a compor a figura resultante. O rotate deverá mover cada peça em intervalos iguais ao ângulo dividido.

O rotate() é uma ferramenta poderosa para criação de polígonos, uma vez que é relativamente fácil e econômico de utilizar.

Resultados:

 3 lados

6 lados

 9 lados

50 lados

Link do código: https://drive.google.com/open?id=1FbGyuqOJtEgAV12q2iUc2KB-l8tj5rEI

Atividade 15 - Transição (MAMI - 2017.2)

A atividade é, basicamente, escolher uma das transições apresentadas nesse vídeo e implementá-la usando Processing. Escolhi a transição que ocorre no minuto 11:31, um fading simples. Para isso, utilizei as duas imagens abaixo (320x240 pixels):

Criei, então, uma variável para cada cor do RGB e , e depois utilizei o scanline para fazer um efeito de escurecimento com uma variável que multiplica os valores por uma variável a que é subtraída por 0.01 a cada frame. Quando o RGB atinge 1 em todos os seus valores (ou seja, fica totalmente sombreado), é feito outro scanline, que desta vez insere a segunda imagem, fazendo, desse modo, a transição.

 Link do código: https://drive.google.com/open?id=152vYiXI1_MMiqg_aYrwJEgrpb4QD4w0j

Atividade 14 - Cores (MAMI - 2017.2)

O objetivo desta atividade é aplicar ruído em uma imagem qualquer e, após isso, mudar os seus canais de cores para cinza, vermelho e amarelo, respectivamente. Para isso, usei a imagem abaixo (320x240 pixels) como demonstração:

Primeiramente, criei variáveis para cada uma das 4 variações que foram pedidas (ruído, cinza, vermelho e amarelo). Depois, os armazenadores color corOrig e corDestino. Além disso, foram criadas as variáveis c e media, que vão funcionar como "fixadores", das novas cores criadas.

Para o ruído, são criadas cores aleatórias e colocadas na imagem em posições aleatórias. Pode-se controlar a quantidade de ruído pelo número de pixels alterados que deseja-se obter.

Para o cinza, fazemos o processo de scanline na imagem, e obtemos os valores de vermelho, verde e azul de cada pixel da tela. Depois é feita uma média entre esses valores e exibida novamente.

Para as duas cores pedidas, são adquiridos os valores de vermelho e amarelo da imagem, respectivamente e exibidos na imagem conforme os tons de vermelho são mais presentes nos pixels da imagem, no caso do filtro vermelho, o mesmo vale para o amarelo. Quanto menos houver tais cores nos pixels originais, mais escuro será o pixel modificado.

Resultado:

Link do código: https://drive.google.com/open?id=1zGlORWn3CDJsXRTf8qiueuf8Ro1H-r5S

Atividade 13 - Jogo com Colisão (MAMI - 2017.2)

Para fazer o jogo, utilizei as seguintes imagens:

Sprite da personagem

Cenário

Imagem do inimigo (obstáculo)

Primeiro inicializei as variáveis float da posição do personagem e do inimigo, depois o tempo atual e a pontuação. Após isso, inseri o tempo de queda e vidas (variáveis int). Em seguida, adicionei as variáveis PImage dos três elementos acima. Por fim, adicionei três testes booleanos "pulando", "findajogo" e "ganhou".

No setup, as imagens são carregadas. No void draw, está a função findajogo(), que coordena praticamente todo os processos de acabamento do nível.

No void pular, o teste booleano "pulando" é utilizado para realizar o salto da personagem, por meio do "tQueda" (tempo de queda) e a variável y.

No void inimigo a elipse é criada e a imagem é carregada na mesma posição. O inimigo se move a 20 pixels por segundo por meio de um decremento da variável x. Toda vez que ele sai da tela, ele é reposicionado no ponto inicial.

Adentrando o void colisao, notamos a utilização do bounding box, que detecta a colisão de acordo com as coordenadas dos objetos colididos. Caso haja colisão, a variável vidas (inicialmente de valor 3), é decrementada.

Depois, foi colocada uma nova função: void keyPressed. Se a tecla pressionada for o botão direito do teclado, a função "andando" armazena a string "DIREITA", o mesmo se dá com "ESQUERDA". Se o botão Space for pressionado, "pulando" é verdadeiro. Na função keyReleased, se a tecla direita ou esquerda é solta, a variável "andando" armazena a string "PARADO".

Na função seguinte, void andar, os strings são comparados e x é incrementado em 5 pixels, se para direita, ou decrementado em 5 pixels, se para esquerda.

A maior parte das funções criadas estão conectadas ao void findajogo, que tem o objetivo de inicializar e acabar com o jogo. Caso a variável booleana "findajogo" seja false, os elementos são criados e o jogo começa a rodar. Se o x do personagem for maior que a largura da tela, a variável "ganhou" é verdadeira e a variável "findajogo" também. Além disso, se o número de vidas chegue a 0, "findajogo" = true.

No HUD do jogo são exibidos o número de Vidas do personagem (começa com 3), e o tempo atual. Se "ganhou" = true, aparece a pontuação do personagem que é calculada pela equação: pontuação = vidas*1000/ tempo final. Então, são exibidos os valores de tempo, número de vidas restantes e a pontuação, em letras verdes, por meio do text(). Se a vitória não for atingida, é anunciada sua derrota em letras vermelhas e o tempo também aparece.

Obs.: o printline do x e y do personagem foi incluído.

Três exemplos de partidas:

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJaTFRWktocDFELWc

Trabalho de MAMI - Gerador de Arte (Parte 1)

Série: Chevron Palette

Artista: Alexandre Reis

Modelo Natural: O conjunto de obras são compostas pequenos triângulos nas bordas superior e inferior do quadro, além de "zigue-zagues" que preenchem a maior parte da tela. As cores possuem padrões diferentes, que variam de acordo com o quadro. Os que resolvi "copiar" em especial foram os que possuem variação de saturação e brilho conforme as camadas passam.

Modelo Matemático:

Uma primeira análise da obra permite a observação de uma espécie de grid imaginário alinhando os vértices na vertical e tangenciando-os na horizontal, tornando a obra rigorosamente proporcional.

É possível observar quatro triângulos isósceles em cima e três embaixo, sendo que, dos quatro de cima, apenas os dois do meio estão completos.

Podemos perceber que, excetuando os triângulos na parte superior e inferior, podemos dividir as formas em pequenos paralelogramos.

Como a imagem possui aproximadamente de 400x520 pixels, podemos tomar a largura (400px) por módulo. Dessa forma, as medidas ficariam assim:

Modelo Computacional: 

Sabendo disso, comecei a trabalhar no modelo computacional. Primeiro, foi criado um background branco na tela. Para criar as primeiras e últimas formas, os triângulos, usei a função beginShape(TRIANGLES). Depois, para criar a primeira camada de "zigue-zagues", dividi cada camada em quatro partes principais que se repetem, cada uma criada com a função beginShape():

É importante ressaltar que, na função beginShape(), os pontos são estabelecidos nas posições ordenadas, e depois a forma é construída. Portanto, foi muito importante a utilização de rascunhos para prever o que iria ser desenhado na tela. As linhas de contorno foram retiradas com a função noStroke(). Após construir o modelo da camada, usei um laço de repetição for para recriar as 7 subsequentes, sendo que essa estrutura foi encapsulada na função cheVron().

Após isso, verifiquei as cores da imagem original. Apesar de serem semelhantes, e aparentarem estar em degradê de luminância e saturação, isso não é bem verdade.

As camadas variam semi-aleatoriamente a brilho, saturação e um pouco da paleta. Então criei uma variável randômica para cada um desses atributos h (varia de 0~360), s (varia de 25~40) e b (varia de 25~40). Como as camadas de cima tendem a ser mais claras, deixei alto o índice de brilho nesses segmentos, adicionando valores. Conforme foi passando de camada em camada, eu aumentei os índices de saturação e reduzi os índices de brilho, mas com as três variáveis aleatórias influenciando na formação das cores.

Depois, criei uma função que inverte a ordem de cores da tela pela função keyPressed() que é relacionada a uma variável booleana change. Quando é pressionada a tecla Space, change se torna verdadeiro. Desse modo, os quadros passariam a se assemelhar mais com o padrão do quadro abaixo:

Para os quadros passarem de forma mais pausada, deixei o frameRate em 1, ou seja, apenas 1 quadro irá passar a cada segundo.

O resultado final foi este abaixo:

Sem a tecla SPACE pressionada.

Com a tecla SPACE pressionada.

Link do código: https://drive.google.com/open?id=0B3-iqp7LYuNJcnpUQzlqSGF2aXM