Conteúdo principal
Programação
Curso: Programação > Unidade 5
Lição 6: Movimento AngularCoordenadas polares
Toda vez que desenhamos uma forma em ProcessingJS, temos que especificar uma posição de pixel, um conjunto de coordenadas
x
e y
. Estas coordenadas são chamadas de coordenadas Cartesianas, batizadas por René Descartes, o matemático francês que desenvolveu as ideias por trás do plano Cartesiano.Outro sistema de coordenadas útil, conhecido como coordenadas polares, descreve um ponto no espaço como um ângulo de rotação ao redor da origem e um raio a partir dela. Pensando nisso nos termos de um vetor:
- Coordenada cartesiana — as componentes x,y de um vetor
- Coordenada polar — a magnitude (comprimento) e direção (ângulo) de um vetor
Entretanto, as funções de desenho em ProcessingJS não entendem coordenadas polares. Sempre que queremos exibir alguma coisa em ProcessingJS, precisamos especificar os lugares como (x,y) em coordenadas cartesianas. No entanto, às vezes é muito mais conveniente pensarmos em coordenadas polares ao projetar. Felizmente para nós, com a trigonometria, podemos converter de um lado para o outro entre polar e cartesiano, o que nos permite projetar com o sistema de coordenadas que temos em mente, mas sempre desenhar com coordenadas cartesianas.
A letra grega θ (teta) é usada frequentemente para simbolizar um ângulo, dessa forma, uma coordenada polar pode ser mencionada convenientemente como (r, θ) ao invés de (x, y). Portanto, a partir de agora, quando trabalharmos com coordenadas polares usaremos "teta" como nome preferencial para o ângulo.
seno(teta) = y/r → y = r * seno(teta)cosseno(teta) = x/r → x = r * cosseno(teta)
Por exemplo, se
r
for igual a 75 e teta
igual a 45 graus (ou PI/4 radianos), podemos calcular x
e y
seguindo o que temos abaixo. As funções de seno e cosseno em ProcessingJS são sin()
e cos()
, respectivamente. Cada uma recebe um argumento, um ângulo medido em graus.var r = 75;
var theta = 45;
// Convertendo polar para cartesiano
var x = r * cos(theta);
var y = r * sin(theta);
Esse tipo de conversão pode ser útil em algumas aplicações. Por exemplo, mover uma forma em um caminho circular usando coordenadas Cartesianas não é tão fácil. Por outro lado, com as coordenadas polares, isso é simples: aumente o ângulo!
Veja como podemos fazer uma forma giratória simples usando a conversão de coordenada polar:
Este curso "Natural Simulations" é um derivado do "The Nature of Code" por Daniel Shiffman, usado sob a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Quer participar da conversa?
- como seria representado qualquer ponto no eixo y em coordenadas esfericas?(4 votos)
- se você colocar r*sin(theta)*sin(phi) vc terá y em esféricas matematicamente falando devido as projeções, agora se vc se refere como programar em esféricas reajustando a "profundidade" aí não sei(1 voto)
- pergunta como faz um objeto rodar em volta de si mesmo?(3 votos)
- tem no khan academy na parte de como rotacionar e transladar as figuras, JavaScript Avançado: Jogos & Visualizações, depois em transformações lá ele ensina como rotacionar em torno de um lugar ou transladar o referencial(1 voto)