5° Atividade - Aula 6: Bandeira do Brasil

A atividade consiste em criar a Bandeira do Brasil através do processing, usando a norma oficial para as dimensões dos seus elemento.

Cloque para ir para o código

Em sala, fizemos um código que exibe a bandeira do Japão, também respeitando as proporções oficiais. Ele possui dois procedimentos, um que exibe a bandeira no centro da tela e seu tamanho varia de acordo com a posição do mouse, e outro que exibe a bandeira centrada na posição atual do mouse.

Partindo desse código, temos uma base para fazer a Bandeira do Brasil. Para calcular suas dimensões usa-se como base a altura desejada e segue os passos:

• Dividir a altura em 14 partes iguais e transformar essa medida em um módulo.

• A largura total será igual a 20 módulos.

• A distância dos vértices do losango para o retângulo externo será de 1.7 módulos

• O círculo no centro tem raio de 3.5 módulos.

Duas funções que vão nos ajudar nesse processo, são a rectMode() e a ellipseMode().

Elas alteram o ponte a funcionalidade das quatro variáveis que as funções recebem, dependendo do modo escolhido.

• CENTER: Os dois primeiros parâmetros são o centro da forma, enquanto os últimos são a altura e largura.

• RADIOS: Os dois primeiros parâmetros são o centro da forma, enquanto os últimos são metade da altura e largura.

• CONER: Os dois primeiros parâmetros são o canto superior esquerdo da forma, enquanto os últimos são a altura e largura.

• CONERS: Os dois primeiros parâmetros são um dos cantos da forma, enquanto os últimos são o canto oposto.

Com relação as cores, essas são as cores no padrão RGB

Sabendo dessas informações, podemos modificar o código para que ele começa a exibir a Bandeira do Brasil. Primeiramente as variáveis que vamos precisar. a principal variável é o módulo, já que todas as medidas são tomas usando ela como comparação. Levando em conta que a media dada é a largura, sabemos que o módulo é largura/20.

• Sabendo o módulo, podemos fazer o retângulo de fora, além de que, com o rectMode(CENTER), podemos simplificar o posicionamento do mesmo, já que precisamos apenas dar o ponto central e não calcular onde ficaria o canto superior esquerdo.

• Para fazer o losango, usando o ponto central, calculamos o valor cada vértice. Os valores de x nos vértices variam entre x-(10-1.7)*modulo, x, x+(10-1.7)*modulo, enquanto os de y variam entre y-(7-1.7)*modulo, y, y+(7-1.7)*modulo. Chegamos a esses valores levando em conta que do centro para as laterais são 10 módulos de distância e entre cima e baixo são 7 módulos.

• Por último, usando o ellipseMode(RADIUS), fazemos o circulo do centro, com o raio de 3.5*módulo

Cloque para ir para o código

Como resultado, temos a bandeira da imagem ao lado, mas ainda podemos incrementar um pouco mais o código, fazendo o tamanho da bandeira mudar de acordo com a posição do mouse ou fazer o ponto central ser a posição atual do mouse, assim como no código da bandeira do japão.

Cloque para ir para o código