Conteúdo principal
Programação
Tradução
Quando você cria um programa usando ProcessingJS, a saída é desenhada em uma tela que funciona como um pedaço de papel quadriculado. Para desenhar uma forma, você especifica as coordenadas nesse papel quadriculado.
Como exemplo, temos aqui um retângulo simples desenhado com o código
rect(20, 20, 40, 40). O sistema de coordenadas (uma expressão mais chique para descrever o "papel quadriculado") é mostrado em cinza, e para manter as imagens do nosso exemplo menores, o sistema de coordenadas mostrado tem 200x200 pixels, (ao invés do tamanho padrão, 400x400). Aqui você pode ver que o retângulo está em x=20, y=20, com largura e altura 40:Se você quiser mover o retângulo 60 unidades para a direita e 80 unidades para baixo, você pode simplesmente alterar as coordenadas, adicionando aos valores de
x e y iniciais: rect(20 + 60, 20 + 80, 40, 40) e o retângulo vai aparecer em um lugar diferente. (Colocamos a seta ali apenas como efeito de ilustração).Mas há uma maneira mais interessante de fazer isso: mover o papel quadriculado. Se você mover o papel quadriculado 60 unidades para a direita e 80 unidades para baixo, você vai ter exatamente o mesmo resultado visual. Moving the coordinate system is called translation.
O importante para se notar no diagrama anterior é que, considerando a posição do retângulo no sistema, ele não se mexeu. Seu canto superior esquerdo ainda está em (20,20). Quando você usa transformações, as formas que você desenha nunca alteram de posição; o sistema de coordenadas sim.
Aqui temos um programa que desenha o retângulo original, e então o desenha em vermelho na nova posição mudando suas coordenadas, e depois o desenha em azul na nova posição, mas movendo o sistema de coordenadas (usando
translate()). As cores de preenchimento são translúcidas para que você possa ver que o azul e o vermelho se sobrepõem para formar um quadrado roxo que está virtualmente no mesmo lugar. Apenas o método usado para movê-los mudou. Mexa com os números abaixo para ver com seus próprios olhos:Vamos olhar para o código da translação de forma mais detalhada.
pushMatrix() é uma função nativa que salva a posição atual do sistema de coordenadas. translate(60, 80) move o sistema de coordenadas 60 unidade para a direita e 80 unidades para baixo. rect(20, 20, 40, 40) desenha o retângulo no mesmo lugar que ele originalmente desenhava. Lembre-se, as coisas que você desenha não se movem — ao invés disso, o sistema de coordenadas se move. Por fim, popMatrix() restaura o sistema de coordenadas para o lugar que ele estava antes de você realizar a translação.Por que usar
pushMatrix() e popMatrix()? Você poderia ter feito um translate(-60, -80) para mover o sistema de volta para sua posição original. Contudo, quando você começa a fazer operações mais sofisticadas com o sistema de coordenadas, é mais fácil usar pushMatrix() e popMatrix() para salvar e restaurar os status ao invés de ter que desfazer todas as suas operações. Mais pra frente nessa seção, você vai descobrir por que essas funções parecem ter nomes tão estranhos.Qual é a vantagem?
Você pode estar pensando que pegar o sistema de coordenadas e movê-lo dá muito mais trabalho do que simplesmente adicionar às coordenadas. Para um exemplo simples como o retângulo, você está certo. Mas vamos pegar um exemplo onde
translate() pode facilitar bastante nossa vida.Aqui temos um programa que desenha várias casas. Ele usa um laço que chama uma função chamada
drawHouse(), que pega as posições de x e y do canto superior esquerdo da casa como parâmetros. Observe que a função drawHouse tem que fazer várias manipulações de parâmetro para desenhar a casa nas coordenadas dadas:E se usássemos a função
translate() ao invés de calcular as novas coordenadas? Nesse caso, o código desenha a casa no mesmo lugar toda vez, com seu canto superior esquerdo em (0, 0), e deixa que a translação faça todo o trabalho.Isso não significa que você deve usar sempre
translate() ao invés de calcular novas coordenadas. Como tantas outras coisas que ensinamos, essa é outra ferramenta em sua caixa de ferramentas, e você deve descobrir quando faz sentido usar essa nova ferramenta translate().Esse artigo é ma adaptação de Transformações 2D, de J David Eisenberg, usado sob uma licença Creative Commons Attribution-NonCommercial-ShareAlike.
Quer participar da conversa?
O desafio a seguir pede um loop:
for (var i=0; i<=400; i+=95){
pushMatrix();
translate(i+95, -11);
drawFlower(60,60);
popMatrix();
}
No lugar de 400 ele pede uma variável global de largura, para que o programa funcione em todos os dispositivos. Mas eu não sei qual é essa variável. Por favor, alguém pode me ajudar?(4 votos)
como largura é width em inglês, vc usa ele como universal
for(var i=0; i<= width; i+= 95)(3 votos)
como faço para saber todas as cordenadas?(3 votos)
Tanto as coordenadas x quanto as coordenadas y variam de 0 até 400.
Portanto você pode trabalhar somente dentro deste limite, combinando os valores separados por virgula:
(x,y) = (valor de 0 até 400, valor de 0 até 400).(2 votos)
- terminei o desafio translação mas as flores não aparecem porque?(2 votos)
- Deve ter feito algo errado, veja o exemplo: https://pt.khanacademy.org/computer-programming/derivao-de-desafio-translao/6332776912257024(0 votos)
eu fiz tudo certo no desafio: translaçao, mas aparece a seguinte mensagem:
It looks like you're using a number to represent the width of the screen. We recommend using the global variable width to represent the width of the screen. That way, your program will work no matter what size the screen is! eu sei oq isso significa mas oq ele quer q eu faça??(1 voto)
Não consigo passar dessa fase "Desafio: salvação de tradução"
var drawLevel = function(){
var babyWinston =getImage("creatures/BabyWinston");
var enemybug = getImage("cute/EnemyBug");
noStroke();
var roomMatrix = [[1,2,1,1,1,2,1,1],
[0,0,1,1,1,0,0,0],
[1,0,1,1,1,0,1,1],
[1,0,0,0,0,0,1,1],
[1,1,0,0,0,0,1,1],
[2,0,0,0,0,0,0,0],
[1,0,1,1,1,0,1,0],
[1,0,1,1,1,0,0,2]];
for(var row=0; row<roomMatrix.length; row++) {
for(var col=0; col<roomMatrix[row].length; col++) {
var id = roomMatrix[row][col];
switch(id) {
case 0:
fill(100, 150, 175);
rect(col*50,row*50,50,50);
break;
case 1:
fill(100,100, 100);
rect(col*50,row*50,50,50);
break;
case 2:
fill(100, 150,175);
rect(col*50,row*50,50,50);
pushMatrix();
scale(0.5);
image(enemybug,col*2*50,-55+row*2*50);
popMatrix();
break;
}
}
}
pushMatrix();
scale(0.75);
image(babyWinston,150,250);
popMatrix();
};
var drawRock1 = function(){
var rock = getImage("cute/Rock");
var numberone = getImage("space/1");
pushMatrix();
scale(0.5);
image(rock,0,40);
popMatrix();
pushMatrix();
scale(0.25);
image(numberone,60,240);
popMatrix();
};
var drawRock2 = function(){
var rock = getImage("cute/Rock");
var numbertwo = getImage("space/2");
pushMatrix();
scale(0.5);
image(rock,700,40);
popMatrix();
pushMatrix();
scale(0.25);
image(numbertwo,1460,240);
popMatrix();
};
var drawRock3 = function(){
var rock = getImage("cute/Rock");
var numberthree = getImage("space/3");
pushMatrix();
scale(0.5);
image(rock,100,640);
popMatrix();
pushMatrix();
scale(0.25);
image(numberthree,260,1440);
popMatrix();
};
var drawRock4 = function(){
var rock = getImage("cute/Rock");
var numberfour = getImage("space/4");
pushMatrix();
scale(0.5);
image(rock,400,240);
popMatrix();
pushMatrix();
scale(0.25);
image(numberfour,860,640);
popMatrix();
};
// Draw Level
drawLevel();
// Draw Rock #1
drawRock1();
// Draw Rock #2
drawRock2();
// Draw Rock #3
drawRock3();
// Draw Rock #4
drawRock4();
COMO eu FAÇO isso?(1 voto)
for( var i=0; i<=width; i+=66)
porque ainda fala que está errado minha primeira lição ?(1 voto)
No próximo desafio, fica pedindo para eu troca i=1+_ por i+=i, mas eu já fiz isso e de nada adianta.(1 voto)
como eu faria para desenhar várias vezes a mesma figura?(1 voto)
Caso queira utilizar o mesmo código, basta adicionar na função "drowHouse" o comando que chama a imagem, como exemplo: image(getImage("avatars/leaf-blue"), 15, 60, 10, 10);. Isso fará com que um folha azul seja impressa na mesma quantidade de vezes que a casa é impressa.(1 voto)
- Mesmo com o exemplo das casas, o translate() teve mais linhas do que o outro método...(0 votos)