Vetores Em Todos Os Lugares

Eu pensei que nunca mais usaria planos cartesianos na vida.

Não me leve a mal, mas quando ainda estava no colégio alguns assuntos eram díficies para mim, como química orgânica, planos cartesianos e nomes de nuvem.

Mas aqui estou, fazendo normalização de vetores, descobrindo suas magnitudes e fazendo aritmética básica com eles. Tudo isso é culpa do incrível livro The Nature of Code de Daniel Shiffman. Este post é minha tentativa de passar o que aprendi.

Você pode conferir a postagem do capítulo anterior.

Vetores

Minha triste tentativa de criar uma abelha (círculo amarelo) sendo perseguida por um pássaro (triângulo azul) em um campo verde (Source Code)

O termo vetor pode ter várias definições, mas vamos focar no vetor euclidiano, uma entidade com um tamanho e uma direção. Matematicamente, esse tamanho é chamado de magnitude.

Vetores aparecem em muitos contextos, como 2D, 3D, machine learning e análise de dados. Mas aqui vamos nos restringir ao 2D (duas dimensões).

Tipicamente podemos representar um vetor através de uma seta:

Mas, como podemos posicionar esses pontos em um espaço bidimensional?

Usando um plano cartesiano. A representação é assim: (3,5), onde 3 é a coordenada no eixo X e 5 no eixo Y.

O vetor fornece as instruções para sair da origem (0,0) e chegar ao ponto desejado, neste caso, (3,5).

Mas, como podemos representar vetores no p5.js?

A diferença é que a origem (0,0) no p5.js é representada no canto superior esquerdo:

A ideia no p5.js é que, a cada quadro da animação (draw), possamos mover nosso objeto uma certa distância vertical e horizontal. Isso é um vetor, com magnitude (tamanho da distância) e direção. Em outras palavras, um vetor define a velocidade do objeto.

Se você não entendeu nada do que eu disse, recomendo que você leia o post do capítulo anterior ou consulte diretamente o livro The Nature of Code (NOC) de Daniel Shiffman.

Mas, como podemos modificar a velocidade de um objeto através de um vetor?

Através de operações com vetores.

Operações com Vetores

Podemos realizar as principais operações aritméticas com vetores: adição, subtração, divisão e multiplicação. O NOC já explica essas operações em detalhes, então vou apenas resumir.

A adição de dois vetores resulta em um novo vetor com a soma das magnitudes. A subratração, retorna a diferença entre dois vetores.

Bola se movimentando através de vetores (Source Code)

Primeiro, criamos dois vetores, um para posição e outro para a velocidade:

function setup() {
  position = createVector(100, 100);
  velocity = createVector(3, 3);

  createCanvas(widthFormat, heightFormat);
  background(255);
}

Depois, somamos a velocidade à posição e desenhamos a elipse na tela:

function draw() {
  position.add(velocity);
  circle(position.x, position.y, ballSize);
}

Esses dois passos juntos formam o conceito básico de movimento, chamado Motion 101.

Porém, essa movimentação não faz muita coisa, vamos acelerar.

Aceleração

A aceleração é a taxa de mudança da velocidade. É um vetor que altera a velocidade, que por sua vez altera a posição, como um efeito cascata:

velocity.add(acceleration);
position.add(velocity);

Por fim, o código abaixo cria uma elipse que acelera na direção do mouse:

Bola acelerando na direção do mouse (Source Code)

Chegamos ao fim dos vetores, por diversas vezes me peguei pensando em como um punhado de códigos simples pode gerar coisas tão incriveis.

Agora que entendo um pouco sobre aleatoriedade e movimento, as coisas estão começando a ficar interessantes.