A atividade consiste em adaptar o código criado em sala que cria um yin-yang para seguir o ponteiro do mouse e apresentar uma variação sutil no seu diâmetro.
"discutir o processo de desenvolvimento de uma aplicação na qual um símbolo do Yin-Yang segue o ponteiro do mouse, apresentando um diâmetro que oscila suavemente entre dois valores à sua escolha"
Antes de começar nossa aplicação, vamos dar uma breve introdução sobre o símbolo yin-yang.
01 - O que é o Yin-Yang?
As duas palavras Yin e Yang são conceitos do taoismo, tradição filosófica e religiosa vindo do leste asiático. O yin representa a escuridão, o princípio feminino, a noite e o yang é totalmente o oposto, representa a luz, o princípio masculino, o dia.
Segundo o taoismo essas duas forças se completam gerando um equilíbrio que compõem tudo que existe.
02 - Estabelecendo um Módulo
Como foi visto na atividade passada, para estabelecer uma proporcionalidade é necessário estabelecer um módulo.
Com base na imagem utilizada em sala de aula para criar o yin-yang iremos usar o modulo "a"
A dimensão da tela será 800 x 800. E a largura do círculo maior do yin-yang é 300
Nossa função yinyang receberá três parâmetros:
- x: coordenada x do centro do maior círculo
- y: coordenada y do centro do maior círculos
- a: largura do círculo maior, ou seja, o valor do módulo estabelecido
Cada círculo receberá esses valores de forma proporcional como parâmetros para suas funções:
- O círculo maior = ponto de origem:(x,y); largura e altura: módulo
- Arco yang = ponto de origem:(x,y); largura e altura: módulo
- Círculo médio de cima = ponto de origem:(x,y - módulo/4); largura e altura: módulo/2
- Círculo médio de baixo = ponto de origem:(x,y + módulo/4); largura e altura: módulo/2
- Círculo menor de cima = ponto de origem:(x,y - módulo/4); largura e altura: módulo/8
- Círculo menor de baixo = ponto de origem:(x,y + módulo/4); largura e altura: módulo/8
03 - Seguindo o mouse
Para aplicar nossa função definiremos a dimensão da tela em 800 x 800 na função setup; a largura, parâmetro a, em 300 e ponto de origem x e y para as funções mouseX e mouseY, respectivamente, na função draw obtendo o seguinte resultado:
04 - Variando o diâmetro
O último pré-requisito da atividade é variar o diâmetro suavemente entre dois valores a nossa escolha.
Os valores escolhidos foram de 300 a 400.
Primeiro vamos criar uma variável do tipo float "d" que vai receber o valor da largura do círculo maior, ou seja 300, e uma variável booleana chamada "tempo" que recebe true.
Agora iremos criar a lógica para variar o diâmetro, todo o código será colocado na função draw para atualizar a todo frame.
Depois iremos criar um if que verifica se a variável "tempo" é verdadeira. Se ela for verdadeira, nossa variável "d" vai aumentar o valor em 0.1, se não(else if) ela vai diminuir 0.1.
Ademais vamos criar outra condição; se o valor "d" for igual ou maior que 400, valor máximo escolhido para variar o diâmetro, a variável "tempo" vai receber false; caso contrário, se a variável "d" for igual ou menor que 300, a variável "tempo" receberá true.
E assim teremos o seguinte resultado:
"discutir o processo de desenvolvimento de uma aplicação na qual um símbolo do Yin-Yang segue o ponteiro do mouse, apresentando um diâmetro que oscila suavemente entre dois valores à sua escolha"
Antes de começar nossa aplicação, vamos dar uma breve introdução sobre o símbolo yin-yang.
01 - O que é o Yin-Yang?
As duas palavras Yin e Yang são conceitos do taoismo, tradição filosófica e religiosa vindo do leste asiático. O yin representa a escuridão, o princípio feminino, a noite e o yang é totalmente o oposto, representa a luz, o princípio masculino, o dia.
Segundo o taoismo essas duas forças se completam gerando um equilíbrio que compõem tudo que existe.
Como foi visto na atividade passada, para estabelecer uma proporcionalidade é necessário estabelecer um módulo.
Com base na imagem utilizada em sala de aula para criar o yin-yang iremos usar o modulo "a"
Nossa função yinyang receberá três parâmetros:
- x: coordenada x do centro do maior círculo
- y: coordenada y do centro do maior círculos
- a: largura do círculo maior, ou seja, o valor do módulo estabelecido
Cada círculo receberá esses valores de forma proporcional como parâmetros para suas funções:
- O círculo maior = ponto de origem:(x,y); largura e altura: módulo
- Arco yang = ponto de origem:(x,y); largura e altura: módulo
- Círculo médio de cima = ponto de origem:(x,y - módulo/4); largura e altura: módulo/2
- Círculo médio de baixo = ponto de origem:(x,y + módulo/4); largura e altura: módulo/2
- Círculo menor de cima = ponto de origem:(x,y - módulo/4); largura e altura: módulo/8
- Círculo menor de baixo = ponto de origem:(x,y + módulo/4); largura e altura: módulo/8
03 - Seguindo o mouse
Para aplicar nossa função definiremos a dimensão da tela em 800 x 800 na função setup; a largura, parâmetro a, em 300 e ponto de origem x e y para as funções mouseX e mouseY, respectivamente, na função draw obtendo o seguinte resultado:
O último pré-requisito da atividade é variar o diâmetro suavemente entre dois valores a nossa escolha.
Os valores escolhidos foram de 300 a 400.
Primeiro vamos criar uma variável do tipo float "d" que vai receber o valor da largura do círculo maior, ou seja 300, e uma variável booleana chamada "tempo" que recebe true.
Agora iremos criar a lógica para variar o diâmetro, todo o código será colocado na função draw para atualizar a todo frame.
Depois iremos criar um if que verifica se a variável "tempo" é verdadeira. Se ela for verdadeira, nossa variável "d" vai aumentar o valor em 0.1, se não(else if) ela vai diminuir 0.1.
Ademais vamos criar outra condição; se o valor "d" for igual ou maior que 400, valor máximo escolhido para variar o diâmetro, a variável "tempo" vai receber false; caso contrário, se a variável "d" for igual ou menor que 300, a variável "tempo" receberá true.
E assim teremos o seguinte resultado:
0.1 de variação de diâmetro por segundo
Como pode-se observar a varição do diâmetro por segundo é pouca, já que o mesmo está aumentando ou diminuindo 0.1 por segundo. Então vamos mudar para 0.5 a variação e obtemos o seguinte resultado:
0.5 de variação de diâmetro por segundo
Comentários
Postar um comentário