Atividade 6 - Bandeira do Brasil (MAMI - 2017.2)

Um dos fatores que dificultam a criação de objetos geométricos proporcionais no Processing, é a lei diferenciada na criação das formas básicas. Nesse caso, o método padrão de formação de um retângulo, por exemplo, se dá pelo vértice superior esquerdo da forma.

No entanto, ao aplicar o rectMode(RADIUS), observamos que tal método pode ser simplificado. Em vez do retângulo ser formado a partir do vértice dito acima, ele é criado a partir do centro da forma (x, y), simplificando o processo de centralização do retângulo, por ser parecido com o da formação da ellipse.

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

Atividade 5 - Bola Quicante (MAMI - 2017.2)

Para fazer a bola quicante, defini primeiramente as variáveis x (posição horizontal), y (posição vertical), velocidade x, velocidade y, gravidade = 0.3, dx(distância x) e tempo.

No void draw, estabeleci as funções "amb" (ambiente) e "lancamento", a cor do círculo e seus parâmetros, x+dx (variação a cada instante na horizontal), y, tamanho 25, 25.

No void "amb", eu apliquei a gravidade na velocidade y e a velocidade como influenciadora da posição y. Se a pos. y for maior ou igual à altura da tela, é subtraido 10% da velocidade y do objeto (vy = vy * 0.9).

No void "lancamento", é calculada a distância pela função MRU e depois, se a posição y da bolinha é igual à da altura da tela, também é subtraido 10% da velocidade x do objeto (vx = vx * 0.9).

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

Atividade 4 - Corrida (MAMI - 2017.2)

Nessa atividade foram criadas variáveis float para tempo e distância atual (inicialmente iguais a 0), e uma int para decisão do vencedor. Depois foi feito um vetor de 20 variáveis para o estabelecimento das velocidades randômicas dos veículos (vVeic). Além disso, foi incluido um teste lógico "termina", inicialmente "false".

Após isso, criei a variável float MRU, que calcula e retorna a distância por meio da fórmula  d = v*t.

Então, foi criada a variável "comp" para a criação dos carrinhos, no qual utiliza a variável "v" para calcular a dAtual. Esta, por sua vez, é utilizada como referencial para a localização das partes do carro, que foram todas criadas por meio da função rect. O destaque do número foi feito com um ellipse, e o número contido, com a função text.

No void setup, foi estabelecido o tamanho da tela de execução (600, 600), e as velocidades dos carrinhos, por um laço de repetição "for".

No void draw, foi estabelecido a cor de background, e os voids "pista" e "tempo", que serão explicados adiante. Aqui, chegamos em um condicional importante "if (termina == false)", em que é definido o tempo somado ao acréscimo e são criados os 20 carrinhos e definidas suas velocidades pelo laço de repetição "for". 

Quando um dos carrinhos  alcança a "Chegada", o teste booleano "termina" irá ser verdadeiro, e o vencedor será declarado por meio do condicional "if". Então, será apresentado o número do carrinho vencedor e o tempo que demorou para alcançar a "Chegada".

No void "pista", são criados retângulos para destacar o tempo e a linha de chegada, que é exibida pelo texto com quebra de linha.

No void "tempo", o texto do tempo é exibido com precisão de 6 casas decimais, por meio da variável "tAtual".

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

Atividade 3 - Gerador de Falsificações com Slidebar (MAMI - 2017.2)

Para fazer o Gerador de Falsificações, primeiramente criamos uma função para desenhar círculos "void circulo" e acrescentamos a capacidade de ser preenchida com cores aleatórias, e alocamos seus parâmetros como parâmetros da função "ellipse" com variáveis locais (x da esfera, y da esfera, 2*r para os diâmetros).

Após isso, criamos uma função "bloco", para desenhar as unidades da figura. Usando "rect", para desenhar um quadrado e três vezes a função "circulo" para os círculos interiores, cada um mantendo proporção de, respectivamente, 1/2, 1/3 e 1/6 com o primeiro.

Depois, acrescenta-se a biblioteca ControlP5 para gerar uma slidebar, sendo que os valores das barra "Horizontal" varia de 1 até 9, e o da "Vertical", de 1 até 7.

Para vincular a barra de rolamento com os parâmetros, foi criado quatro variáveis "hor", "ver", "h", "v" e o teste booleano "pintar" = verdadeiro. As variáveis "h" e "v" recebem os valores atuais da barra, e inicialmente são iguais às variáveis "hor" e "ver".

Contudo, se arrastarmos a barra de rolamento, e o programa receber valores diferentes para "hor" e "ver", conforme arrastamos a barra, "pintar" é verdadeiro, e o programa começa a gerar os blocos, de acordo com o número recebido por intermédio de um laço de repetição, que são dispostos de acordo com as coordenadas recebidas.

Caso o slidebar esteja parado, os valores são iguais, portanto "pintar" é falso e nada acontece.

Link: https://drive.google.com/open?id=0B3-iqp7LYuNJS3FrTVhLWTFjQVk

Atividade 2 - Quadrados Contíguos Horizontais (MAMI - 2017.2)

O debug é uma ferramenta que exibe os valores das variáveis que estão sendo processados a cada momento, ou seja, permite ao programador avaliar as condições e os parâmetros em tempo real, beneficiando, desse modo, o desenvolvimento do programa, uma vez que permite uma intervenção mais rápida e direta no código.

Na atividade dos n quadrados, o debugger auxilia na amostragem das variáveis que geram o número de quadrados em cada execução, os quais são criados nesse momento. Desse modo, podemos monitorar se as variáveis estão funcionando de acordo com nossa intenção em determinado instante do código, parando a execução na linha desejada.

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

Atividade 1 - Hello World! Processing (MAMI - 2017.2)

O documentário "Hello World! Processing" discerne inicialmente sobre o conceito de Processo e, aos poucos, vai adentrando na filosofia dos desenvolvedores de criar uma aplicação que fosse ao mesmo tempo simples e versátil, e que pudesse ser utilizada principalmente como ferramenta de criação artística e experimental para designers e artistas, por causa de sua alta interatividade visual.

Dentre os exemplos que foram contemplados no site do Processing, escolhi o Interpolate para essa atividade.

É um programa relativamente simples, que consiste em desenhar um círculo no background e este pode ser guiado pelo cursor por intermédio da função lerp(), que calcula uma distância entre dois pontos em determinado incremento (no caso, aqui é a posição da forma desenhada e o cursor) conforme o valor inserido (vai de 0.0 "Fixo na origem" a 1.0 "Fixo no cursor"). Desse modo, essa distância é aplicada na posição atual do círculo, dando a impressão deste seguir o cursor ao movimentar o mouse.

Sabendo disso, modifiquei um pouco o programa, de forma a inserir dois objetos adicionais, que seguem a trajetória do cursor em diferentes velocidades.

Primeiramente eu acrescentei mais 4 variáveis (a, b, c, d), que correspondem, respectivamente, aos valores da função lerp() no quadrado e na estrela.

Na função "void draw()", foi indicado o valor do lerp (3%) para o círculo, que teve sua cor alterada para magenta e o tamanho para 70, 70.

Foi indicado o valor do lerp (5%) para o quadrado e sua cor foi alterada para ciano e tamanho para 70, 70.

Foi indicado o valor do lerp (100%) para a estrela e sua cor foi alterada para amarelo, bem como foram dadas as coordenadas do seu tamanho para ser desenhada pela função "void star". Aqui, a estrela fica exatamente no meio do cursor, porque o lerp foi configurado como "1.0".

Peguei a função "void star" em um dos exemplos expostos no site do Processing (Star), que basicamente passa as instruções matemáticas para a criação da estrela.

Uma das ideias que achei interessante no documentário foi a da importância do compartilhamento e abertura do código de alguns projetos, pois contribui enormemente para o enriquecimento, desenvolvimento e reinvenção de novas ferramentas e tecnologias. No caso dessa atividade, mesmo que simples, foram usadas dois códigos para a criação de algo novo.

Link do código: https://drive.google.com/file/d/0B3-iqp7LYuNJQ2Z0MDVhZWJXOW8/view?usp=sharing

Atividade 6 - Os 12 Princípios da Animação da Disney: Bons e Maus exemplos (Autoração Multimídia I - 2017.1)

1º- Squash and Stretch (Espremer e Esticar)


Bom Exemplo: É possível observar a aplicação do princípio Squash and Stretch nessa animação, pois transmite uma sensação de flexibilidade nas formas usadas.

Mau Exemplo: Vemos nesse GIF uma rigidez no personagem que contradiz o princípio Squash and Stretch, uma vez que não há muita flexibilidade de formas envolvida em sua animação.


2º- Anticipation (Antecipação)


Bom Exemplo: Podemos ver claramente a utilização do princípio da Antecipação do golpe exercido pela personagem de bastão.

Mau Exemplo: A ação está despida do princípio da Antecipação porque não há uma preparação para a realização do movimento.


3º- Staging (Encenação)


Bom Exemplo: Se transformarmos essa animação em silhuetas simples, continuamos a assimilar o seu conteúdo.



Mau Exemplo: As ações dessa animação são reconhecíveis para o público apenas quando expostas por um certo tempo, o que desqualifica-a em termos de Staging.

4º- Straight Ahead Action and Pose to Pose (Ação Direta e Pose para Pose)

 
Bom Exemplo (Straight Ahead Action): Vemos o uso de imagens desenhadas separadamente com artifício Straight Ahead, obtendo uma animação fluida.

Bom Exemplo (Pose to Pose): Vemos o uso do técnica Pose para Pose sendo bem utilizada, com as intersecções dos frames começo-meio-fim definidas com maestria.



Mau Exemplo (Straight Ahead Action): Não há graduação de imagens, elas aparecem abruptamente na tela, quebrando o Straight Ahead.


Mau Exemplo (Pose to Pose): Há o estabelecimento do começo-fim, porém a imagem não obtém uma fluidez desejada, uma vez que não há intersecções.


5º- Follow Through and Overlapping Action (Continuidade e Ação de Sobreposição)

Bom Exemplo: A física dessa animação está bem dinâmica e exagerada, uma vez que faz o uso da Continuidade e Ação de Sobreposição, artifício que os animadores podem utilizar para tornar a movimentação mais fluida e natural.

 

Mau Exemplo: Aqui vemos uma rigidez nas feições da personagem, pois não se faz o uso adequado da Continuidade e Ação de Sobreposição.

6º- Slow In and Slow Out (Acelerar e Desacelerar)


Bom Exemplo: Notamos aqui a presença de aceleração e desaceleração no movimento, caraterizando o uso do Slow In e Slow Out.

Mau Exemplo: A bola da animação está sempre em velocidade constante e uniforme, o que descaracteriza o uso do Slow In e Slow Out.

7º- Arc (Arco)


Bom Exemplo: O arco formado por essa animação é bem suave e definido por causa da quantidade de frames utilizados nela.


Mau Exemplo: O arco formado pela animação acima, pelo contrário, não é fluido, o que torna os movimentos "travados".

8º- Secondary Action (Ação Secundária)


Bom Exemplo: O movimento de dança que o personagem realiza complementa a sua locomoção pelo cenário, caracterizando o Secondary Action.



Mau Exemplo: Aqui vemos apenas uma ação e reação realizada por vez, sem a participação de outros movimentos.

9º- Timing (Cronometragem)

 Bom Exemplo: A bola diminui a velocidade no final da animação por causa do aumento do tempo de transição entre duas imagens consecutivas no final da ação.

 Mau Exemplo: Não há fluidez na animação por vários fatores. Um deles é a ausência da utilização da Cronometragem.

