Atividade 19 - MAMI

A proposta da atividade atual consiste em criar um olho (círculo preto pequeno no interior de círculo branco grande) que se encontra sempre voltado para o cursor do mouse 

Para fazer com que o circulo preto pequeno se mova em direção do mouse, eu criei uma variável chamada ang, que recebe o valor do cálculo da tangente dos pontos X e Y do mouse subtraídos da largura/2 e altura/2 da tela. Sendo ang a representação de um círculo cuja angulação varia de -PI a +PI, eu passo esse valor como parâmetro para a função rotate ( ), fazendo com que o círculo preto gire.

DESCRIÇÃO

• Link do projeto no Google Drive: https://goo.gl/fgikMj

Read More

Atividade 18 - MAMI

A proposta da atividade atual consiste em criar uma aplicação para simular um cronômetro simples, apenas com o ponteiro dos segundos, empregando a função milis() do Processing.

Para criar o ponteiro do meu cronômetro, eu usei a função line(), no qual ela recebe os x e y iniciais da linha sendo a metade da minha tela (300, 300), e os x e y finais são os valores da primeira e segunda posição do vetor que a minha função polarToCart retorna. Essa função funciona recebendo um raio (r = 130) e um ângulo (ang = 0), e retornando um vetor com as coordenadas polares convertidas em coordenadas cartesianas. Para deixá-lo colorido eu usei o modo de cor HSB e função stroke( ) eu passo um valor referente ao vermelho em HSB. Para deixar-lo com a espessura mais grossa, eu usei a função strokeWeight( ) com o valor 10.

Para fazer a linha girar como o ponteiro dos segundos, a variável do ângulo (ang) é igual 6.14/12000 * millis(), sendo assim a divisão de uma volta do circulo por 12 segundos. A função millis() é o tempo, em milisegundos, que o programa passa a ter desde que inicia.

Para o resto do cronômetro, eu usei uma imagem mesmo.

DESCRIÇÃO

• Link do projeto no Google Drive: https://goo.gl/QjKN1K

Read More

Atividade 17 - MAMI

A proposta da atividade atual consiste em criar o movimento de um barco no mar e discutir os resultados no blog. Também era pra utilizar a função rotate para simular o movimento. 

Primeiro, pra criar o movimento das ondas, eu criei um for, que varia de 0 à 500. Se o i do for chegar a 250, a variável inclinação passa a ser igual a variável ang. Depois eu criei outro for, que serviria para fazer várias ondas, mas devido o processamento, que deixava o movimento extremamente lento, eu optei por desenhar apenas 4 linhas, intercalando as cores delas. Nesse for, as linhas são desenhadas usando a variação do seno do ângulo representado pela equação sin(ang)*20. Essa equação faz com que haja variação da posição y das linhas, dando o efeito de movimento da onda. Para que isso ocorra, fora do laço a variável ang é incrementada com 0.05, modificando assim o valor do resultado da equação e em seguida a variável variação também é incrementada em 0.1. Quando variação for maior que uma volta ele zera.

Para fazer o movimento do barco, eu coloquei ele na posição 250. Para saber seu ângulo de inclinação nessa posição, eu criei a variável angInclinacao, que armazena o valor de ang. Usando a função translate(), eu posiciono o barco na posição x =  250, e y = 275 - sin(angInclinacao)*20, e translate(250,275-(sin(angInclinacao)*20)). Agora para que o barco faça o movimento igual ao da onda, eu uso a função rotate((sin(angInclinacao)*0.7)). Isso faz com que o barco fique num ângulo reto quando ele está nos picos de variações.

DESCRIÇÃO

• Link do projeto no Google Drive: https://goo.gl/THpQmH

Read More

Atividade 16 - MAMI

A proposta da atividade atual consiste em, empregando a função 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. 

Primeiramente, para criar o polígono eu criei a função slice(), que retorna um float com o ângulo que as fatias do meu polígono vai ter. Depois criei uma variável chamada ang, que vai chamar a função slice() e passar um número de quantidade de fatias, que no caso é a variável num, que está inicialmente definida como 4.

Após isso, eu criei um for no draw, que desenha o polígono através da função triangle( ), onde eu passo os valores do pontos do triângulo (0, 0, cos(ang)*250, sin(ang)*250, cos(ang*2)*250, sin(ang*2)*250). No caso, os valores cos(ang)*250, sin(ang)*250 representam as coordenadas x e y do meu segundo ponto, e o cos(ang*2)*250, sin(ang*2)*250 as coordenadas do meu terceiro ponto. Para que esse for desenhe todos os triângulos do meu polígono centralizado e tomando com base os pontos (0,0) como centro do mesmo, eu usei as funções rotate( ) e translate( ). A primeira função para girar os triângulos em torno do eixo do ponto (0,0) e a segunda para deslocar a posição inicial da tela (0,0) para o centro da tela (300, 300).

