Translação
Até agora, para posicionar uma forma na tela, você informava diretamente suas coordenadas. As transformações geométricas oferecem outra maneira de trabalhar: em vez de mover a forma, elas movem o próprio sistema de coordenadas em que a forma será desenhada. A primeira dessas transformações é a translação.
O comando translate(x, y) desloca a origem do sistema de coordenadas. Por padrão, a origem (ponto 0, 0) fica no canto superior esquerdo do canvas. Após um translate(200, 150), por exemplo, a origem passa a estar na posição 200, 150, e todas as formas desenhadas em seguida terão suas coordenadas calculadas a partir desse novo ponto. É importante entender que a transformação afeta apenas os comandos que vêm depois dela.
Estrutura básica
translate(deslocamentoX, deslocamentoY);
// formas desenhadas aqui usam a nova origem
Exemplo
Para um exemplo de como utilizar esse comando, teste o Código 4.2 e compare os dois retângulos.
function setup() {
createCanvas(800,600);
rect(50,50,150,100);
translate(300,200);
rect(50,50,150,100);
}
rect(50,50,150,100), mas aparecem em posições diferentes. Isso acontece porque o translate() moveu a origem entre um comando e outro. A forma não mudou; o referencial em que ela foi desenhada é que mudou.Experimente aplicar dois comandos translate() em sequência e veja que seus efeitos se somam, pois cada um desloca a origem a partir da posição em que ela já se encontrava. As transformações são cumulativas, e essa característica é o que permite construir movimentos e composições complexas. Para evitar que esse acúmulo atrapalhe, costuma-se usar os comandos push() e pop(), apresentados em outra página. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.