10º- Exaggeration (Exagero)

Bom Exemplo: Há a utilização da técnica Exagero para exprimir mudança de emoções pela expressão facial da personagem.



Mau Exemplo: Não há mudança de expressão na face da personagem.

11º- Solid Drawing (Desenho Sólido)

 

Bom Exemplo: Transmite sensação de profundidade.


Mau Exemplo: Não transmite sensação de profundidade.

12º- Appeal (Apelo)

Bom Exemplo: Exerce certa atração em relação ao público-alvo pelo uso dos gestos e personalidade das personagens.


Mau Exemplo: Não exerce nenhuma atração, é só um boneco palito fuleiragem.

Atividade 5 - Frames per Second (Autoração Multimídia I - 2017.1)

10FPS

 12FPS

 

24FPS

46FPS

Atividade 4 - Laboratório de Monstros (Autoração Multimídia I - 2017.1)

                                           Retrato Original

                                        Retrato "versão Quimera"


Foram utilizadas os seguintes ingredientes para fazer a nossa graciosa Quimera:

Imagens:

                             http://www.polyvore.com/blonde_fair_platinum_hair_png/collection?id=4911517
1- Mechas dessa linda cabeleira recortada com Seleção de Cor, Redimensionada e Colorida em tons esverdeados e azulados.

 

http://www.freeiconspng.com/png-images/beard-png 

  2- Uma barba colorida em azul claro para ficar na moda. Foi usada as ferramentas de Redimensionamento e a seleção pela Varinha Mágica para auxílio no Recorte da figura.

                                        http://www.mesbuta.info/key/b/words-bat-nose.html
3- As orelhinhas, o narizinho e os caninos dessa criatura singular. Foram Recortados com a Seleção Livre, Coloridos de vermelho, Redimensionados e tiveram seus ângulos mudados para se adequar à imagem.

                                        http://dark.pozadia.org/wallpaper/Demon-Face/
4- Os chifres desse capiroto foram Recortados com a Seleção Livre, Coloridos de verde e azul, Redimensionados e Colados na imagem.

                                            http://www.pngmart.com/image/21632
5- Para enaltecer seu caráter divino, foram transplantadas duas asas de querubim para a criatura. Foi utilizado a Seleção por Cor para recortar a figura e Redimensionar para adequá-la ao tamanho da imagem.

                                          http://ssrnews.com/fire-tax-increase-opposed/
6- O fogo em seus olhos e cabelos são resultado do ódio visceral que a criatura tem quando oferecem a ela fígado de boi. Foi utilizadas as ferramentas de Perspectiva, Redimensionamento e Mudança de Ângulo.

                                       https://br.pinterest.com/explore/unic%C3%B3rnios/
7- Sim! O sangue da mais alta raça de unicórnios corre pelas veias desse bicho. Esse chifre extraordinário é a prova disso. Foi utilizada a ferramenta de Seleção Livre e Redimensionamento para recortá-lo e colá-lo.

Filtros:

Os filtros utilizados foram o Filtros → Artístico → Aspecto de Tecido, na blusa (que foi pintada de roxo) e Filtros → Artístico → Brilho Suave, na imagem inteira.

Tutoriais:

https://www.youtube.com/watch?v=x84GaEiCy8M
https://www.youtube.com/watch?v=JS3LrQfYQ44
https://www.youtube.com/watch?v=N8xikItbxW8
https://docs.gimp.org/2.8/pt_BR

Obs.: Os vídeos mostram versões mais antigas do GIMP, mas de certa forma me orientaram bastante no que fazer e não fazer.

Atividade 3 - Coloração (Autoração Multimídia I - 2017.1)

                                             Imagem Restaurada em Tons de Cinza

                                       Imagem Restaurada após Coloração no GIMP

                                                Imagem em Tons de Cinza

                                             Imagem após Coloração no GIMP