Resultado 01

Resultado 02

Resultado 03

Usar a função rotate( ) para fazer polígonos girarem é menos trabalhoso do que por exemplo fazer cada ponto do polígono variar seu valor para que tenha o mesmo efeito visual de uma rotação, como visto em uma das aulas de MAMI. Isso poupa bastante tempo de implementação, e sem contar que deixa o código melhor também.

DESCRIÇÃO

• Link do projeto no Google Drive: https://goo.gl/S2zMPY

Read More

Atividade 15 - MAMI

A proposta da atividade atual é explicar e implementar uma das transições apresentadas no vídeo: Video Toaster 4000 Demo. Link na descrição.

Eu escolhi a transição que acontece por volta do minuto 2:53 do vídeo, no qual os pixels da segunda imagem vão aparecer da esquerda para a direita da tela, desaparecendo assim a primeira imagem. 

Para fazer essa transição eu primeiro carrego duas imagens usando o loadImage. Depois eu crio e chamo a função transicao( ) no draw( ) que verifica se a variável direita é menor ou igual a 320 (largura da imagem). Se for, então entra em dois laços for() que percorrerão todos os pixels da imagem. Dentro deles verifico se a posição x do pixel está dentro do intervalo. Se estiver, o pixel da imagem 1 é adicionado na imagem destino, e caso não, o pixel da imagem dois é adicionado.

Depois da verificar, a imagem destino é mostrada e acrescenta-se 1 na variável direita, para fazer o efeito da transição.

O resultado pose ser visto abaixo:

DESCRIÇÃO

• Link do projeto no Google Drive: https://goo.gl/wqange

• Link do vídeo Toaster 4000 Demo: https://goo.gl/P9mMfm

Read More

Atividade 14 - MAMI

A proposta da atividade atual é criar uma aplicação que, empregando variáveis para controle de valores, realiza o processo similar ao da imagem abaixo:

Resolvi aplicar os efeitos nessa imagem:

Em seguida eu fiz uma função chamada imageRender dentro do, que chama outras 4 funções dentro de si, que são:

noiseFilter( ): para criar o filtro de ruído eu fiz um laço for que vai de 0 até a quantidade de ruído que se deseja aplicar na imagem. Dentro dele eu adiciono cores aleatórias em pixels aleatórios da imagem original.

grayScale( ): para fazer a escala de cinza, criei dois laços for que percorrem todos os pixels da imagem com ruído, e em cada pixel pego o valor correspondente ao brilho dela (brightness) e coloco na variável b. Vale lembrar que estou usando o modo de cor HSB, o que torna esse processo mais simples. Daí usando essa variável eu consigo alterar a imagem para tons de cinza.

redScale( ): essa função é bem parecida com a função grayScale, só que ao invés de eu pegar só o brilho eu pego também a saturação (saturation), e coloco a matiz (hue) sendo igual a 360, que no círculo cromático correspondente a  cor vermelha.

yellowsScale(): o mesmo processo da função redScale é feita aqui, só que a matiz será igual a 60.

Para terminar, e eu chamo a função imageRender no setup. O resultado pode ser visto na imagem abaixo:

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More

Atividade 13 - MAMI

A atividade era criar um jogo seguindo as seguintes características:

Para essa atividade eu usei os seguintes sprites, ambos do jogo Castlevania - Symphony of the Night:

Criei duas variáveis, x e y, que são a posição do canto superior esquerdo do retângulo que representa o personagem. Carreguei os sprites usando o loadImage() no setup.

Criei uma função chamada jump(), que verifica se o personagem está pulando ou não através da variável jumping. Para que isso aconteça, usei a "função MRU” de um exercício anterior. Criei uma variável tempo, que multiplicando com -0.5 faz o pulo desacelerar.

Criei uma função chamada enemy(). Dentro dela há uma elipse (que representa o inimigo em sí) e duas variáveis, inimigoX e inimigoY, que corresponde a posição central da elipse. A cada frame decremento -4 ao inimigoX, fazendo com que ele se desloque para a esquerda. Quando essa variável for menor que 0, o inimigo volta para a posição inicial.

A função colision() faz o bounding box entre o personagem e o inimigo, e quando o personagem colide diminui a variável chamada chances.

Criei também a função walk(). Quando o estado da variável movendo for igual a "DIREITA”, a variável x será incrementada, e quando for igual a "ESQUERDA", x será decrementado.

Na função keyPressed, quando é clicada a seta esquerda ou a direita, altera-se a direção do personagem. Já na função keyReleased ela faz com que o personagem volte ao estado parado quando as teclas não estão sendo pressionadas.

A função gameover() serve para testar se o jogador perdeu por falta de chances, ou se ele ganhou atravessando a fase toda. Isso tudo é feito com a ajuda das variáveis gameover e ganhou, que se tornam true ou false dependendo do que acontecer.

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Read More