Retângulos
Uma das formas geométricas mais utilizadas em desenhos digitais é o retângulo. No p5.js, essa forma é criada com o comando rect(), que permite desenhar tanto retângulos quanto quadrados de maneira simples e direta.
O comando rect(x, y, w, h) recebe quatro parâmetros. Os dois primeiros (x e y) indicam a posição do canto superior esquerdo do retângulo. Os dois últimos (w e h) indicam, respectivamente, a largura (width) e a altura (height) da forma. Quando a largura e a altura são iguais, obtemos um quadrado.
Estrutura básica
rect(x, y, largura, altura);
Exemplo
Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja as figuras formadas.
function setup() {
createCanvas(800,600);
rect(100,100,300,150);
rect(500,300,150,150);
}
rectMode(). Com rectMode(CENTER), os parâmetros x e y passam a indicar o centro da forma, em vez do canto superior esquerdo. Isso facilita quando você deseja centralizar um retângulo em uma posição específica.Experimente adicionar dois parâmetros extras ao comando, como rect(100,100,300,150,20), e veja que o quinto valor arredonda os cantos do retângulo. É possível ainda informar quatro valores diferentes para arredondar cada canto individualmente, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.