Mostrando postagens com marcador MAMI. Mostrar todas as postagens
Mostrando postagens com marcador MAMI. Mostrar todas as postagens

terça-feira, 12 de dezembro de 2017

MAMI, Trabalho (Gerador de Arte): Parte 2




1. Inclua uma GUI na aplicação, incluindo pelo menos três tipos diferentes de componentes interativos, para controlar as respectivas variáveis.


2. Reforce os modelos natural, matemático e computacional envolvidos na realização da Parte I do Trabalho.


3. Elabore um vídeo que exponha, através de esquemas/diagramas animados, todo o processo de desenvolvimento, relacionando-o aos três modelos estabelecidos e demonstrando o uso da aplicação e diferentes resultados comparados aos originais da série selecionada.










Segunda parte do trabalho do gerador automático de arte de disciplina de Matemática Aplicada a Multimídia 2017.2 do curso de Sistemas e Mídias Digitais da Universidade Federal do Ceará.

Aluno: Wendel Tavares
Artista: Hermelindo Fiaminghi
Linguagem de Programação & IDE: Processing











MAMI, Exercício de Revisão Pré-Prova 2 - Velocimetro


Criar uma aplicação com que apresenta um velocímetro e quando o botão do mouse for pressionado a velocidade aumentar gradualmente e quando não a mesma diminuir, estando o deslocamento do ponteiro, limitado a escala do velocímetro. O ponteiro a medida que se move , varia do branco inicial para o vermelho intenso final. E fazer um gráfico em tempo real, composto por linhas que indicam a evolução da velocidade instantânea e da velocidade média.














domingo, 3 de dezembro de 2017

MAMI, Exercício 19 - Funções Inversas, tan(), atan(), atan2()

     Na atividade de hoje, nos foi passado a tarefa de criar um olho (círculo preto pequeno no interior de círculo branco grande) que se encontra sempre voltado para o cursor do mouse.
     Como o assunto para essa atividade eram funções inversas fiz o "olho" utilizando a inversa da tangente com a função atan2() do processing, embora haja outras formas de fazer.
     Criei uma variável "ângulo" para receber o atan2() do cursor do mouse menos as dimensões da tela, e usando a função rotate(), fiz sua rotação ser a do ângulo, e a translate() serviu para determinar o local de rotação da elipse preta.
     Para tudo isso não ficar uma bagunça, utilizei as funções pushMatrix() e popMatrix() que delimitam a zona de ação do translate() e rotate(), ou seja, só o código entre elas será influenciado pelas funções translate() e rotate() , fazendo com que o que eu queira rotacionar e transladar seja apenas a elipse preta e não as outras imagens.

     Por fim, escolhi uma imagem para ilustrar meu exercício, que no caso foi o Rock Lee, que é o melhor ninja do anime Naruto. Escolhi ele pois acho ele um rapaz guerreiro, trabalhador e contra todas as dificuldades e expectativas; ele conseguiu se tornar um ninja ser saber Ninjustu, ou seja, com ele não tem frescura de poderzinho e selos, com ele é só na porrada mesmo, no mano a mano de fato, trocação franca. Um cara de acorda cedo pra malhar, treinar e superar suas dificuldades. Por mim, o nome do anime "Naruto" poderia ser "Rock Lee", porque o cara é um mito !    


Confira o Resultado abaixo: 






DOWNLOAD DO CÓDIGO AQUI ! (Para liberar o poder dos portões )





terça-feira, 28 de novembro de 2017

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.


















segunda-feira, 27 de novembro de 2017

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().














sexta-feira, 17 de novembro de 2017

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 !

















 


segunda-feira, 13 de novembro de 2017

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:



















domingo, 12 de novembro de 2017

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:







segunda-feira, 23 de outubro de 2017

MAMI, Trabalho (Gerador de Arte): Parte 1



Nessa primeira parte do trabalho, apresentarei um artista e uma série das obras dele que escolhi para reproduzir. O artista que escolhi foi o Hermelindo Fiaminghi e sua série foi a Art Concrete: ArtGeometric e escolhi me basear pelos modelos Seccionado nº1, Seccionado nº1 - Simplificado e Seccionado nº2.


Segue aqui, fotos de uma exposição onde haviam obras de Fiaminghi sendo expostas, tiradas na galeria de artes e na reitoria da Unifor.














    
MODELO NATURAL



      Hermelindo Fiaminghi, nascido em São Paulo, 22 de outubro de 1920, foi um pintor, desenhista, artista gráfico, litógrafo e publicitário brasileiro.  
        Entre 1936 e 1941, frequenta o Liceu de Artes e Ofícios de São Paulo, onde estuda com Lothar Charoux (1912-1987)e Waldemar da Costa (1904-1982). Dedica-se à litografia, trabalhando nas principais indústrias gráficas de São Paulo. Em 1946, monta sua primeira empresa, o Graphstudio, atuando em produção gráfica. No começo da década de 1950, inicia trabalhos abstratos, em que revela a influência da arte construtiva. Colabora ainda com os poetas concretos na programação gráfica de seus poemas. Entre 1959 e 1966, freqüenta o ateliê de Alfredo Volpi (1896-1988). Integra o Grupo Ruptura, liderado por Waldemar Cordeiro (1925-1973). Participa da criação do ateliê coletivo do Brás, onde desenvolve a série Virtuais, trabalhando ainda com esmalte sobre eucatex. No começo da década de 1960, o artista inicia trabalhos com têmpera e faz experiências com a cor. Passa a utilizar o termo Corluz para designar seus trabalhos, desenvolvendo pesquisas com retículas em offset. É co-fundador da Associação de Artes Visuais e da Galeria Novas Tendências, em São Paulo, criadas em 1963. Em 1969, funda o Ateliê Livre de Artes Plásticas, em São José dos Campos, São Paulo, no qual atua como diretor e professor.

          Hermelindo Fiaminghi frequenta o Liceu de Artes e Ofícios de São Paulo, entre 1936 e 1941, onde estuda pintura com Waldemar da Costa. Cursa também artes gráficas, que exercerá ao longo de toda a sua carreira. Dedica-se à litografia, trabalhando nas principais indústrias gráficas de São Paulo. A partir de 1946, atua em publicidade. Fiaminghi adere ao movimento concreto em 1955. Contribui na produção gráfica dos poemas-cartazes dos escritores concretos paulistas, como Haroldo de Campos (1929-2003) e Décio Pignatari (1927-2012). Em 1959, Fiaminghi rompe com Waldemar Cordeiro e o grupo de artistas concretistas de São Paulo.

        No início da carreira, dedica-se à abstração geométrica. Suas obras destacam-se pelo ritmo visual das composições, como em Long Play (1955), no qual trabalha com a sugestão de deslocamento de figuras geometrizadas. Utiliza freqüentemente uma gama reduzida de cores. A partir de 1958, produz a série Virtuais, em esmalte sobre madeira aglomerada. Utiliza poucas figuras, definidas por planos de cor, que apresentam certa ambiguidade, por se constituírem à superfície plana do quadro e, ao mesmo tempo, se inserirem no espaço cúbico, construído por planos ortogonais, como ocorre em Virtual XIV (1958).

        Entre 1959 e 1966, frequenta o ateliê de Alfredo Volpi, com quem aprende pintura a têmpera. Troca a madeira por telas de linho. Em suas pinturas, passa a utilizar cada vez mais a transparência das cores. Com a série de trabalhos denominada Cor-Luz, inicia pesquisas em torno da fusão e difusão da cor pela incidência da luz. Pinta telas inspiradas nas superfícies quadriculadas que compõem a retícula gráfica. Realiza também experimentos com slides, que são posteriormente impressos em off-set, buscando precisão ótica.

 Hermelindo em 1962, venceu o Prêmio Jabuti, o mais importante premio literário do Brasil. !

fonte: http://enciclopedia.itaucultural.org.br/pessoa8784/hermelindo-fiaminghi e https://pt.wikipedia.org/wiki/Hermelindo_Fiaminghi


Com base nisso, podemos ver que Hermelindo tem grande gosto e experiência por figuras e composições geométricas na qual valoriza sua simetria, tem uma gama reduzida de cores e explora o deslocamento de figuras geometrizadas.



Segue os quadros escolhidos da série do artista.




Seccionado nº1




Seccionado nº2







Seccionado nº1 - Simplificado








MODELO MATEMÁTICO

Para o modelo matemático utilizei o como padrão separação de pixel a pixel proporcionais majoritariamente para o quadro de modelo Seccionado nº2, na qual o inicio da composição de centro se dá dividindo a altura do quadro por 3, e sua largura por 2. Onde o inicio do primeiro retângulo de centro se dá no inicio da segunda divisão da altura e largura vai até a metade da largura do quadro.





O ponto onde fica o centro do círculo do lado esquerdo se localiza no final do retângulo do lado direito, da qual esse retângulo ao invés de usar a altura dividida por 3 , será altura divida por 30, para haver a melhor proporção possível.






Todos os arcos e elipses terão os mesmo centro para seus respectivos lados, assim não havendo distorções e gerando a simetria que Hermelindo prezava.


     Para fazer o cálculo do seccionado nº1 e seccionado nº1- simplificado , utilizei o conceito matemático de proporção dos Polígonos Regulares Inscritos e Circunscritos

Onde:

 Quadrado inscrito

As medidas do lado e do apótema do quadrado podem ser escritas em função da medida do raio da circunferência circunscrita a ele.

Medida do lado
O ΔOAB é retângulo isósceles.



Após feito o calculo acima, importante sempre lembrar que no quadro de Fiaminghi não era apenas 1 quadrado, e sim 2 retângulos que juntos formam um quadrado, logo o L final tem que ser dividido por 2.


Quadrado circunscrito

As medidas do lado e do apótema do quadrado podem ser escritas em função da medida do raio da circunferência inscrita a ele.

Medida da apótema
O ΔOAB é retângulo.





fontes: http://objetoseducacionais2.mec.gov.br/bitstream/handle/mec/21665/saibamais.html

Nesse quadro ele por completo, tem inscrição e circunscrição de polígonos, que se relacionam do exterior e inferior 





MODELO COMPUTACIONAL

No modelo computacional foi apenas aplicação de forma exata do modelo matemático.

As variáveis utilizadas foram
deslocamentoVertical;
quantidadeDeArcos;
 tiraArcoInterno  ;
 posicaoArco  ;
escolheEstilo;
escolhePaleta;

Sendo as 4 principais  :
deslocamentoVertical;
quantidadeDeArcos;
 tiraArcoInterno  ;
escolheEstilo;

Para fazer o gerador de arte, fiz opções para gerar utilizando "if" com as variações que podem ser feitas na composição da obra sem sair de algo que lembre o quadro original.

Para não distorcer os quadros, de forma que o quadro retangular fique quadrado e esticado e o quadro quadrado ao ficar retangular fique distorcido, utilizei a função "min" e "max" para atribuir valores ao tamanho do quadro e pegar sempre o mínimo para o quadrado e sempre o máximo para altura do quadro retangular.

Os "sizes" receberam os tamanho mínimos e máximos da tela (width, height) e nos sizes foram aplicados o modelo matemático. Da qual usei como parâmetro a noção de uma tela de 360 de largura por 480 de altura. E todos os módulos usados no programa foram feitos através de polígonos inscritos e circunscritos.

      fill(c5);
      rect(0, 0, size/2, size  );
      fill(c2);
      rect(size/2, 0, size/2, size  );
      fill(c3);
      ellipse(size/2, size/2, size, size );
      fill(c4);
      arc(size/2, size/2, size, size, PI/2, 3*PI/2);
   
Uso do calculo circunscrito onde a altura é igual ao raio do circulo vezes a raiz quadrada de 2;
X será o ponto onde estará o raio menos a largura que é metade do raio do circulo vezes a raiz quadrada de 2;
      rect(size/2-size/4*sqrt(2), size/2- size/4*sqrt(2), size/4*sqrt(2), size/2*sqrt(2));
      fill(c2);
      rect(size/2, size/2- size/4*sqrt(2), size/4*sqrt(2), size/2*sqrt(2));
      fill(c3);
      ellipse(size/2, size/2, size/2*sqrt(2), size/2*sqrt(2) );
      fill(c4);
      arc(size/2, size/2, size/2*sqrt(2), size/2*sqrt(2), PI/2, 3*PI/2);



Feito e dito tudo isso, o resultado final foi esse:

























domingo, 22 de outubro de 2017

MAMI, Exercício de Revisão Pré-Prova


      Neste exercício coloquei rapidamente e sem muita optimização o que foi exigido como revisão para algo parecido com a prova da cadeira:

- Um cenário da internet para abranger o background.
A imagem escolhida foi a do cenário de Uncharted  (Game de Playstation3/Playstation4).

- Personagem pego da internet, posto do lado esquerdo da tela, que se desloca para direita através da respectiva seta do teclado.
O personagem escolhido foi o Kratos , em sua versão 2d, feita para os celulares antigos com predominância em Java, do Game God of War Betrayal.

- Bola do tamanho do personagem que entra pela direita e sai pela esquerda da tela
O círculo usa velocidade Retilínea Uniforme.

- Quando a barra de espaço for pressionada personagem saltar sobre a bola e voltar para o chão.
Utilizei Movimento Retilíneo Uniformemente Variado Retardado para o salto do personagem, pois o mesmo ao sair do solo recebe aceleração negativa e quando a velocidade chegar a 0 ele volta a ganhar velocidade até atingir o solo.

-Se o centro do personagem for atingido, ele perder vida/chance.
Aqui basta ter uma noção do tamanho de pixel do seu personagem e limitar a boundingBox dele para o centro, trazendo o hitbox de fora para dentro.

-Se o personagem chegar ao outro lado, confirmar Vitória ! 
Simples, basta o personagem sair dos limites da tela, seja por width ou ultrapassando o tamanho indicado no size, mais um parte dos pixels do corpo de seu personagem.

-Se o personagem perder as 3 chances, indicar Derrota !
Se perder as 3 vidas e o contador chegar a 0 é game over.


Exemplo abaixo:


Perdendo







Ganhando
















quarta-feira, 11 de outubro de 2017

MAMI, Exercício 12 - Tileset Isométrico

   
Para se fazer um mapa, basta lembramos de matrizes e aplicarmos. Após isso, para cada posição na matriz, carregamos uma imagem a escolha. Com ajustes em editores de imagem e calculando a distancia entre cada imagem, para fazer o distanciamento em pixels dela, ficar satisfatoriamente visível na tela, feito isso está pronto.
      Para o mapa se tornar isométrico precisamos de tiles que seja compatíveis com a posição isométrica e precisamos alterar os parâmetros da imagem para a perspectiva mudar; fazemos isso mudando a posição da linha e da coluna, a posição da linha será substituída por menos a linha atual mais a coluna e a  posição da coluna será substituída pela soma da coluna com linha.


                                                                      Resultado:




terça-feira, 10 de outubro de 2017

MAMI, Exercicio 11 - Maquina de Estados - KeyPressed()

     No exercício de hoje foi implementada a máquina de estados finitos. Em sala nos foi ensinado o uso da ferramenta keyPressed que é uma variável booleana e para usa-la precisamos declara-la como falsa no inicio e verdadeira ao apertar a tecla que você deseja, usando dentro do mesmo "if" a ferramenta Key ou KeyCode.
    Em casa foi nos passado a tarefa de implementar a mesma máquina de estados porem fazendo o uso da função keyPressed(), o que torna tudo menos trabalhoso pois dentro da mesma função basta apenas atribuir as teclas que deseja mapear e pronto, sem a necessidade de toda vez dentro de um "if" alterar o valor do keyPressed, de modo que apenas que usamos para mostrar que teclas iremos digitar com o key ou keyCode. A única desvantagem é somente a dificuldade de implementar contadores de tempo na função e estruturar ela de algumas formas, pois por ser dentro de uma função ja definida você não tem muita liberdade de estruturação, o que pode ser desvantajoso para quem não é familiarizado com a ferramenta. Porém para quem já tem o costume e conhece a função, ela deixa tudo muito mais rápido e menos trabalhoso de codificar, pois simplifica e diminui linhas de código.











terça-feira, 3 de outubro de 2017

MAMI, Exercício 10 - Botão com cantos arredondados

          
         Nesta atividade explicarei como se pode detectar cliques do mouse sobre um botão retangular com cantos arredondados.
         Para a composição do botão foi utilizado uma função rect() para gerar um retângulo e em suas extremidades foram postas elipses.

         Na área do retângulo ( ou dos retângulos caso queira por mais de um para compor seu botão)  é só checar se a posição do mouse (mouseX e mouseY) não ultrapassa os limites do tamanho do seu retângulo e se ultrapassar, chegar se foi pressionado com o mousePressed.

       Nas bordas circulares, o caso é diferente, temos que tratar as bordas como áreas de uma elipse, então, sabendo disso, identificamos o valor do mouse e do clique até os centros das elipses e buscamos saber se elas são iguais ou menores que o raio; sendo maior, logo o mouse e o clique estarão fora das elipses e se forem menores ou iguais estarão dentro das elipses. Porém para isso precisamos calcular a distância, então usamos o Teorema de Pitágoras ou o cálculo da área de um círculo. Como usei Pitágoras, apenas chequei para ambos os lados circulares a distancia fazendo o uso da hipotenusa e usando-a. Onde a hipotenusa= sqrt(catetoOP*catetoOP+catetoADJ*catetoADJ), e cada cateto era comparado ao Eixo de cada bora elíptica (assim : catetoOP=mouseX-ellipseX;
 catetoADJ=mouseY-ellipseY;) fazendo isso para ambos os lados que compõem seu botão circular.


Resultado:













sábado, 30 de setembro de 2017

MAMI, Exercício 9 - Breakout

      Nesse exercício, foi feito um pequeno modelo do famoso game "Breakout" da época do Atari.

      Esse game consiste em basicamente acertar os retângulos na tela usando uma bola e evitar que ela caia para baixo do bastão que fica na parte inferior da tela.

      Para isso acontecer, uma colisão tem que ocorrer, e utilizar o a técnica "bounding Box" é interessante, pois haverá uma caixa delimitadora que fará uma ação ao ser encostada, algo que funcionou bem de fato, pois a maioria dos objetos na tela são retangulares e empregar o boundingBox foi super viável. No caso do meu exemplo; quando a bola atingisse a delimitação da minha caixa, o meu retângulo recebe valores nulos, logo, é apagado do game e soma pontos ao jogador.Vence quem destruir todos os retângulos e perde quem deixar a bola cair pra baixo do bastão ao pé da tela.

Exemplo1- Perdendo: 







































Exemplo2- Ganhando: 





































quinta-feira, 28 de setembro de 2017

MAMI, Exercício 8 - Interpolação

       Neste exercício, criei um movimento interpolado de um quadrado de lado 10 pixels através da função moverCaixa(), que recebem como parâmetro o X e Y iniciais, e X e Y finais e o número de passos.
       Sabendo disso declarei uma variável para a Distancia X e para a Distancia Y , onde o calculo é feito basicamente por Pixel final menos o inicial. O numero de passos será a repetição da imagem a cada frame, no caso de 60 fps em 1 segundo temos 60 frames, então 60 passos é igual a 1 segundo, 120 é 2 segundos e por ai vai.

O resultado foi o seguinte:



Interpolação 1D com posição Y fixa.

 Interpolação 2D


domingo, 24 de setembro de 2017

MAMI, Exercício 7 - Marca

         Nem todas as pessoas sabem, mas, cada marca e seu logotipo tem um Design, e esse Design vai além de beleza estética, ele também é uma ferramenta visual que vai definir grande parte dos padrões do produto final, e para isso, grande estudo é realizado e muitos cálculos são feitos para que o logotipo de uma empresa, seja adptiva e responsiva.

        Darei um breve exemplo da empresa Apple:

Co-fundada por Steve Jobs, a Apple criou o iPod, iTunes, iPhone, iPad e outros produtos.


A matemática por trás do logo da Apple

A Matemática por trás do logotipo:
Algumas circunferências de raios variados e um pouco de proporção áurea ou número de ouro, o logotipo da Apple ganha perfeição. A proporção áurea é identificada pela letra grega φ (phi). Ela vale aproximadamente 1,618. Observando a imagem acima é possível notar essas propriedades.

O número de ouro ganhou um status de "quase mágico", sendo alvo de pesquisadores, artistas e escritores. O fato de ser encontrado através de desenvolvimento matemático é que o torna fascinante.


Como podemos ver a proporção e o Design do logotipo impacta no produto final como o exemplo abaixo:



iphone razão de ouro


Mais detalhes :
Referências: 
http://www.prof-edigleyalexandre.com/2013/09/a-matematica-por-tras-dos-logotipos-de-grandes-empresas.html
http://www.prof-edigleyalexandre.com/2011/07/proporcao-aurea-sequencia-de-fibonacci.html








sexta-feira, 22 de setembro de 2017

MAMI, Exercício 6 - Bandeira

Efetuei no Processing a reprodução da bandeira do Brasil, com base nos cálculos abaixo :

 DE ACORDO COM A LEI FEDERAL 5700, S. II, A. 5 - 01/09/1971

I - PARA CÁLCULO DAS DIMENSÕES, TOMAR-SE-Á POR BASE A ALTURA DESEJADA, DIVIDINDO-SE ESTA EM 14 PARTES IGUAIS. CADA UMA DAS PARTES SERÁ CONSIDERADA UMA MEDIDA OU MÓDULO

II - O LARGURA TOTAL SERÁ DE 20 MÓDULOS

III - A DISTÂNCIA DOS VÉRTICES DO LOSANGO AO QUADRO EXTERNO SERÁ DE UM MÓDULO E SETE DÉCIMOS

IV - O CÍRCULO NO MEIO DO LOSANGO TERÁ O RAIO DE TRÊS MÓDULOS E MEIO


Tendo isso em mente é só fazer a lógica ; um Módulo é igual a Largura dividida por 20 (m = L/20)e a Altura é 14 vezes o modulo (a=14*m).

O retângulo da bandeira terá as configurações x e y a critério do programador, eu optei por ser no centro então X e Y receberam respectivamente a metade da Largura e a metade da Altura.

O losango da bandeira recebeu em suas pontas  a subtração da metade da largura mais um módulo e sete décimos (x-L/2+1.7*m) em outra ponta o mesmo com a altura foi aplicado(y-a/2+1.7*m) e nas outras a soma da metade da largura mais um módulo e sete décimos ( x+l/2-1.7*m) e na altura ( y+a/2-1.7*m), pois são as distancias entras pontas e os lados do retângulo.

O circulo foi aplicado os parâmetros x e y e os diâmetros foram duas vezes o raio que era de três módulos e meio (x, y, 2*3.5*m,2*3.5*m).

Por fim para um maior auxilo o uso das funções rectMode() e ellipseMode() servem para mudar a zona de iniciação e atuação do Retângulo e da Elipse , onde o no Retângulo o Eixo é em sua extremidade superior esquerda e o da Elipse é em seu centro. Ao usar o rectMode() e mudar sua zona de eixos para o centro, simplificará muito a aplicação da lógica pois os eixos e parâmetros de X e Y poderão ser os mesmo da Elipse, já que ambas iniciarão no centro.

Exemplo:














MAMI, Exercício 5 - Lançamento



      Desenvolvi uma aplicação que simula o lançamento oblíquo. Para isso foi necessário atribuir a movimentação de um MRU(Movimento Retilíneo Uniforme) ao eixo X da Elipse e a movimentação de um MRUV(Movimento Retilíneo Uniformemente Variado) ao eixo Y, onde pede força da aceleração ao subir e volta a ganhar ao descer; fiz isso fazendo com que na subida a bola sofresse o movimento retardado onde a aceleração diminui e isso tem impacto na velocidade, fazendo com que em algum momento ela pare de subir. Sempre que a bola tocar ao chão, sua aceleração e consequentemente velocidade irão diminuir, fazendo com que o próximo movimento que da impressão de "quicar" seja menor, mais lento e mais fraco tanto para o eixo X quando para o eixo Y.
      Para ser realizada a reprodução do quicar, foram necessárias variáveis auxiliares de aceleração e de tempo, pois o tempo precisava ser reiniciado ou zerado a cada vez que a bola quicava e o auxiliar da aceleração receber a aceleração dividida após o contato com o chão .
      Utilizei a função lancamento() que recebe como parâmetro a velocidade X(horizontal), velocidade Y (vertical), aceleração, tempo, e o tempo relativo ao quicar. Um vetor auxiliar com 2 casas receberá na primeira casa a marcação do espaço X e na segunda casa a do espaço Y em pixels( sendo esse subtraindo o valor do tamanho da tela menos o raio da bola), quando chamado, essa função ira retornar os pixels X e Y na tela, como podem ver abaixo. 
     
     


segunda-feira, 11 de setembro de 2017

MAMI, Exercício 4 - MRU



Neste exercício, foi dada a tarefa de fazer 20 carros (retângulos coloridos), com velocidades aleatórias. Para isso criei um vetor/array "vRCarros" que receberia a velocidade randômica de carros e dentro do array você coloca a quantidade de carros que quer ter em seu programa e cada um receberá uma velocidade aleatória.

Foi criada a função dada em sala MRU, movimento retilíneo uniforme, onde recebe como parâmetro a velocidade e o tempo, e retorna o deslocamento.
A ao colocar o resultado dessa função no parâmetro "x" do retângulo, ele se deslocará de forma uniforme com a velocidade adquirida pelo array. 

Por fim usei as funções text para mostrar o vencedor e para os números de cada carro companhar o sua posição. 







sábado, 2 de setembro de 2017

MAMI, Exercício 3 - Blocos


Desenvolvi uma aplicação que gera quadros com a função bloco, da qual dentro dela há também o uso da função circulo que gera elipses com cores e tamanhos dentro de um limite randômico. 

As funções foram iniciadas em sala e inspirada em uma obra de Kandinsky mas o código foi aperfeiçoado em casa, mudando apenas a implementação dos valores de inicio para uma opção de mudar a quantidade de blocos com quadros de círculos através de um slider. No código, o valor apresentado no "slide bar " será a quantidade de linhas e colunas que serão apresentadas na tela, onde 1 linha e 1 coluna é 1 bloco e 5 linhas 5 colunas são 25 blocos, ou seja , uma lógica idêntica a de uma matriz .

A biblioteca "ControlP5" precisa ser baixada para usar sua importação, na qual pode ser feita manualmente ou de forma simples, baixando a biblioteca pelo próprio Processing, na opção "adicionar modo " e procurando o "ControlP5" na seção "Libraries".

Vale ressaltar que quado você coloca uma certa quantidade para visualizar e quer diminuir, é essencial a presença da função background() no draw()  para que a visualização anterior não atrapalhe as posteriores, pois como o Processing sempre sobrepõe a imagem anterior e nunca apaga, usar o background() faz que cubra os blocos que não estão sendo usados dando uma impressão de que o item foi apagado.

Para que os círculos não ficassem piscando e mudando de cor a cada frame do loop do draw, criei variáveis para checar e cancelar a mudança de cor de forma desordenada, mesmo que o padrão de cores seja randômico. 

Exemplo: