Desenvolvimento de um Aplicativo Interativo para desenho de Estrelas

Introdução

Este artigo descreve o desenvolvimento de um aplicativo interativo em P5.js para gerar estrelas com parâmetros configuráveis, como número de pontas, raios maior e menor, e cores de preenchimento e borda. O projeto foi inspirado por experimentos iniciais realizados no GeoGebra, onde explorei a construção de estrelas de 3, 4 e 5 pontas, compartilhados no meu perfil da plataforma (GeoGebra: robertocsa). O objetivo foi criar uma ferramenta que permitisse ao usuário personalizar estrelas, garantindo que a primeira ponta esteja sempre alinhada a 90 graus (\(\theta = \frac{\pi}{2}\)), com vértices evoluindo no sentido anti-horário.

O aplicativo utiliza sliders para ajustar parâmetros numéricos e menus suspensos para cores predefinidas, com estrelas posicionadas aleatoriamente em uma janela de 600x600 pixels. Abaixo, detalhamos os requisitos, os cálculos matemáticos e a implementação.

Requisitos do Aplicativo

O aplicativo foi projetado com base nos seguintes requisitos:

Quantidade de estrelas: 1 a 20, ajustável via slider.
Número de pontas: 3 a 12, ajustável via slider.
Raio maior: 20 a 100 pixels, para os vértices externos, ajustável via slider.
Raio menor: 10 a 50 pixels, para os vértices internos, ajustável via slider, limitado a ser menor que o raio maior.
Cores: Preenchimento interno e bordas selecionáveis via menus suspensos com cores predefinidas (vermelho, azul, verde, amarelo, roxo, preto, branco).
Primeira ponta: Fixada em \(\theta = \frac{\pi}{2}\) (90 graus, vertical para cima).
Sentido: Vértices evoluem no sentido anti-horário.
Pontos internos: Localizados nos pontos médios dos arcos menores entre vértices externos consecutivos.
Posicionamento: Estrelas em posições aleatórias na janela, respeitando margens para evitar corte.

Experimentos Iniciais no GeoGebra

Antes de desenvolver o aplicativo, realizei experimentos no GeoGebra para visualizar a construção de estrelas de 3, 4 e 5 pontas. Esses experimentos envolveram a definição de vértices externos em um círculo com raio maior, começando em \(\theta = \frac{\pi}{2}\), e vértices internos no círculo com raio menor, posicionados nos pontos médios dos arcos intermediários. Os resultados foram compartilhados no meu perfil do GeoGebra (GeoGebra: robertocsa), permitindo validar a abordagem matemática antes da implementação em P5.js.

Fundamentos Matemáticos

A construção das estrelas baseia-se em cálculos geométricos para posicionar os vértices em dois círculos concêntricos: um com raio maior (\(r_1\)) para os vértices externos e outro com raio menor (\(r_2\)) para os vértices internos. Abaixo, detalhamos os passos matemáticos.

1. Vértices Externos

Para uma estrela com \(n\) pontas, os vértices externos são posicionados em ângulos igualmente espaçados no círculo de raio \(r_1\). Como a primeira ponta deve estar em 90 graus (\(\theta = \frac{\pi}{2}\)), ajustamos para o sistema de coordenadas do P5.js, onde o eixo y aponta para baixo. Assim, usamos \(\theta = \frac{3\pi}{2}\) (270 graus) para alinhar a ponta para cima (\(y\) negativo). O ângulo do \(i\)-ésimo vértice externo é: \(\theta_i = \frac{3\pi}{2} + \frac{2\pi (i-1)}{n}, \quad i = 1, 2, \ldots, n\) As coordenadas do vértice externo, relativo ao centro \(c_x, c_y\), são: \(x = c_x + r_1 \cos(\theta_i), \quad y = c_y + r_1 \sin(\theta_i)\) Para \(i = 1\) , \(\theta_1 = \frac{3\pi}{2}\), temos: \(\cos\left(\frac{3\pi}{2}\right) = 0, \quad \sin\left(\frac{3\pi}{2}\right) = -1\) Resultando em \((c_x, c_y - r_1)\), confirmando que a primeira ponta aponta para cima.

2. Vértices Internos

Os vértices internos estão no círculo de raio \(r_2\), posicionados nos pontos médios dos arcos menores entre vértices externos consecutivos. Para o vértice interno entre \(\theta_i\) e \(\theta_{i + 1}\): \(\theta_{i + 1} = \frac{3\pi}{2} + \frac{2\pi i}{n}\) A diferença angular é: \(\Delta\theta = \theta_{i + 1} - \theta_i = \frac{2\pi}{n}\) O ângulo do ponto médio do arco menor é: \(\theta_{\text{int},i} = \theta_i + \frac{\Delta\theta}{2} = \theta_i + \frac{\pi}{n}\) As coordenadas do vértice interno são: \(x = c_x + r_2 \cos(\theta_{\text{int},i}), \quad y = c_y + r_2 \sin(\theta_{\text{int},i})\) .

3. Exemplo para \(n = 3\)

Para uma estrela de 3 pontas:

Ponto 1: \(\theta_1 = \frac{3\pi}{2}\), coordenadas \((c_x, c_y - r_1)\).
Ponto 2: \(\theta_2 = \frac{3\pi}{2} + \frac{2\pi}{3} = \frac{7\pi}{6}\).
Ponto 3: \(\theta_3 = \frac{3\pi}{2} + \frac{4\pi}{3} = \frac{17\pi}{6} \equiv \frac{5\pi}{6} \ (mod\ 2\pi)\).
Ponto interno entre P1 e P2: \(\theta_{\text{int},1} = \frac{3\pi}{2} + \frac{\pi}{3} = \frac{11\pi}{6}\).
Ponto interno entre P2 e P3: \(\theta_{\text{int},2} = \frac{7\pi}{6} + \frac{\pi}{3} = \frac{9\pi}{6} = \frac{3\pi}{2}\).
Ponto interno entre P3 e P1: \(\theta_{\text{int},3} = \frac{5\pi}{6} + \frac{\pi}{3} = \frac{7\pi}{6}\).

Esses pontos formam o polígono da estrela, desenhado no sentido anti-horário.

4. Posicionamento Aleatório

As estrelas são posicionadas aleatoriamente na janela de 600x600 pixels, com centros \((c_x, c_y)\) gerados em: \(c_x \in [r_1, 600 - r_1], \quad c_y \in [r_1, 600 - r_1]\) Isso garante que as estrelas não sejam cortadas pelas bordas da tela.

Implementação em P5.js

O aplicativo foi implementado com três arquivos: index.html, sketch.js, e style.css. O index.html carrega a biblioteca P5.js e os outros arquivos. O style.css estiliza a interface, posicionando sliders e menus suspensos abaixo da tela de 600x600 pixels.

No sketch.js, a função setup() cria:

Slider para número de estrelas (1 a 20).
Slider para número de pontas (3 a 12).
Slider para raio maior (20 a 100 pixels).
Slider para raio menor (10 a 50 pixels, limitado a \(r_1 - 5\)).
Menus suspensos para cores de preenchimento e borda (vermelho, azul, verde, amarelo, roxo, preto, branco).

A função generateStars() cria posições aleatórias para as estrelas, e a função drawStar() desenha cada estrela usando os cálculos descritos, alternando vértices externos e internos. A função draw() atualiza a tela em tempo real com base nos valores dos controles.

Conclusão

O aplicativo, disponível publicado sob o título "Cria_estrlas_colrs vrs2 (primeira ponta em 90 graus)" no meu perfil no P5.JS, atende a todos os requisitos, permitindo a criação de estrelas personalizáveis com a primeira ponta fixada em 90 graus (vertical para cima). Os experimentos no GeoGebra foram essenciais para validar a construção geométrica, e a implementação em P5.js oferece uma interface intuitiva para explorar diferentes configurações. O código está disponível para execução local ou no editor online do P5.js, proporcionando uma ferramenta educacional e visual para estudar geometria de estrelas.

Veja o vídeo referente a este artigo

Fonte

Este artigo foi escrito com o suporte de Grok, uma IA desenvolvida pela xAI, projetada para fornecer respostas precisas e úteis. Os experimentos foram criados em colaboração com Grok, garantindo precisão técnica e interatividade.