1.9 Elipses e círculos

Penúltimo post desta série sobre fundamentos de Javascript/p5, o comando da vez nos ajudará a desenhar círculos sem “apelar” para o point().

O comando ellipse(), como o nome diz, desenha elipses. Tome um cone e faça um corte diagonal na mesma sem atingir a base do objeto. O corte gera duas elipses, uma em cada parte do cone. Por isso a elipse faz parte de um conjunto de figuras chamadas de cônicas, já conhecidas no passado, mas que foram batizadas (e melhor estudadas) por um matemático grego chamado Apolônio de Perga.

elipses_marlontenorio
Página de um trabalho em que relaciono as cônicas matemáticas às figuras de linguagem

Uma das características da elipse é q ela possui dois pontos notáveis: os focos. Quanto mais próximos os focos, mais “arredondada” é a elipse. Se ambos forem iguais, isto é, sobrepostos, temos um caso particular da elipse, q é o círculo.

Circlope
Um cartum em que brinco com elipses e círculos

Agora voltemos à programação. Da mesma q forma q o comando line() trabalha com 4 dados para desenhar um segmento de linha reta, o ellipse() também precisará de 4 valores para criar uma elipse. A sintaxe é a seguinte:

ellipse(x, y, l, a);

elipses_1
Elipse “básica” utilizando 4 valores

Os valores de x e y, determinam o centro da elipse no plano. Já os valores para l e a determinam a largura e a altura da figura respectivamente. Se l e a forem iguais, teremos um círculo.

elipses_2
Se os dois últimos parâmetros do comando ellipse() forem iguais, a figura resultante será um círculo

DICA: Uma outra forma de desenhar um círculos é usar apenas três valores dentro dos parênteses. Os 2 primeiros continuam sendo as coordenadas do ponto central e o terceiro valor é interpretado duas vezes, gerando um desenho circular.

Note q por “padrão”, a elipse é desenhada com uma cor de preenchimento (branca) e um contorno (1px de espessura e na cor preta). Podemos alterar esses parâmetros, sendo q dois deles nós já vimos antes. Para a espessura do contorno usamos o comando strokeWeight() e a cor dele é modificada com o comando stroke().

elipses_3
Elipse com valores de stroke() e strokeWeight() personalizados

Agora vamos dar um passo além e conhecer mais um comando de modificação, o fill(). Esta instrução altera a cor de preenchimento da figura. Da mesma forma q o comando stroke(), se houver apenas um valor dentro dos parênteses, teremos um tom de cinza. Se tivermos 3, será gerada uma cor obedecendo ao sistema RGB.

elipses_4
Elipse com o valor de preenchimento modificado

Mas ainda é possível eliminar tanto o contorno como o preenchimento da figura. Basta usar noStroke() para sumir com o contorno e noFill() para apagar o preenchimento antes de desenhar os objetos.

elipses_5
Nas elipses acima, a primeira não possui preenchimento – noFill(); já a outra não possui contorno – noStroke()

Nosso repertório vai aumentando gradativamente. Na próxima postagem veremos um comando q nos ajudará a desenhar retângulos e quadrados.

1.9 Elipses e círculos