MAMI, Exercício 18 - Cronometro com Cosseno, coordenadas polares e apolares e função millis()

     

 No exercício de hoje nos foi passada a tarefa de usar a função millis() do Processing, e criar uma aplicação que simule um cronômetro simples, apenas com o ponteiro dos segundos.
     Pra começar utilizei uma imagem da internet para simbolizar a marcação do meu cronômetro. Feito isso, podemos notar que o cronômetro é um circulo de 360°, logo, para deslocar-se por completo em 60 segundos podemos fazer 360/60, que da 6°por segundo. Utilizei a função radians() que converte o valor colocado no parâmetro em graus pra radianos com o ângulo dentro como parâmetro, sendo assim "radians(6)", feito isso, basta multiplicarmos por millis()/1000 que da 1 segundo; e utilizarmos as funções de coordenadas polares e apolares em que x = raio x cosseno(angulo) e y = raio*seno (ângulo), sendo assim o angulo receberá a multiplicação de millis()/1000*6radianos; essa variação fará a rotação no tempo do ponteiro de forma bastante precisa. 
     Por fim é importante tudo estar no loop do Draw() para funcionar corretamente ! 


Confiaram o resultado abaixo.

DOWNLOAD DO CÓDIGO AQUI !

MAMI, Exercício 17 - Barco com Seno e Rotate

        Nesse exercício nos foi pedido para criar o movimento de um barco no mar usando a função rotate().  Sabendo disso, o primeiro passo foi escolher as imagens do mar e do barco que mais me agradaram (lembrando que a onda também poderia ser feita por senoides comuns, não necessariamente sendo uma imagem), após a escolha é só redimensionar para a proporção que mais agradar.
       No meu exemplo fiz minha imagem = y ser a amplitude/2 x (y+1) e o domínio = x ser 0.018, que vai incrementando. Como além do uso do Rotate() fiz o uso do Translate(), a variação de x e y da imagem do barquinho para representar seu movimento não ficaram mais na função image() e sim na função Translate() pois é ela que determina o campo de movimentação da imagem.
      No  Rotate() coloquei o seno do ângulo 0.02 que vai incrementando multiplicado por 0.5, escolhi esse valor pois foi a inclinação graus/radianos que mais me agradou para o barco. Vale ressaltar que usei a função imageMode(CENTER) para que o eixo da imagem iniciasse em seu centro e não em sua borda superior esquerda.
    Por fim, é só ver o resultado com a rotação do barco feita em seno do ângulo e a movimentação sendo feita pelo seno de x.
    É bom deixar claro que a amplitude da onda pode ser modificada ao multiplicar valores de x direto no translate(), pois ele no caso para o processo de movimentação dentro do draw().

DOWNLOAD DO CODIGO AQUI ! 

MAMI, Exercício 16 - Rotação de Polígonos Regulares

     O exercício de hoje fiz a tarefa de "criar uma aplicação que desenha um polígono regular centralizado na tela com a quantidade de lados informada no próprio código".

     Sabendo disso nos foi pedido para empregar a função rotate(), que no caso rotaciona o elemento que estiver ativo no código, porem cuidado; ao rotacionar é importante ter o auxilio também da função translate(), que limita a translação e será responsável por delimitar o eixo central de rotação de seu polígono, fazendo que os valores de x e y passados pelos funções que criam formas geométricas não tenham mais uma aplicação trivial, sendo assim x e y será passado no limite de translação e o x e o y do polígono será o eixo de rotação. Para ficar mais claro um quadrado de 100pixels de lado terá que ter sua metade de x e de y do lado negativa, para que haja o encontro do ponto de eixo no centro da imagem , sendo assim x e y teriam que ser ambos -50 pixels. É um pouco confuso, mas a pratica dá mais noção. O exemplo abaixo utilizei como referencia uma função que forma polígonos regulares, peguei essa função de base nos exemplos do processing.

VEJAM O RESULTADO !

DOWNLOAD DO CÓDIGO AQUI  !

 

MAMI, Exercício 15 - Transição de imagem

       
        Neste exercício precisávamos pegar um exemplo de transição aplicado em Vídeo Toasters (como mostra nesse vídeo : https://www.youtube.com/watch?v=6n7GoNmgHGI) e implementar transições apresentadas pela mesma.

         Para as minhas transições e fiz assim...

Coloquei uma imagem ao fundo, e outras sobrepostas (porém dividida em duas partes iguais, como sub imagens). Começam na posição ideal para formarem uma imagem só e com o auxílio de uma variável que será incrementada e decrementada de acordo com a necessidade de cada lado, para irem se afastando e dando a sensação de abertura, assim revelando a outra imagem que está ao fundo, feito isso acima dessas duas coloquei uma outra imagem completa que ira transitar apenas alterando seu valor de x.

Por fim, podemos dizer que a primeira transição ,é lateral esquerda, pois a primeira imagem sai pela esquerda dando espaço para outra imagem completa, essa segunda imagem na verdade são duas cortadas ao meio em sua altura, após cada parte da imagem se separar por completo onde um lado irá aumentar um valor de y e descer e o outro diminuir o valor de y e subir, elas dão espaço para outra imagem completa essa terceira imagem utiliza-se da mesma lógica da segunda, pois são duas partes da mesma imagem cortadas, dando a impressão que é uma imagem só, porem essa terceira foi cortada ao meio em sua largura e a transição se dá por um lado que diminui o valor de x que faz uma parte sair pela esquerda  e o outro lado aumentando o valor de x que faz a outra parte sair pela direita, dando destaque a quarta e ultima imagem.

Confiram o resultado:

Download do Código Aqui !

MAMI, Exercício 14 - Cores e Manipulação na imagem

     No exercício de hoje, criei uma aplicação em que o usuário escolhe com que tom/cor quer deixar a foto, se ela será Original, com Ruido, com tons de Cinza, adição de vermelhos ou adição de amarelos.

     Essa pratica consiste em fazer o scanline dos pixels da foto, guardar sua cor e altera-la usando padrões RGB ou HSB.

     Fiz usando RGB, aplicando na escala cinza, a média ponderada de 30% vermelho, 59% verde e 11% azul para cada combinação do tom de cor transformando para cinza pois esse é o balanço mais adequado de transformação em cinza para o olho humano. 

Para o ruido, usei a transformação gradativa, em que a foto sofre ruido dependendo da foto anterior. 

Para o tom avermelhado, apenas utilizei 1 parâmetro do RGB, no caso o R, aplicando apenas o red recebido da imagem e anulando o G e B. 

Para o tom amarelado, utilizei 2 parâmetros RGB, no caso R e o G aplicando para essa imagem 3 x red e 1 x green, anulando apenas o B.

Confiram o resultado:

Download do código AQUI!