O objetivo da atividade é:
" Apresentar o desenvolvimento de uma aplicação que, empregando laços, gere quadros com uma função que replica um bloco formado por um quadrado e três círculos coloridos. A aplicação deve receber a quantidade de blocos por linha e coluna por duas variáveis globais."
Antes de partimos direto para a aplicação, daremos uma breve explicação sobre o quadro de Wassily Kandinsky(artista plástico russo nascido em 16 de dezembro de 1866). O nome do quadro é Farbstudie Quadrate.
" Apresentar o desenvolvimento de uma aplicação que, empregando laços, gere quadros com uma função que replica um bloco formado por um quadrado e três círculos coloridos. A aplicação deve receber a quantidade de blocos por linha e coluna por duas variáveis globais."
Antes de partimos direto para a aplicação, daremos uma breve explicação sobre o quadro de Wassily Kandinsky(artista plástico russo nascido em 16 de dezembro de 1866). O nome do quadro é Farbstudie Quadrate.
Farbstudie Quadrate(1913)
Esse quadro é um estudo de Kandinsky sobre como diferentes combinações são percebidas. Dois quadrantes com mesmas cores no centro e com cores diferentes nos círculos ao redor despertam no espectador diferentes sensações. Além disso, o quadro se trata também de mistura de cores, e a sensação que cada cor desperta no ser humano.
Por exemplo: a cor amarela é ideal para representar o calor, pode simbolizar o Sol e o verão, é uma cor "quente" tipicamente terrestre, podendo simbolizar também a violência agressiva. Já o azul é uma cor celestial, ideal para representar o frio, evocando uma profunda calma no espectador ou até tristeza se usada com essa finalidade. Colocando essas duas cores uma ao lado da outra, há um contraste muito grande, tanto de sensações que cada uma provoca, quanto de ideias. Porém, se misturado as duas cores forma-se a cor verde, mais ligada a natureza e a renovação, trazendo uma harmonia e sentimento de boas energias.
Curiosidade: ao organizar os quadrados dessa maneira, Kandinsky coincidentemente criou uma obra de arte na técnica de imagens em série. Como por exemplo, a Marilyn Diptych de Andy Warhol(pintor e cineasta americano nascido em 06 de agosto de 1928).
Curiosidade: ao organizar os quadrados dessa maneira, Kandinsky coincidentemente criou uma obra de arte na técnica de imagens em série. Como por exemplo, a Marilyn Diptych de Andy Warhol(pintor e cineasta americano nascido em 06 de agosto de 1928).
Marilyn Diptych(1962)
Depois dessa breve explicação sobre a arte, vamos ao desenvolvimento da aplicação!
01- Pintando o quadro
O primeiro passo é copiar o código dado em sala de aula para o processing. O código basicamente cria uma função que gera um bloco da mesma estrutura da arte(um quadrado com 3 círculos dentro).
Logo, o primeiro passo é colorir esse quadro. Antes de aplicar a função fill do processing para colorir, é preciso primeiro entender que o código é executado de cima para baixo.
- Mas o que isso implica?, você me pergunta
Simples! Se chamarmos as quatro funções fill antes de criar o quadrado, toda a arte vai ficar com uma só cor, que será a última chamada, já que o processing vai repassar a cor da primeira com a segunda e assim por diante... Esse erro pode ser visto na execução abaixo:
Isso também implica na ordem declarada dos elementos. O quadrado é o primeiro a ser chamado, já que se fosse o último ele ficaria na frente de todos os outros elementos.
Sabendo disso, vamos aplicar cada função fill antes dos respectivos elementos, obedecendo suas ordens para que a arte seja gerada de forma correta.
- Mas como funciona a função fill?
Ela é declarada da seguinte forma: fill(x,y,z)
Sendo as variáveis x,y,z correspondentes os números que representam as cores em RGB(Red, Green, Blue).
Também será usado a função random que seleciona um número aleatório dependendo do alcance que foi escolhido. Ex: random(0,10), números de 0 a 10.
Então, iremos aplicar quatro funções fill utilizando como parâmetro funções random para gerar aleatoriamente cores em RGB.
02 - Um toque a mais
Para deixar o nosso quadro mais fidedigno com a pitura, vamos randomizar também o tamanho das larguras e alturas dos círculos. Ademais, temos que aplicar as seguintes regras para que não ocorra erros com nosso quadro:
1. O círculo maior terá altura e largura máximas até 120 e mínimas de 90, já que nosso quadrado tem dimensão 120 x 120.
2. Para o círculo mediano, vamos estipular uma dimensão máxima de 80 x 80 e mínima de 50 x 50.
3. Para o círculo pequeno, as dimensões máximas serão de 40 x 40 e mínimas de 10 x 10.
Agora é só criar 3 variáveis com o valor igual a função random especificando o intervalo de variação da dimensão de cada círculo.
03 - Quase lá
Opa opa, calma pequeno gafanhoto... Antes de começarmos a criar a função para replicar os blocos e gerar a arte, precisamos saber de uma informação extremamente útil para nosso código!
As duas funções rect(para criar quadrados) e ellipse(para criar círculos) se diferem, além na forma que geram, no seu ponto de origem. O ponto de origem da rect é no vértice esquerdo de cima do quadrado, já a ellipse é bem no seu centro.
Quando formos criar nossa função de gerar a arte teremos que ter antes essa informação na nossa mente, visto que se colocarmos os mesmos valores para os pontos de origens, os círculos não ficarão dentro do quadrado.
Logo, se nosso quadrado tem dimensão de 120x120 e seu ponto de origem é (0,0), nosso círculo maior terá o ponto de origem de (60,60) para que seja colocada bem no meio do quadrado.
04 - Criando laços
Depois de criado a função bloco(int x, int y) que gera nosso quadro, vamos fazer duas variáveis globais como foi pedido no enunciado da atividade para definir a quantidade de linhas e colunas da arte.
Então vamos criar essas duas variáveis antes de todo código e setarmos para a quantidade de linhas igual a três e colunas igual a quatro como na arte Farbstudie Quadrate.
Também será usado a função random que seleciona um número aleatório dependendo do alcance que foi escolhido. Ex: random(0,10), números de 0 a 10.
Então, iremos aplicar quatro funções fill utilizando como parâmetro funções random para gerar aleatoriamente cores em RGB.
Para deixar o nosso quadro mais fidedigno com a pitura, vamos randomizar também o tamanho das larguras e alturas dos círculos. Ademais, temos que aplicar as seguintes regras para que não ocorra erros com nosso quadro:
1. O círculo maior terá altura e largura máximas até 120 e mínimas de 90, já que nosso quadrado tem dimensão 120 x 120.
2. Para o círculo mediano, vamos estipular uma dimensão máxima de 80 x 80 e mínima de 50 x 50.
3. Para o círculo pequeno, as dimensões máximas serão de 40 x 40 e mínimas de 10 x 10.
Agora é só criar 3 variáveis com o valor igual a função random especificando o intervalo de variação da dimensão de cada círculo.
Opa opa, calma pequeno gafanhoto... Antes de começarmos a criar a função para replicar os blocos e gerar a arte, precisamos saber de uma informação extremamente útil para nosso código!
As duas funções rect(para criar quadrados) e ellipse(para criar círculos) se diferem, além na forma que geram, no seu ponto de origem. O ponto de origem da rect é no vértice esquerdo de cima do quadrado, já a ellipse é bem no seu centro.
Logo, se nosso quadrado tem dimensão de 120x120 e seu ponto de origem é (0,0), nosso círculo maior terá o ponto de origem de (60,60) para que seja colocada bem no meio do quadrado.
04 - Criando laços
Depois de criado a função bloco(int x, int y) que gera nosso quadro, vamos fazer duas variáveis globais como foi pedido no enunciado da atividade para definir a quantidade de linhas e colunas da arte.
Então vamos criar essas duas variáveis antes de todo código e setarmos para a quantidade de linhas igual a três e colunas igual a quatro como na arte Farbstudie Quadrate.
Depois vamos finalmente criar a função iniciarArte(int linhas, int colunas), que pede dois parâmetros. Como nosso quadrado tem dimensão 120x120, precisamos multiplicar esses dois parâmetros por 120 para que haja o espaçamento correto entre os quadros, evitando que um fique em cima do outro.
Exemplo:
Quantidades de linhas = 3 --> 3 x 120 = 360
Quantidade de colunas = 4 --> 4 x 120 = 480
Desse modo quando colocarmos a quantidade de linhas e colunas como parâmetro para parar o loop nos dois laços, vamos gerar os quadros com espaçamentos corretos.
Os dois loops usados serão o for.
Sintaxe do for: for (variável de inicialização, condição, incremento)
Criaremos um loop dentro do outro, de modo a gerar uma matriz.
No primeiro for, nossa variável de inicialização será chamada de j, que representa nossa coluna. A condição dela será menor ou igual a nosso parâmetro int colunas, que no caso será 480, e o incremento de 120.
No escopo desse primeiro for, iremos declarar nosso segundo for. Dessa vez a variável de inicialização será chamada de i, representando a linha, a condição será menor ou igual a int linhas, 360 no caso, e o incremento também em 120.
No escopo desse segundo for incluiremos nossa função bloco(int x, int y), relacionando o x com j(as colunas), e o y com i(as linhas).
Feito isso é só chamar a função iniciarArte usando as variáveis globais, quantidadeLinhas e quantidadeColunas, como parâmetros na função setup() e ver o resultado!
O que acontece quando iniciamos nossa aplicação na função draw() ?
A resposta é simples! Nossa arte será gerada sessenta vezes por segundo na tela, já que a função draw() é um loop infinito executado a sessenta frames per second(fps para os mais íntimos), ou seja, são sessenta quadros por segundo, diferentemente do setup() que só executa uma única vez!
O resultado é simplesmente psicodélico!
No primeiro for, nossa variável de inicialização será chamada de j, que representa nossa coluna. A condição dela será menor ou igual a nosso parâmetro int colunas, que no caso será 480, e o incremento de 120.
No escopo desse primeiro for, iremos declarar nosso segundo for. Dessa vez a variável de inicialização será chamada de i, representando a linha, a condição será menor ou igual a int linhas, 360 no caso, e o incremento também em 120.
No escopo desse segundo for incluiremos nossa função bloco(int x, int y), relacionando o x com j(as colunas), e o y com i(as linhas).
Feito isso é só chamar a função iniciarArte usando as variáveis globais, quantidadeLinhas e quantidadeColunas, como parâmetros na função setup() e ver o resultado!
Dimensão: 3 x 4
Dimensão: 5 x 5
05 - DLCO que acontece quando iniciamos nossa aplicação na função draw() ?
A resposta é simples! Nossa arte será gerada sessenta vezes por segundo na tela, já que a função draw() é um loop infinito executado a sessenta frames per second(fps para os mais íntimos), ou seja, são sessenta quadros por segundo, diferentemente do setup() que só executa uma única vez!
O resultado é simplesmente psicodélico!
Comentários
Postar um comentário