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: