Em sala de aula foi criado um código que montava a bandeira oficial, com base nas normas oficiais do país, do Japão. Foram feitos dois códigos, um que somente criava a bandeira do Japão e mostrava ela ao executar o processing, e a outra fazia essa bandeira seguir o ponteiro do mouse.
A atividade 06 se baseia nessa aplicação e possui o seguinte enunciado:
" Considerando a Lei Federal No 5.700, apresentar a criação do procedimento
mostraBandeiraBrasil(x, y, l), explicando como rectMode e ellipseMode podem
simplificar o processo "
Lei Federal No. 5700:
I - PARA CÁLCULO DAS DIMENSÕES, TOMAR-SE-Á POR BASE A ALTURA DESEJADA, DIVIDINDO-SE ESTA EM 14 PARTES IGUAIS. CADA UMA DAS PARTES SERÁ CONSIDERADA UMA MEDIDA
OU MÓDULO
II - A LARGURA TOTAL SERÁ DE 20 MÓDULOS
III - A DISTÂNCIA DOS VÉRTICES DO LOSANGO AO QUADRO EXTERNO SERÁ DE UM MÓDULO E SETE DÉCIMOS
IV - O CÍRCULO NO MEIO DO LOSANGO TERÁ O RAIO DE TRÊS MÓDULOS E MEIO
A atividade 06 se baseia nessa aplicação e possui o seguinte enunciado:
" Considerando a Lei Federal No 5.700, apresentar a criação do procedimento
mostraBandeiraBrasil(x, y, l), explicando como rectMode e ellipseMode podem
simplificar o processo "
Lei Federal No. 5700:
I - PARA CÁLCULO DAS DIMENSÕES, TOMAR-SE-Á POR BASE A ALTURA DESEJADA, DIVIDINDO-SE ESTA EM 14 PARTES IGUAIS. CADA UMA DAS PARTES SERÁ CONSIDERADA UMA MEDIDA
OU MÓDULO
II - A LARGURA TOTAL SERÁ DE 20 MÓDULOS
III - A DISTÂNCIA DOS VÉRTICES DO LOSANGO AO QUADRO EXTERNO SERÁ DE UM MÓDULO E SETE DÉCIMOS
IV - O CÍRCULO NO MEIO DO LOSANGO TERÁ O RAIO DE TRÊS MÓDULOS E MEIO
Os valores em RGB das cores da bandeira que iremos utilizar:
Com base nessas recomendações iremos começar nosso código.
01 - RectMode e ellipseMode
Um dos objetivos da atividade é explicar a importância dessas duas funções para simplificar nosso código. Como já vimos anteriormente, o retângulo e a elipse são criados a partir das funções rect e ellipse,respectivamente, que possuem diferenças no seu ponto de origem.
O ponto de origem do retângulo é a vértice esquerda de cima, e da elipse é bem no centro do objeto.
Vamos começar criando o retângulo. Iremos ajustar o tamanho da nossa tela para 800 x 600. A largura do retângulo será 300 e nossa função mostraBandeiraBrasil vai receber três variáveis:
- x: ponto X central da bandeira
- y: ponto Y central da bandeira
- l: largura total da bandeira
Primeiro vamos definir o valor do módulo da bandeira. De acordo com a lei federal a largura total será de 20 módulos. Então pressupõe-se que um módulo seja igual a largura dividido por 20.
- módulo = largura total / 20
O próximo passo é definir o valor do ponto de origem do nosso retângulo(variáveis rx e ry). Tendo em vista que o valor de entrada (x,y) é o ponto central, será necessário fazer o seguinte cálculo:
- ponto de origem do retângulo(rx) = x - largura/2
- ponto de origem do retângulo(yx) = y - altura/2
Desse modo o ponto de origem central de entrada(x,y) será convertido para os pontos de origem do retângulo, vértice esquerda de cima.
A altura do retângulo equivale a 14 módulos de acordo com a lei federal:
- altura = módulo x 14
Agora iremos passar as variáveis definidas como parâmetros para criar o retângulo:
rect(rx,ry,l,h)
- ponto de origem do círculo(cx) = x
- ponto de origem do círculo(cx) = y
O raio da elipse, de acordo com a lei federal, tem o valor de três módulos e meio. Logo, o diâmetro será duas vezes esse valor.
- diâmetro do círculo(d) = (3,5 x modulo) x 2
Depois de criar o retângulo e o círculo sem o uso das funções rectMode e ellipseMode, iremos utilizar essas duas funções para mostrar como elas deixam o código mais simples.
As duas funções podem receber como parâmetro o valor "CENTER", no qual o ponto de origem da forma é definido como o centro da mesma.
Se tivéssemos colocado as duas funções no nosso código, não precisaríamos fazer o cálculo do ponto de origem das formas e teríamos o mesmo resultado simplificando nosso código.
A única forma que falta para nossa bandeira é o losango amarelo. Para isso teremos como base também a lei federal:
III - A DISTÂNCIA DOS VÉRTICES DO LOSANGO AO QUADRO EXTERNO SERÁ DE UM MÓDULO E SETE DÉCIMOS
Para criar o losango iremos usar a função quad(x1,x2,y1,y2,z1,z2,w1,w2). As variáveis x,y,z,w são os quatro vértices do losango sendo formado pelo par ordenado (x,y), representados como (variável 1,variável 2).
O próximo passo é estabelecer o valor de cada par ordenado seguindo a lógica da figura abaixo:
Por último é importante lembrar a ordem das formas, primeiro retângulo, depois o losango e por último o círculo. Então temos o resultado:
Para terminar a atividade vamos mudar os parâmetros utilizados antes do par ordenado(x,y),de 400 e 300 respectivamente, e iremos colocar as funções mouseX e mouseY que irão fazer a nossa bandeira seguir o ponteiro do mouse. É importante ressaltar que é necessário aplicar esse código na função draw() com a função background() antes, para que a tela seja atualizada a cada segundo dando ideia de movimento e não deixe rastros da bandeira anterior. O vídeo a seguir mostra a aplicação desse código:
Vamos começar criando o retângulo. Iremos ajustar o tamanho da nossa tela para 800 x 600. A largura do retângulo será 300 e nossa função mostraBandeiraBrasil vai receber três variáveis:
- x: ponto X central da bandeira
- y: ponto Y central da bandeira
- l: largura total da bandeira
Primeiro vamos definir o valor do módulo da bandeira. De acordo com a lei federal a largura total será de 20 módulos. Então pressupõe-se que um módulo seja igual a largura dividido por 20.
- módulo = largura total / 20
O próximo passo é definir o valor do ponto de origem do nosso retângulo(variáveis rx e ry). Tendo em vista que o valor de entrada (x,y) é o ponto central, será necessário fazer o seguinte cálculo:
- ponto de origem do retângulo(rx) = x - largura/2
- ponto de origem do retângulo(yx) = y - altura/2
Desse modo o ponto de origem central de entrada(x,y) será convertido para os pontos de origem do retângulo, vértice esquerda de cima.
A altura do retângulo equivale a 14 módulos de acordo com a lei federal:
- altura = módulo x 14
Agora iremos passar as variáveis definidas como parâmetros para criar o retângulo:
rect(rx,ry,l,h)
mostraBandeiraBrasil(400,300,300)
O círculo da nossa bandeira será criado utilizando a função ellipse. Como a função usada tem o ponto de origem no centro da elipse, o ponto de origem do círculo será os próprios valores de entrada (x,y) da nossa função.- ponto de origem do círculo(cx) = x
- ponto de origem do círculo(cx) = y
O raio da elipse, de acordo com a lei federal, tem o valor de três módulos e meio. Logo, o diâmetro será duas vezes esse valor.
- diâmetro do círculo(d) = (3,5 x modulo) x 2
As duas funções podem receber como parâmetro o valor "CENTER", no qual o ponto de origem da forma é definido como o centro da mesma.
Se tivéssemos colocado as duas funções no nosso código, não precisaríamos fazer o cálculo do ponto de origem das formas e teríamos o mesmo resultado simplificando nosso código.
Aplicação do código com as funções rectMode(CENTER) e ellipseMode(CENTER)
02 - LOSANGOA única forma que falta para nossa bandeira é o losango amarelo. Para isso teremos como base também a lei federal:
III - A DISTÂNCIA DOS VÉRTICES DO LOSANGO AO QUADRO EXTERNO SERÁ DE UM MÓDULO E SETE DÉCIMOS
Para criar o losango iremos usar a função quad(x1,x2,y1,y2,z1,z2,w1,w2). As variáveis x,y,z,w são os quatro vértices do losango sendo formado pelo par ordenado (x,y), representados como (variável 1,variável 2).
O próximo passo é estabelecer o valor de cada par ordenado seguindo a lógica da figura abaixo:
Por último é importante lembrar a ordem das formas, primeiro retângulo, depois o losango e por último o círculo. Então temos o resultado:
x: 400, y:300, largura do retângulo: 300
03 - mouseX e mouseYPara terminar a atividade vamos mudar os parâmetros utilizados antes do par ordenado(x,y),de 400 e 300 respectivamente, e iremos colocar as funções mouseX e mouseY que irão fazer a nossa bandeira seguir o ponteiro do mouse. É importante ressaltar que é necessário aplicar esse código na função draw() com a função background() antes, para que a tela seja atualizada a cada segundo dando ideia de movimento e não deixe rastros da bandeira anterior. O vídeo a seguir mostra a aplicação desse código:
Comentários
Postar um comentário