Conteúdo principal
Curso: Programação > Unidade 5
Lição 4: Vetores- Introdução aos vetores
- Mais matemática de vetores
- Magnitude e normalização de vetores
- Movimento de vetores
- Funções estáticas vs. métodos de instância
- Movimento interativo de vetor
- Desafio: Rastreador de mouse
- Projeto: Criaturas computacionais
© 2024 Khan AcademyTermos de usoPolítica de privacidadeAviso de cookies
Introdução aos vetores
Este curso fala sobre como olhar o mundo ao nosso redor e propor maneiras perspicazes de simulá-lo com código. Começaremos com a física básica—como uma maçã cai da árvore, como um pêndulo balança no ar, como a terra circunda o sol, etc. Tudo que discutiremos aqui requer o uso do bloco de construção mais básico da programação de movimento—o vetor. E, portanto, é com ele que nossa história começa.
A palavra vetor (do inglês, "vector") pode significar inúmeras coisas diferentes. Vector é o nome de uma banda de rock New Wave formada em Sacramento, Califórnia, no começo da década de 80. É, também, o nome de um cereal matinal fabricado pela Kellogg's Canadá. Na epidemiologia, um vetor descreve um organismo capaz de transmitir uma infecção de um hospedeiro para outro. Na linguagem de programação C++, um vetor (std::vector) é uma implementação de uma estrutura de dados em array redimensionável. Ao passo que todas essas definições são interessantes, elas não são o que estamos procurando. O que queremos é chamado de vetor euclidiano (por causa do matemático grego Euclides, e também conhecido como vetor geométrico). Quando você vir o termo "vetor" nesse curso, pode assumir que ele se refere a um vetor euclidiano, definido como uma entidade que possui magnitude e direção.
Um vetor normalmente é desenhado na forma de uma seta; a direção é indicada por onde a seta está apontando e a magnitude pelo comprimento da própria seta.
Na ilustração acima, o vetor está desenhado na forma de uma seta do ponto A para o ponto B e apresenta uma instrução de como deslocar-se de A para B.
Por que usar vetores?
Antes de mergulharmos em maiores detalhes sobre vetores, vamos olhar um programa básico que demonstra por que nós devemos nos importar com eles, primeiramente. Se você passou pelo curso introdutório de JS aqui na Khan Academy, você provavelmente, em algum momento, aprendeu como escrever um programa para uma simples bola que quica.
No exemplo acima, nós temos um mundo muito simples—um fundo branco com uma forma circular (uma "bola") em movimento aleatório. Essa bola tem algumas propriedades, que estão representadas no código como variáveis.
| Posição | Velocidade |
|---|---|
| x e y | xSpeed e ySpeed |
Em um programa mais avançado, poderíamos ter muito mais variáveis:
| Aceleração | Posição alvo | Vento | Atrito |
|---|---|---|---|
| xacceleration e yacceleration | xtarget e ytarget | xwind e ywind | xfriction e yfriction |
Fica cada vez mais claro que, para cada conceito do mundo real (vento, localização, aceleração, etc.), precisaremos de duas variáveis. E esse é apenas um mundo bidimensional. Em um mundo tridimensional, precisaremos de
x, y, z, xspeed, yspeed, zspeed, e assim por diante.Não seria legal se pudéssemos simplificar nosso código e usar menos variáveis?
Ao invés de:
var x = 5;
var y = 10;
var xSpeed;
var ySpeed;Poderíamos simplesmente ter duas variáveis, sendo que cada variável é um objeto na forma de vetor com duas dimensões de informação:
var position;
var speed;Tomando este passo inicial na utilização de vetores não nos permitirá fazer qualquer coisa nova. Só usar objetos similares a vetores para as nossas variáveis não vai fazer o nosso programa magicamente simular a física. No entanto, eles vão simplificar o seu código e provir um conjunto de funções para operações matemáticas comuns que são recorrentes dentro da programação de movimentos.
Para uma introdução aos vetores, vamos viver em um mundo de duas dimensões. Todos esses exemplos podem ser justa e facilmente estendidos a três dimensões (e o objeto que utilizaremos—
PVector—permite três dimensões). Contudo, é mais fácil começar com apenas duas.Programação com PVector
Uma maneira de se pensar em um vetor é na diferença entre dois pontos. Considere como se você pudesse dar instruções para ir de um ponto a outro.
Eis alguns vetores e possíveis traduções:
| (-15, 3) | Andar quinze passos para o oeste; virar e andar três passos para o norte. |
| (3, 4) | Andar três passos para o leste; virar e andar quatro passos para norte. |
| (2, -1) | Andar dois passos para o leste; virar e andar um passo ao sul. |
Você provavelmente já fez isto antes quando programou movimentos. Para cada quadro da animação (isto é, um único ciclo por meio do ProcessingJS’s draw() loop), você instrui cada objeto na tela a se mover um certo número de pixels horizontalmente e um certo número verticalmente.
Para cada quadro:
nova posição = velocidade aplicada à posição atual
Se a velocidade é um vetor (a diferença entre dois pontos), o que é a posição? É um vetor também? Tecnicamente, pode-se argumentar que a posição não é um vetor, dado que ela não descreve como mover de um ponto a outro—ela simplesmente descreve um ponto singular no espaço.
No entanto, uma outra forma de descrever uma posição é o caminho percorrido desde a origem para chegar a essa posição. Isso significa que uma posição pode ser o vetor que representa a diferença entre a posição e a origem.
Vamos examinar os dados subjacentes para a posição e para a velocidade. No exemplo da bola quicando, tínhamos o seguinte:
| Posição | Velocidade |
|---|---|
| x e y | xSpeed e ySpeed |
Observe como nós estamos armazenando a mesma informação para ambos—dois números reais, um
x e um y. Se fôssemos escrever uma classe de vetores independentemente, começaríamos com algo bastante básico:var Vetor = funcao(x, y) {
este.x = x;
este.y = y;
};Em sua essência, um
PVector é apenas uma maneira conveniente de armazenar dois valores (ou três, como veremos nos exemplos 3D).E então isto …
var x = 100;
var y = 100;
var xSpeed = 1;
var ySpeed = 3.3;torna-se …
var position = new PVector(100,100);
var velocity = new PVector(1,3.3);Agora que temos dois objetos vetoriais (posição e velocidade), estamos prontos para implementar um algoritmo para o movimento—posição = posição + velocidade. No Exemplo 1.1, sem vetores, tínhamos:
x = x + xSpeed;
y = y + ySpeed;Em um mundo ideal, seríamos capazes de reescrever o que está acima da seguinte maneira:
position = position + velocity;Entretanto, em JavaScript, o operador de adição + é reservado apenas para valores primitivos (números, strings). Em algumas linguagens de programação, operadores podem ser "sobrecarregados", mas não em JavaScript. Para a nossa alegria, o objeto
PVector inclui métodos para operações matemáticas comuns, como add().Adição de Vetores
Antes que continuemos olhando o objeto
PVector e o seu método add(), vamos examinar a adição de vetores usando a notação encontrada em livros-texto de matemática e física.Vetores são tipicamente escritos tanto em negrito ou com uma seta sobre eles. Para efeitos destas lições, para distinguir um vetor de um escalar (escalar se refere a um valor individual, como um número inteiro ou real), nós usaremos a notação da seta:
- Vetor:
- Escalar:
Digamos que eu tenho os dois seguintes vetores:
Cada vetor possui dois componentes, um
x e um y. Para somar dois vetores, basta adicionarmos os dois xs e ys.Em outras palavras:
pode ser escrito como:
Então, substituindo
u e v com os seus valores da Figura 1.6, temos:o que significa que:
Por fim, escrevemos isso na forma de um vetor:
Agora que entendemos como somar dois vetores, podemos olhar como a adição é implementada no objeto
PVector propriamente. Vamos escrever um método chamado add() que toma um outro objeto PVector como seu argumento e simplesmente soma as suas componentes x e y.var Vector = function(x, y) {
this.x = x;
this.y = y;
};
Vector.prototype.add = function(v) {
this.y = this.y + v.y;
this.x = this.x + v.x;
};Agora que vimos como
add() é escrita dentro de PVector, podemos voltar ao nosso exemplo da bola quicando com seu algoritmo de posição + velocidade e implementar a soma de vetores:position.add(velocity);E agora estamos prontos para reescrever o exemplo da bola quicando utilizando o objeto
PVector! Dê uma olhada no código e note as diferenças de antes.Devemos observar um aspecto importante da transição acima para a programação com vetores. Apesar de estarmos usando objetos
PVector para descrever dois valores—o x e y da posição e o x e y da velocidade—ainda precisaremos nos referir às componentes x e y de cada PVector individualmente com certa frequência. Quando vamos desenhar um objeto em ProcessingJS, não podemos escrever o código desta forma:ellipse(position, 16, 16);A função
ellipse() não aceita um PVector como argumento. Uma elipse só pode ser desenhada com dois valores escalares; uma coordenada x e uma y. Portanto devemos extrair as componentes x e y do objeto PVector, usando a notação orientada a objeto em vez disso:ellipse(position.x, position.y, 16, 16);O mesmo problema aparece quando testamos se o círculo chegou ao canto da janela e precisamos acessar as componentes individuais:
position e velocity (posição e velocidade).if ((position.x > width) || (position.x < 0)) {
velocity.x = velocity.x * -1;
}Agora, você pode estar um pouco decepcionado. Afinal, a princípio pode parecer que essa mudança para o uso de vetores tenha tornado o código mais complicado do que a versão original. Embora isso seja uma crítica perfeitamente razoável e válida, é importante entender que ainda não percebemos todo o poder de programação com vetores. Olhar para uma simples bola quicando e implementar uma soma de vetores é apenas o primeiro passo.
Conforme avançarmos para um mundo mais complexo, com vários objetos e várias forças (o que será introduzido em breve), os benefícios de
PVector se tornarão mais evidentes. Continue em frente!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?
No segundo código da bola que quica, apareceram as palavras "width" e "height" representando valores como uma variável, mas elas não foram declaradas, o que isso significa?(1 voto)
São variáveis internas que representam altura e largura do canvas (tela branca onde os desenhos aparecem)(1 voto)
Olá! Alguém conseguiu fazer o "Desafio: Walker com vetor"? Não estou conseguindo passar dele.
Hello! Has anyone been able to do the "Challenge: Walker with vector"? I can not get past him.(1 voto)