segunda-feira, 29 de setembro de 2014

Trabalho: Mondrian Generator



"Com base no exemplo selecionado, discuta em seu blog
 os processos de transição entre os modelos natural,
 matemático e computacional"

O exemplo que selecionei foi "Mondrian generator".



Piet Mondrian        


Em torno de 1920, retângulos azuis, vermelhos, amarelos (as cores elementares do Universo, segundo o próprio) e brancos separados por linhas pretas. Assim podemos uma parte das pinturas famosas de Mondrian, contudo, não é tão simples assim. 
Piet Mondrian almejava o total equilíbrio em suas pinturas. Cada cor tem um peso, diagonais nunca aparecem. A arte de Mondrian é o natural e o matemático intimamente ligados, especialmente no início fase Neoplasticista, da qual falaremos aqui. 


          

O modelo natural:



Quadro nº2

Técnica: Óleo sobre tela | Dimensões (em cm): 75 x 65 | Local de exposição: Coleção Max Bill, Zurique, Suíça.


Modrian geralmente usava óleo sobre tela em seus quadros. 
Piet Mondrian (1920)

Hoje podemos achar tinta à óleo e tela em lojas especializadas por toda a cidade. O processo de pintura, com as tintas atuais: 

                                                     
Tintas à óleo

Preferencialmente, prepara-se a tela lixando as imperfeições do tecido e passando uma camada de selante, para que a tinta não seja "sugada" pelo tecido. Mistura-se óleo de linhaça à tinta para diluí-la, pois a mesma é muito densa. Pode-se adicionar terebentina ou secante de cobalto para catalizar o processo de secagem, que dura em torno de 3 dias. Para um quadro estilo "Mondrian-Neoplasticista" deve-se usar apenas as cores primárias: vermelho, amarelo, azul em sua forma pura (sem misturas), além do preto (ausência de luz) e do branco (luz), que podem ser misturados.




O matemático:

Piet Mondrian foi bastante influenciado pelo movimento teosófico e pelo matemático M.H.J. Schoenmaekers, especialmente no tratado "Matemática Expressiva". O movimento alegava ter resolvido o conflito entre a espiritualidade e ciência ao aplicar o conceito de evolução a uma escala cósmica — todo o universo estaria evoluindo, não só as espécies, e nós estaríamos vivendo sucessivas encarnações rumo à perfeição.

Além de atribuir certo "peso" para as cores e linhas a fim de equilibrar assimetricamente, Mondrian trabalhou, na fase em questão, com linhas perfeitamente verticais e horizontais e o retângulo de ouro - originário do número de ouro: (1+raiz quadrada(5))/2, aproximadamente 1,61803398874989484...



Se desenharmos um retângulo cuja razão entre os comprimentos dos lados maior e menor é igual ao número de ouro obtemos um retângulo de ouro.



Fazendo algumas observações bem superficiais vemos que não é difícil achar alguns desses retângulos. Circulei de verde alguns retângulos que se encaixam na regra.



Se alongarmos os segmentos de retângulos que seguem o padrão de ouro obtemos boa parte do grid preto em algumas ocasiões:

A partir do primeiro par de retângulos dessa obra, o alongamento de suas hastes forma boa parte do grid, que formam sucessivamente áreas proporcionais e alinhadas.

O computacional:

Primeiro são definidas as variáveis, incluindo as cores. No setup é chamada a função "drawPainting()". A função organiza a chamadas das outras funções que desenharão o "quadro". Após temos um "mousePressed()" que define que a cada clique uma nova tela será gerada (chamando de volta a "drawPainting()"). 
As funções:
- drawHorizontalLines() e drawVerticalLines(): desenham as linhas pretas horizontais e verticais, respectivamente, por meio de um laço semelhante ao que usamos pra desenhar grids, porém com alguns parâmetros aleatórios. Aqui também temos a chamada de "linesLimit()" que determina o número máximo de sorteio para a randomização do número de linhas.

- drawFrame(): desenha uma "moldura" do tamanho definido em "size".

- deleteLines() e removeLineLeftOfRectangle(xPosition,yPosition): removem alguns segmentos das linhas pretas, dando a impressão de retângulos brancos. A primeira chama e passa parâmetros para a segunda.

- fillRectangles() e fillSingleRectangle(blue/red/yellow): definem a cor e posição dos retângulos coloridos. Logo no início temos um sorteio de quantos existirão na tela. Então um laço é chamado para desenhá-los. 

O código encontrado no Openprocessing.org: 




O resultado:







Fontes:






See ya!






sexta-feira, 26 de setembro de 2014

Aula 14 - Retângulo fantasma interpolado

TAREFA
Crie uma aplicação que move um retângulo entre duas
 posições da tela clicadas consecutivamente pelo mouse.

O código foi criado a partir da função "moveCaixa2", feita em sala. Foram adicionadas 3 variáveis, "x", "y" e "mover".
Primeiro o quadrado é chamado, logo depois há uma verificação de clique. "Mover" só é verdadeiro quando a função "mouseClicked()" é chamada, ou seja, quando ocorre o clique do usuário. Nesse momento as variáveis x1 e y1 passam a guardar as coordenadas atuais da caixa e x2 e y2 as do clique. Então é chamada a função moveCaixa3.
Nessa função é calculada a distância entre o clique e a posição atual da caixa. Esses dados são adicionados à posição antiga armazenada em x1 e x os recebe, atualizando a posição da caixa.

O código*:



O resultado**:




* Na 3ª linha da segunda caixa de imagem, no comentário está escrito "moveCaixa2" onde deveria estar "moveCaixa3".
** No programa existe a "animação" de movimento.

Aula 13 - Gráficos

TAREFA
Criar uma aplicação que represente graficamente
 os resultados da análise perímetro x área*.
*Na tarefa original era "volume", mas nos foi permitido trocar esse parâmetro.



Em sala, criamos um simulador de "melhor aproveitamento de espaço" que calculava relações de área e perímetro. A tarefa era passar alguns desses dados para um gráfico. Escolhi a relação perímetro x área. Primeiro chamamos o simulador com o parâmetro "pos", que será o número de possibilidades combinatórias entre largura e altura, e consequentemente área e perímetro. Depois, ainda no setup(), chamamos a função que desenha o plano cartesiano por trás.
Para transformar o simulador em um gráfico, adicionei uma elipse em cada resultado, recebendo a área como x e perímetro como y. Os valores foram multiplicados e somados para uma melhor visualização.
A função planoCartesiano(), consiste em desenhar duas linhas, uma para o eixo x e outra para o y.

O código:


O resultado:


quarta-feira, 24 de setembro de 2014

Aula 12 - Círculos coloridos

Tarefa
Apresentar no blog como criar uma aplicação que muda individualmente a cor do preenchimento de dois círculos,
 com raios e centros randômicos, sempre que o cursor do mouse passar sobre os mesmos

Primeiro os valores de raio e posição são sorteados. Em seguida, as funções que desenham os círculos são chamadas no draw. Nas funções temos a chamada da elipse e o cálculo em X e Y da distância entre a posição do mouse e o centro. A função "dentrofora" é chamada. Nela temos como parâmetro as distâncias calculadas anteriormente que servirão em uma condição a fim de saber se o mouse está ou não dentro dos limites de algum dos círculos. Se estiver, ele é pintado individualmente, senão continua da cor preta. Nas primeiras versões desse código, quando o mouse estava contido em um círculo o OUTRO era pintado. Resolvi isso chamando o desenho imediatamente após a cor.

O código:


O resultado:


quinta-feira, 11 de setembro de 2014

Aula 11 - Bandeira do Brasil

"Considerando a Lei Federal Nº 5.700, criar a função mostraBandeiraBrasil(x, y, l) e discutir o resultado em seu blog"

A Lei:  
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.



Aula 10 - Yin-yang

TAREFA
recriar o símbolo do Yin-yang e discutir o resultado em seu blog



Não tem muito o que explicar, o símbolo foi construído com ajuda de um grid unXun e feito todo em cima disso. Primeiro fiz as duas metades maiores com dois arcos. Depois as quatro elipses considerando o centro.


Aqui sem o grid. 


Aula 9 - Breakout

Exercício
complementando o exercício realizado na aula passada,
 crie um jogo do tipo Breakout
TAREFA
 a fim de tornar o jogo mais interessante, adotar uma estratégia para “dar efeito” à bola e discutir o resultado em seu blog


Não foram feitas muitas alterações, basicamente mudei o "eixo" do jogo, que era vertical e a passa a ser horizontal (movimento do paddle no eixo y e no eixo x, respectivamente).
Inseri uns bloquinhos na parte superior da tela, que era a função de desenhar a "rede" do pong. 
O paddle passa a ser controlado de acordo com a bolinha, de forma que ela nunca "caia". Para isso substituí o "mouseY" do pong pelo "bolaX".
O efeito fica, por hora, o mesmo do pong, que é o da maioria dos jogos de breakout, a velocidade muda quando a bola toca os blocos.

O código:




O jogo: