Blog destinado ao curso Sistemas e Mídias Digitais - SMD

segunda-feira, 23 de outubro de 2017

Trabalho Final MAMI - Pt 1

O trabalho final da disciplina de Matemática Aplicada à Multimídia I (MAMI) é um gerador automático de arte. Esse gerador deve levar em conta 3 ou mais obras de uma serie de um artista, e criar um programa capaz de reproduzir variações originais de tais obras.

Modelo Natural
Foto tirada na casa da artista



Artista escolhida:


Karina Paula é uma designer gráfica cearence, nascida em 1995. Um de seus trabalhos como designer foi criar uma série de quadros focados em formas geométricas, com influência no movimento da vanguarda moderna holandesa conhecido como De Stijl (ou Neoplasticismo).

Analisando a série, da obra C-03 até C-05, podemos perceber algumas características:

Obras originais
Características analisadas:
  • 2 linhas diagonais, ou 2 linhas, sendo uma na vertical e a outra na horizontal;
  • 1 circulo central, seguido de um anel ao redor do circulo;
  • 2 à 4 blocos, compostos por quadrados divididos em “triângulos” de cores diferentes;
  • 4 arcos de círculos, compostos por cor chapada ou compostos por um arco de círculo e um arco de “anel” ao redor, dispostos nos quatro cantos do quadro, que possui forma quadrática;
  • 3 cores principais (vermelho, azul e amarelo), e duas de base (preto e branco); 
Formas:
  • Os quadros analisados possuem as dimensões de um quadrado;
  • Dentro do quadrado, existem elementos como: círculos, anéis, quadrados, triângulos e arcos.
  • No centro de cada quadro, há um círculo seguido de um anel ao seu redor.
  • Ainda na parte central, há a presença de blocos. Esses blocos podem variar de 2 à 4 blocos. Cada bloco pode ser formado por um quadrado, ou por dois triângulos de cores distintas;
  • Cada quadro possui nos seus 4 cantos arcos de círculos, que podem vir seguidos de arcos de anéis;
Cores:
  • As cores são compostas sempre por uma cor mais forte e viva, e outra que é a cor preta, geralmente usada para gerar contraste. Além do branco que está presente em todas as obras escolhidas como cor de fundo.
  • Abaixo a paleta de cores das obras escolhida



Modelo Matemático
  • A largura e a altura da tela é de 600x600px. A partir daí é feito um módulo, que eu chamei de A = altura da tela/6. 
Figura 01

Figura 02
  • Como é mostrado nas figuras acima, os círculos centrais são posicionados no centro da tela. Primeiro um círculo menor, que tem a altura de um módulo A. Depois um outro por de trás dele, que tem a altura de A + 35% do módulo. Em seguida outro círculo, com altura A + 70% do módulo, e por último um círculo com altura de 2 * A.
  • Em seguida vem as linhas, que tem a espessura de A/4.
  • Depois os blocos são feitos com largura e altura de 2 * A.
  • Já o primeiro arco dos conjuntos dos arcos, é feito com tamanho de A - 30% de um módulo. O segundo arco que vem por baixo do primeiro é construído com tamanho de A - 15% do módulo. E o último com o tamanho de A.
Modelo Computacional:

Primeiramente, eu comecei criando as variáveis que possibilitarão que aconteça a geração automática de artes. Criei as variáveis: 

  • int linhas: define o tipo de orientação das linhas. Se será horizontal e vertical ou diagonais.
  • int corSelect: define a cor principal da obra, entre vermelho, azul e amarelo.
  • int quantBlocos: define a quantidade de blocos da obra entre 2 à 4.
  • int tipoBloco: define se o bloco será formado por um quadrado ou dois triângulos.
  • int tipoArco: define a quantidade de arcos entre com ou sem anéis.
  • int numArcos: define a quantidade de arcos coloridos ou com uma cor só (que eu também chamo de arco chapado).
Depois eu comecei a construir a estrutura do quadro conforme as Figuras 01 e 02 mostraram anteriormente. Então eu criei uma função chamada middleCircles( ), que desenhas os círculos da parte central do quadro, usando dentro um fill( ) para cada um dos 4 círculos que formam essa parte, pois como pudemos notar, são 4 círculos, sendo o interno colorido ou preto, o segundo que fica envolto do primeiro é sempre branco, o próximo pode ser colorido ou preto, e o ultimo também será sempre branco. No fill( ) de cada um é passado os 3 arrays de cores chamados red, green e blue, no qual dentro deles tem um outro array chamado colorTones. O propósito do colorTones é fazer com que as cores sejam geradas de acordo com a função cretePallete( ), que vou explicar mais para frente.

Fiz também a função drawLine( ), que de acordo com a orientação que é passada através da variável global linhas, dá a orientação horizontal/vertical ou diagonal. Tudo isso é feito dentro de um switch( ), e caso for 0 (horizontal/vertical), as linhas são desenhadas com a função rect( ). Caso seja 1 (diagonal), são desenhadas com a função quad( ).

E, seguida eu construi os blocos. Primeiro eu fiz as funções firstSquare( ), secondSquare( ), thirdSquare( ) e fourthSquare( ), que criam os quadrados a partir de dois triângulos, como também foi explicado visualmente nas Figuras 01 e 02. Depois eu crio um função chamada drawBlocks( ), que chama as funções anteriormente citadas de acordo com a quantidade de blocos que for sorteada na variável quantBlocos. Variando assim de 2 à 4 blocos que serão gerados. Contudo, a drawBlocks só é chamada dentro da função createBlocks( ), que recebe dois valores inteiros. Um é a orientação da linha, e o outro é a quantidade de blocos. Se a orientação for referente a horizontal/vertical, e a quantidade de blocos for referente a dois, então a orientação passa a ser na diagonal e então é chamada as funções drawBlocks( ) e drawLines( ). Agora se não for, então elas são chamadas normalmente.

Para construir os arcos, também fiz quatro funções separadas: firstArc( ), secondArc( ), thirdArc( ) e fourthArc( ). Elas criam 3 arcos com a função arc( ), e fill( ), que também segue o mesmo princípio dos círculos. Só que ele são desenhados através da função drawArc( ), que recebe um parâmetro, que nesse caso é a variável global numArcos, e desenha de acordo com os casos: se for 0, desenha quatro arcos coloridos (intenda por coloridos um arco menor formado por uma cor colorida, o do meio branco e o externo também colorido), se for 1 desenha dois arcos coloridos e dois chapados(todos os arcos são da mesma cor), e se for 2 apenas um arcos é colorido e os outros 3 são chapados.

Já a função createPallete( ), é gerada de acordo com a cor principal selecionada, que é armazenada na variável global corSelect. A partir daí, caso seja 1, a cor principal será vermelha, caso seja 2 será azul e caso seja 3 será amarela. Contudo, em cada caso, são armazenadas nas posições 0 dos arrays red, green e blue, os valores referentes as cores vermelha, azul ou amarela, e nas posições 1 e 2 as cores branca e preta respectivamente. Gerando assim uma paleta.

Agora, na função randomizeTones( ), é onde será atribuído as cores da paleta aos arrays colorTones e arcTones, que será de acordo com o padrão de cores que tem nas obras originais. Sendo elas: 

  • se o circulo central interno for colorido,  o central externo é preto, e vice-versa;
  • se um triângulo do bloco for preto, o outro será colorido e vice-versa;
  • se os arco interno for colorido, o externo é preto e vice-versa;
  • os arcos podem ser todos de uma cor, sendo todos coloridos ou tpretos;

Por ultimo eu chamo as funções no setup, e cada vez que abrir o programa, é gerado uma obra diferente.

Resultados do programa:







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




Share:

0 comentários:

Postar um comentário

Trabalho Final MAMI - Pt 2

Nessa segunda e última parte do Trabalho Final da cadeira de MAMI, eu apenas coloquei uma interface gráfica com a ajuda da biblioteca Cont...