1.10 “Retangulando”

Finalmente chegamos ao último post desta série sobre fundamentos de Javascpript/p5. Na postagem anterior, vimos como desenhar elipses e círculos usando o comando ellipse(). Vimos também q algumas das instruções aplicadas aos comandos point() e line(), como o stroke() e o strokeWeight(), também servem para o ellipse(). Conhecemos ainda novos comandos para personalização como o fill(), o noFill() e o noStroke(). Agora vem a melhor parte: tudo o q serve para o comando ellipse() tb serve para o comando rect(), usado para desenhar retângulos e quadrados. Vejamos.

Da mesma forma q o comando ellipse() usa 4 valores para construir uma elipse, o comando rect() tb usa 4 parâmetros. A sintaxe básica é a seguinte:

rect (x, y, l, a);

Os dois primeiros parâmetros indicam as coordenadas do ponto localizado no canto superior esquerdo do retângulo. Os dois outros dizem respeito à largura e altura do retângulo respectivamente.

retangulos_1
Retângulo simples criado usando 4 valores

No exemplo acima, nota-se q o retângulo criado possui preenchimento na cor branca, espessura na cor preta e de 1px de espessura. Esses valores são o padrão. Para alterá-los, use os comandos stroke(), strokeWeight() e fill(). Caso deseje eliminar o contorno ou o preenchimento, use os comandos noStroke() e noFill() respectivamente.

retangulos_2
Retângulos criados variando os parâmetros de contorno e preenchimento

Da mesma forma q para criar um círculo, basta repetir os dois últimos valores dentro dos parênteses do comando ellipse(), para criar um quadrado, fazemos o mesmo no comando rect().

retangulos_3
Um quadrado é um retângulo de largura e altura iguais

A definição de retângulo leva em consideração a natureza dos seus 4 ângulos internos, q são iguais a 90 graus, ou seja, 4 ângulos retos (reto + ângulo = retângulo). Todavia é possível criar retângulos de cantos arredondados e até um círculo a partir de um quadrado! Para tanto, basta inserir de 1 a 4 valores após os 4 primeiros usados na criação de um retângulo, ou seja, é possível declarar até 8 valores dentro dos parênteses do comando rect()! A sintaxe é a seguinte:

rect (x, y, l, a, se, sd, id, ie);

se = raio do canto superior esquerdo;
sd = raio do canto superior direito;
id = raio do canto inferior direito;
ie = raio do canto inferior esquerdo;

retangulos_4
O comando rect() admite até 8 valores dentro dos parênteses. Os 4 últimos dizem respeito ao raio dos 4 cantos do retângulo

Para desenhar um círculo a partir de um retângulo, basta repetir os valores da largura e altura e declarar mais um valor correspondente à metade da largura (q será o raio q “arrendondará” os 4 cantos do retângulo).

retangulos_6
Um jeito diferente (mas não muito prático) de construir um círculo usando o comando rect()

E assim encerramos esta “unidade de apresentação”. Nas postagens seguintes, antes de passar para um nível mais avançado e falar sobre outros comandos de p5, vou sugerir alguns desafios e realizar alguns exercícios provando q o conteúdo visto até agora já nos permite criar coisas bem interessantes.

No instagram eu criei um perfil chamado CodingP5 (desculpem, mas a palavra em inglês fica mais sonora). Lá eu postarei coisas mais rápidas sobre p5, aproveitando q é uma plataforma mais dinâmica. Meu passo seguinte será criar um canal no YouTube para migrar essas postagens de texto para o formato de vídeo. Foi interessante ter escrito os posts no meu blog pois servirão de roteiro para mim na hora de filmar.

Também foi muito gratificante ter parado e me desafiado a colocar “no papel” conteúdos q venho estudando de forma livre. Este exercício me fez “aterrar” o conhecimento e criar um percurso, uma trajetória a ser seguida, bem como estudar de forma mais disciplinada. A jornada é longa, mas será divertida.

E como diz aquele desenho animado: por hoje é só, pessoal!

1.10 “Retangulando”