Rotação
Outra transformação geométrica fundamental é a rotação, que gira o sistema de coordenadas em torno da origem. Assim como a translação, ela não gira a forma diretamente, mas sim o referencial em que a forma será desenhada. Tudo o que vier depois do comando aparecerá girado.
O comando rotate(angulo) recebe um único parâmetro, que é o ângulo de rotação. Por padrão, o p5.js interpreta esse valor em radianos, não em graus. Para facilitar, você pode usar a função radians() para converter um valor em graus, ou empregar diretamente constantes como PI e HALF_PI. A rotação acontece sempre em torno da origem atual do sistema de coordenadas, que fica no canto superior esquerdo caso nenhuma translação tenha sido aplicada.
Estrutura básica
rotate(radians(anguloEmGraus));
// formas desenhadas aqui aparecem giradas
Exemplo
Para um exemplo de como utilizar esse comando, teste o Código 4.2 e veja o retângulo inclinado.
function setup() {
createCanvas(800,600);
translate(400,300);
rotate(radians(30));
rect(0,0,200,100);
}
translate() antes do rotate() para posicionar a origem no ponto em que você deseja que o giro aconteça. No exemplo, movemos a origem para o centro do canvas antes de girar, fazendo com que a rotação parta desse ponto, e não do canto da tela.Experimente trocar radians(30) por outros ângulos, ou usar diretamente valores como PI/4 (equivalente a 45 graus) e PI (equivalente a 180 graus). Você também pode alterar o modo de interpretação dos ângulos com o comando angleMode(DEGREES), o que permite passar valores em graus sem a conversão. A ordem entre translate() e rotate() altera o resultado final, então vale a pena testar as duas sequências. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.