Tarefa da aula 06: Desenhar a bandeira do Brasil

- outubro 05, 2019

Objetivo:
Discutir o emprego das instruções quad, beginShape e endShape, rectMode e ellipseMode do Processing na construção da bandeira do Brasil, considerando a Lei Federal No 5.700.

O Art 5° da Lei Federal No 5.700 diz o seguinte sobre a modulação da bandeira do Brasil:

Art. 5º A feitura da Bandeira Nacional obedecerá às seguintes regras (Anexo nº 2):

I - Para cálculo das dimensões, tomar-se-á por base a largura desejada, dividindo-se esta em 14 (quatorze) partes iguais. Cada uma das partes será considerada uma medida ou módulo.

II - O comprimento será de vinte módulos (20M).

III - A distância dos vértices do losango amarelo ao quadro externo será de um módulo e sete décimos (1,7M).

IV - O círculo azul no meio do losango amarelo terá o raio de três módulos e meio (3,5M).

V - O centro dos arcos da faixa branca estará dois módulos (2M) à esquerda do ponto do encontro do prolongamento do diâmetro vertical do círculo com a base do quadro externo (ponto C indicado no Anexo nº 2).

VI - O raio do arco inferior da faixa branca será de oito módulos (8M); o raio do arco superior da faixa branca será de oito módulos e meio (8,5M).

VII - A largura da faixa branca será de meio módulo (0,5M).

(...)

Os incisos de VIII a X não serão usados no nosso execício.

Primeiro vamos vamos desenhar a forma mais básicas da bandeira, o retângulo. Mas antes, o setup inicial será este:

Podemos notar que modulo (m) da nossa bandeira será baseado na largura que escolhermos na chamada da função bandeiraBrasil(). Dentro da função também temos duas variáveis que serão usadas mais tarde, mLarg e mAlt, que guardam a metade da largura e metade da altura da bandeira respectivamente. Além disso, podemos notar que eu escolhi chamar a função que desenha a bandeira a partir do centro do Canvas, logo, os desenhos das formas da bandeira terão que ser feitos a partir do centro, para que a bandeira fique centralizada. E é aqui onde entra a função rectMode().

Quando essa função é chamada, todos os retângulos feitos com a função rect() serão desenhados a partir do centro, até que se mude o rectMode(). Mas para isso, temos que lhe atribuir a constante CENTER como parâmetro, desta forma:

O resultado será este:

Agora para o losango, podemos usar a função quad(), que desenha um polígono de quatro vértices. Atenção agora. Para essa função temos que levar em conta que o desenho da bandeira está sendo feito a partir do centro, logo, temos que fazer a subtração correta nos parâmetros da função, e é aqui que usamos as variáveis mLarg e mAlt para ajudar na tarefa. Se atentarmos sempre a posição e tamanho de cada módulo para fazer as operações matemáticas corretas, o código ficaria assim:

O problema aqui é que a chamada da função fica bastante confusa, então também podemos usar uma outra forma, as funções beginShape e endShape, que basicamente são responsáveis por desenhar polígonos mais complexos baseadas em vértices ou curvas. Transformado a função quad() para essa técnica, o código fica assim:

Dessa forma ele fica mais legível e também suportaria muito mais vértices se fosse o caso, para fazer polígonos mais complexos. De todo modo, o resultado é este:

Agora, é hora de desenhar o círculo. Aqui a função ellipse() basta, mas note que o ellipseMode() ajuda no trabalho, já que quando recebe a constante RADIUS, a elipse é desenhada recebendo o raio como parâmetro, de modo que não precisamos converter o valor do módulo descrito nas nossas instruções para o diâmetro do círculo. Podemos ver na figura abaixo:

E o resultado é este:

O último passo é adicionar a faixa branca e aqui é preciso um pouco de abstração. Segundo as instruções, o raio dela é obtido a partir da borda inferior da bandeira e a uma distância de dois módulos à esquerda do centro da bandeira. Também é descrito que a linha inferior da faixa tem raio de módulo 8 e a linha superior tem mais 1/2 módulo. Desta forma:

Agora, a técnica usada aqui foi a seguinte: Primeiro desenhar um arco cujo o seguimento fosse um pouco maior que o círculo:

E em seguida cobrir as sobras com um círculo não preenchido, que tivesse uma espessura de borda igual ao módulo da faixa, e que considerasse essa espessura e o seu próprio raio de modo a não cobrir o círculo azul que já foi desenhado, ou seja, ele cobrirá apenas as pontas que sobrara da nossa faixa, dessa forma: