Gerador Automático de "Arte" (parte II)

Primeiramente, peço desculpas pela qualidade ou falta de animações, foi a primeira vez que utilizei o Premiere. Tentei apresentar, de modo geral, as etapas de desenvolvimento e o resultado final do Gerador Automático de "Arte". Avaliem com carinho, pois estou escrevendo essa postagem às 01:40 da manhã e preciso preparar a apresentação do TCC. Bjos de luz.

OBS: A legenda tá embutida no YouTube. Não adicionei diretamente no vídeo porque não achei adequado. ;)

Clique aqui para baixar o código. :)

desafio - aula 24

Não foi pedido, mas vou deixar aqui o código do desafio pra posteridade. Clique aqui para baixar o código. :)

tarefa 22 - aula 23

"Resumir criticamente a palestra "The Beauty of Data Visualization” de David McCandless, em www.ted.com"

McCandless começa o TEDTalks com a afirmação ousadíssima de que estamos sofrendo de excesso de informação ou abundância de dados. Percebi que ele fala do design da informação e como melhorar isso para atrair interessados e melhor visualizar os dados importantes. Informação é beleza. Informar quantidade de números sem uma representação visual dificulta o entendimento. Ao ver a informação de forma gráfica, é possível aumentar o número de relações e significados entre os dados fornecidos, padrões e conexões ao invés de dados desmembrados em várias notícias. A questão levantada é em criar a pergunta certa e trabalhar do jeito certo com informações complexas, indicações interessantes surgem ao trabalhar com o design de informação.

Esse tipo de diálogo é importante de ser apresentado e divulgado para tornar as pessoas mais conscientes sobre a forma que divulgam informações e como podem facilitar o processo de leitura desses dados, aprimorando assim até onde o conhecimento pode chegar.

tarefa 20 - aula 22

"Crie versões no Photoshop da imagem de einstein.jpg e cinza.jpg com variações de brilho e contraste. Qual impacto ocorreu na média e desvio padrão?"

Foram criadas 3 variações de cada imagem proposta pela tarefa. É possível perceber, na imagem cinza, que a mudança do contraste é inversamente proporcional a média de tons e o brilho comporta-se diferente, sendo proporcional o seu aumento com a quantidade de tons, o desvio padrão e a variância mantiveram-se 0. Na imagem do Einstein, o comportamento do brilho manteve-se igual, tornando o desvio padrão também proporcional. Entretando, diferente do cinza, por tratar-se de uma imagem com mais variações, o contraste ficou diretamente proporcional a alteração da média dos tons. Segue abaixo a imagem do canvas com os dados. Clique aqui para baixar o código. :)

obs: Sugiro abrir a imagem em outra aba para visualizar melhor os dados. ;)

tarefa 20 - aula 21

"Crie versões no Photoshop da imagem de einstein.jpg e cinza.jpg com variações de brilho e contraste. Qual impacto ocorreu na média e desvio padrão?"

PAra realizar essa atividade, foi, primeiramente, criada duas funções: pupilaBola() e olhoBola(). Em olhoBola() é estabelecido o tamanho do olho que será desenhado no canvas, para tanto, em olhoTamanho, foi dito o tamanho que seria adotado para compreender a pupila.

Em pupilaBola() são criadas duas variáveis, x e y recebendo, respectivamente a posição X e Y do mouse. É utilizada então int distancia = distancia2D(width/2, height/2, x, y); para saber a distância absoluta dos pontos (centro) até o mouse. Em seguida é criado um if para conter a pupila e saber a posição do mouse fora do olho. O arco tangente float angulo = atan2(y-height/2, x-width/2); descobre o ângulo usando dois pontos e, depois é estabelecido o seno e cosseno de y e x, respectivamente.

Tudo isso para definir a posição da pupila em ellipse(x, y, pupilaTamanho, pupilaTamanho);. Clique aqui para baixar o código. :)

tarefa 19 - aula 20

"Empregando a função milis() do Processing, criar uma aplicação para simular um cronômetro simples, apenas com o ponteiro dos segundos."

Foram criadas as variáveis logo de inicio para setar os valores do raio, ângulo e definir o intervalo (1000, por conta da função millis()). Dentro do draw() foi adicionado um if, onde se o valor do relógio + intervalo forem menor que millis(), o relogio seria igual a millis() e iniciaria a função cronometro().

Dentro de cronometro() foi criada o desenho do cronometro em si e setada a posição dos ponteiros com ponteiroX = 250 + cos(radians(angulo)) * raio; e ponteiroY = 250 - sin(radians(angulo)) * raio;. Por fim, foi estabelecido o if(segundo > 60), incrementando o valor do minuto e zerando o segundo. Clique aqui para baixar o código. :)

tarefa 18 - aula 19

"Criar o movimento de um barco no mar e discutir os resultados no blog. Utilize a função rotate para simular o movimento."

