Escala
A terceira transformação geométrica essencial é a escala, que aumenta ou reduz o tamanho das formas ao esticar ou comprimir o sistema de coordenadas. Novamente, o que muda é o referencial de desenho, e não a forma em si: uma mesma figura pode aparecer maior ou menor dependendo do fator de escala aplicado.
O comando scale(fator) multiplica as coordenadas seguintes pelo valor informado. Um valor 2 dobra o tamanho, enquanto 0.5 reduz o tamanho pela metade, e 1 mantém o tamanho original. Também é possível passar dois parâmetros, como scale(2, 0.5), para aplicar fatores diferentes nas direções horizontal e vertical, o que distorce a forma proporcionalmente em cada eixo.
Estrutura básica
scale(fator);
// ou com fatores diferentes por eixo:
scale(fatorX, fatorY);
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,100,100);
translate(300,200);
scale(2);
rect(50,50,100,100);
}
strokeWeight(). Ao aplicar scale(2), uma borda de dois pixels passa a ser desenhada com quatro pixels. Se você quiser manter a espessura constante independentemente da escala, será necessário ajustar o strokeWeight() manualmente.Experimente usar um valor negativo, como scale(-1, 1), e veja que a forma é espelhada horizontalmente, pois a coordenada horizontal passa a crescer no sentido oposto. Esse recurso é bastante útil para criar reflexos ou inverter desenhos sem precisar recalcular todas as coordenadas. Como as demais transformações, a escala é cumulativa, então combiná-la com push() e pop() ajuda a controlar até onde seu efeito se aplica. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.