Cisalhamento

Além de transladar, girar e escalar, o p5.js permite aplicar uma transformação chamada cisalhamento, também conhecida como inclinação. Ela distorce o sistema de coordenadas empurrando um dos eixos em uma direção, transformando retângulos em paralelogramos e criando um efeito de perspectiva ou movimento.

Existem dois comandos para isso. O shearX(angulo) inclina as formas ao longo do eixo horizontal, enquanto o shearY(angulo) inclina ao longo do eixo vertical. Ambos recebem um ângulo que, por padrão, é interpretado em radianos, seguindo a mesma lógica da rotação. Quanto maior o ângulo, mais acentuada será a inclinação aplicada às formas desenhadas em seguida.

Estrutura básica

shearX(radians(anguloEmGraus));
// ou, para inclinar na vertical:
shearY(radians(anguloEmGraus));

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(250,200);
  shearX(radians(30));
  rect(0,0,200,150);
}

Experimente combinar shearX() e shearY() na mesma forma e observe como as inclinações se acumulam, gerando distorções mais complexas. Esse recurso é útil para simular itálico em desenhos, criar sombras projetadas ou dar sensação de profundidade. Assim como as outras transformações, o cisalhamento é cumulativo e afeta apenas os comandos posteriores, então vale usar push() e pop() para delimitar seu alcance. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.