Atividade 3 - Aplicação de gerar blocos com círculos

O exercício proposto é criar uma aplicação no Processing que simule a obra Farbstudie Quadrate de Wassily Kandinsky.

A ideia é gerar blocos com círculos em cores diferentes, na quantidade exigida pelo usuário através de duas sliders. Segue as imagens da aplicação funcionando:




Primeiramente, para ser possível a utilização das sliders, é necessário adicionar a biblioteca controlP5 ao processing. A biblioteca pode ser adicionar através do menu Sketch > Importar Biblioteca > Adicionar Biblioteca, após isso pesquise por controlP5 e clique em instalar.

Dando início a aplicação, já com a biblioteca importada, criei a função bloco, que será responsável por desenhar os blocos que conterão os círculos. Essa função recebe como parâmetro as posições x e y, e o tamanho do quadrado. Dentro da função bloco, chamei a função fill() recebendo parâmetros aleatórios para pintar os quadrados com cores distintas. Depois usei a função rect() para desenhar o bloco com os parâmetros da função. A função bloco também é responsável por chamar uma nova função, chamado de circulo(), que é responsável por desenhar as elipses na tela. Portanto, ainda dentro da função bloco, chamo 3 vezes a função circulo.

A função circulo recebe como parâmetro as posições x e y, e seu raio, que é a divisão do tamanho dos blocos por dois (no maior círculo), e a divisão por números aleatórios (nos demais círculos). Dentro da função chamei a fill() no novamente para setar as cores das elipses e após desenhei o círculo com a ajuda da função ellipse(), dobrando o valor do raio para que complete o comprimento de uma borda à outra.

Agora indo para a função setup(), defini o tamanho da tela como 1000x600 e alterei o background para cinza. Após isso criei o objeto gui, que será pelas sliders. Adicionei as sliders no canto inferior direito da tela, uma para a quantidade de linhas e outra para a de colunas, variando entre 1 e 10.

Na função draw() criei dois laços for() encadeado, variando de 0 a a quantidade linhas e colunas menos 1. Dentro do segundo for, chamei a função bloco() definindo como 100 o tamanho, i*100 a posição horizontal e j*100 a posição vertical. Depois dos laços chamei a função randomSeed() recebendo 0 no parâmetro para que as cores não fiquem mudando a cada frame desenhado na tela.

Até essa parte a aplicação funciona bem, porém ela não apaga os blocos desenhados caso você vá de um número grande para um menor. Para controlar isso, criei duas variáveis para controlar o valor das linhas e de colunas. No draw(), criei uma condição if() para cada vez que a altura ou largura seja modificado, o background volte para a cor original e as variáveis recebam os novos valores respectivos.

Aplicação finalizada. Para download do código clique aqui.

Comentários

Postagens mais visitadas deste blog

Atividade 16 - Polígono regular

Atividade 15 - Transição entre Imagens

Atividade 7 - Adaptive Logo