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: