Atividade 6 - Bandeira do Brasil com rectMode e ellipseMode

O objetivo da atividade é criar uma aplicação que desenhe na tela a bandeira do Brasil de acordo com as especificações da Lei Federal N° 5.700. O objetivo final deverá ficar parecido com isso:

Para iniciar a aplicação, criaremos a função desenhaBandeiraBrasil(), que receberá como paramêtros a posição x, posição y e a largura da bandeira. Para trabalharmos as dimensões da bandeiras, é necessário entender a ideia dos módulos referentes à Lei Federal N° 5.700:

Dentro da função, criei a variável módulo que será a medida principal para a construção da bandeira. A variável módulo recebe a largura (que foi passada como parâmetro) divida por 20 (pois a mesma equivale à 20 módulos). Após isso, chamo a função noStroke() para retirar as bordas de todas as figuras que serão desenhadas.

Também criei uma variável que calcula a altura, que é calculada pelo produto da largura 14 vezes.

O primeiro a ser desenhado é o retângulo, para isso defino sua cor chamando a função fill(). As cores oficiais da bandeira do Brasil são:

Para desenhar o retângulo devemos ter em mente de que as posições x e y do mesmo são por padrão o canto superior esquerdo, diferente do círculo que tem por padrão sua posição central. Para manipular as duas figuras da mesma forma existem duas funções que nos auxiliam: a rectMode(), que é responsável por mudar o local de onde os retângulos são desenhados,  e a ellipseMode(), que é responsável por mudar o local de onde os círculos são desenhados.

Como preferência minha, decidi deixar tudo sendo desenhado a partir do centro, então chamei a função rectMode(), e defini seu parâmetro como CENTER.

A partir disso, criei o retângulo com a função rect(x, y, l, a).

Agora para desenhar o losango, é necessário usar a função quad() que recebe as posições x e y de 4 pontos. O primeiro ponto é o superior, que tem sua posição horizontal a variável x, e a posição vertical é a diferença entre y e a metade da altura mais 1.7 módulo, pois é a distância que deve ficar da margem da bandeira. O segundo ponto é o da direita, que tem sua posição horizontal a soma entre x e a metade da altura mais 1.7 módulo, e sua posição vertical é y. O terceiro ponto é o inferior, que tem sua posição horizontal a variável x, e a posição vertical é a soma entre y e a metade da altura menos 1.7 módulo. Por fim, o quarto ponto é o da esquerda, que tem sua posição horizontal a diferença entre x e a metade da altura mais 1.7 módulo, e sua posição vertical é y.

Para o círculo, defini sua cor com o fill(), e para desenhá-lo utilizei a função ellipse(), que recebe a posição x e y, e o diâmetro horizontal e vertical. De acordo com as regras da bandeira, o raio do círculo deve ser 3.5 vezes o módulo. Então basta multiplicar esses raio por 2 para chegar ao diâmetro.

A função já está pronta, agora resta definir o tamanho que você deseja na função setup(), e chamar a função desenhaBandeiraBrasil() no draw().

Para baixar o código completo clique aqui.