Arcos

No perfil q criei no Instagram, o CodingP5, além de rápidos resumos visuais sobre os comandos mais básicos sobre a ferramenta, apresento criações/experimentações minhas e desafios usando como referências o trabalho de outras pessoas.

Além dos comandos básicos de desenho para o desenho de pontos, linhas, retângulos e elipses, no pacote mais “avançado” está o comando para desenhar arcos. Eu acho um dos mais versáteis, pois muita coisa pode ser feita usando arcos.

Segue o “resumo visual” sobre o comando arc(), usado para o desenho de arcos, bem como um exercício baseado no trabalho Animodul, da Meikme. O trabalho deles é fantástico, baseado em muita geometria, estilização de formas e uso de cores vivas e vibrantes. Vale conferir!

Arcos

Fenestras

Hora de veicular umas coisas produzidas ao longo desses meses de quarentena.

Criei um perfil no Instagram para divulgar meus estudos de javascrpit/p5, chamado CodingP5 (tentei algum nome sintético em português, mas não consegui). Lá eu publico tanto meus experimentos pessoais, qto uma espécie de “tentativa de criar uma didática para iniciantes” (eu tb me considero um) com postagens visuais sobre os comandos de p5. Aqui no blog já publiquei alguns posts voltados a apresentar de forma bem iniciática os fundamentos desta biblioteca.

Uma das postagens foi uma série de janelas desenhadas utilizando apenas comandos básicos, como os usados para criar linhas e retângulos, bem como alterar espessura de traço e cores. Meu objetivo é mostrar q com pouca coisa já é possível ter resultados interessantes. Não quer dizer q seja rápido ou fácil. Para o desenho figurativo, muitos vão concordar q usar código parece reinventar a roda, uma vez q tudo deve ser criado do “zero”, linha por linha. Eu considero como um exercício de fixação de conceitos. Falar sobre aprendizado por repetição, desenvolvimento de paciência e perseverança parece um discurso bem difícil e desagradável em meio a uma atualidade tão instantânea e apressada, ansiosa e q perde o interesse rapidamente, ávida por novidades o tempo todo.

Fenestra é um termo antigo para janela. Janelas são criações q conectam o mundo exterior ao interior. O momento atual pede um cuidado com a casa interna e o mundo q nos cerca.

Fenestras

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