Este singelo exercício foi especialmente CHATO de ser feito. O barquinho poderia ter sido criado utilizando formas, mas decidir aplicar uma imagenzinha para simplificar, acrescentei também o imageMode(CENTER) para facilitar o posicionamento do barquinho na onda. Dentro do draw(), foi criado um retângulo para preencher o restante do mar, cuja parte de cima foi feita por uma linha grossa com a mesma cor do retângulo, ficando assim: line(i, 100-(sin(x)*5), i, 120-(sin(x)*10)). Ou seja, i é o parâmetro que posiciona o início e o fim da linha, enquanto 100-(sin(x)*5) e 120-(sin(x)*10) representam o período e a amplitude da onda. Foi adicionado um if() para criar o loop de movimento da cena.

Para deixar o barquinho se movendo igual a onda, bastava deixar translate(110, 80-(sin(y)*10)) igual a multiplicação feita na linha.. Ele se balança utilizando o translate() e o rotate(), após ter igualado o x com o y. Foi utilizada as funções pushMatrix() e popMatrix() para salvar as coordenadas e prioridades da função. PORÉM SÃO DISPENSÁVEIS! Clique aqui para baixar o código. :)

tarefa 17 - aula 18

"Empregando rotate(), criar uma aplicação que desenha um polígono regular centralizado na tela com a quantidade de lados informada no próprio código. Discutir a solução adotada em seu blog."

Para a resolução desta atividade, foi utilizado beginShape() e endShape(CLOSE), translate(), rotate() e vertex().

Avariável global n serve para escolher a quantidade de lados do polígono. Dentro do draw() é aplicado o texto que indica no canvas a quantidade de lados e, logo em seguida, o translate, que serve para especificar os objetos a serem deslocados na tela e a posição (the x parameter specifies left/right translation, the y parameter specifies up/down translation). O rotate, que gira a quantidade especificada pelo parâmetro angular (os ângulos devem ser especificados em radianos (valores de 0 a TWO_PI)), é aplicado contendo o frameCount (contém o número de quadros que foram exibidos desde o início do programa), dividido por 60.0. Abaixo é apresentada a função drawPoli, contendo os parâmetros, x e y 0, n para o número de lados e 150 para o raio do polígono.

É criada a variável ang correspondente a TWO_PI dividido pela quantidade de lados. Cria-se, então um laço onde é gerado o seno e o cosseno do polígono, aplicados, no vertex (utilizado para conectar os vértices). O polígono é então fechado pelas funções beginShape() e endShape(CLOSE) (allow creating more complex forms - essa função começa e termina a "gravação" da forma). Clique aqui para baixar o código. :)

tarefa 16 - aula 17

"Explicar e implementar uma das transições apresentadas em http://www.youtube.com/watch?v=6n7GoNmgHGI."

O exercício dessa atividade foi mais chatinho do que esperava, precisei pesquisar nos blogs dos coleguinhas e pedir ajuda para entender o processo de transição. A transição criada foi a partir da leitura dos pixels na horizontal e vertical, fazendo tipo um quadradinho, em loop, saindo de uma figura para a outra. O código funciona da seguinte forma: foi implementado um contador dentro do laço que faz a leitura dos pixels da cena1 e altera para a cena2 utilizando o loadImage("cena" + alterne + ".png") - com ele é possível adicionar outras imagens na pasta.

O contador é então incrementado adicionando mais 4 (pra ir rapidinho), se o valor for maior que a largura do canvas, ele reinicia todo o processo. Foi adicionado saveFrame() ao final do código, ele salva a sequencia de imagens, uma por vez, a cada vez q a função é rodada (pode dispensar ele a vontade, hehe). Clique aqui para baixar o código. :)

tarefa 15 - aula 16

"Criar uma aplicação que, empregando variáveis para controle de valores, realiza o processo abaixo numa imagem à sua escolha:"

Para criar essa aplicação, foi utilizado o exercício feito em sala e acrescentado o processo ruído, consistindo em alterar os pixels da imagem, variando entre -30 a 60, somados ao RGB, ficando a cor atribuída da seguinte maneira: color(r+ruido, g+ruido, b+ruido);. A imagem cinza foi criada utilizando a variável c (vista em sala, sendo o "cinza verdadeiro"/percebido pelo homem), em cada um dos espaços respectivos aos canais de cor. Para as outras imagens, bastou adicionar color(c+ruido, 0, 0) para vermelho e color(c+ruido, c+ruido, 0) para o amarelo. Clique aqui para baixar o código. :)

Resumindo, para adicionar ruído e aplicação do cinza, foi acrescentado ao código:
float ruido = round(random(-30, 60));
corRuido = color(r+ruido, g+ruido, b+ruido);
imgRuido.set(x, y, corRuido);
c = (0.3*r)+(0.59*g)+(0.11*b);