[Artigo] Usando Matemática - Aprendendo a visualizar
Enviado: Seg Jun 27, 2016 1:13 pm
Olá, estou planejando um projeto e queria compartilhar os primeiros passos por aqui.
A situação está difícil. Desempregados reclamam da falta de emprego e empregadores da falta de gente para trabalhar. Mas não é hora de reclamar. É hora de começar a desenvolver material para fazer os concorrentes progredirem e um dia se tornarem futuros parceiros de trabalho e/ou retornar o favor criando mais informação.
Uns dos principais problemas quanto a quem quer desenvolver jogos (além de negligenciar o inglês) é a habilidade no uso da matemática. Esse é um ponto em que muita gente peca na hora de se destacar.
Usando matemática - Aprendendo a visualizar
O objetivo desde artigo é mostrar como uma mudança na maneira de pensar pode lhe dar uma poderosa ferramenta para seu trabalho.
Se artistas usam pinceis para polir suas artes, programadores usam matemática para polir seus jogos.
Com ela você consegue criar efeitos dinâmicos e diversos com poucas linhas de código além de poder ser aplicada em diversas áreas como game design e arte.
Se livrando da lavagem cerebral
Primeiro você deve se livrar tanto do medo indiscriminado quanto da maneira que a maioria das pessoas usam a matemática. O mais importante não são os resultados numéricos, mas como você os visualiza.
Computadores são excelentes fazendo cálculos. De fato, tudo acontecendo no sistema operacional e até mesmo no hardware são resultado de cálculos feitos a uma grande velocidade. No entanto, eles não conseguem lidar com conceitos. Informações abstratas, ideias ou fazer uso das visualizações que desenham.
Humanos, por outro lado, são ótimos com conceitos. Nós conseguimos compreender noções gerais e aplicar em diversos lugares, desenvolver ideias e fazer uso de visualizações. No entanto, uma simples conta de multiplicação é o suficiente para nos fazer pensar por um longo período e ainda dar uma resposta incerta.
Mesmo assim, o sistema escolar (no mundo inteiro) insiste em focar o estudo nas contas, resultados numéricos e exatos. Isso gera uma fobia na maioria dos estudantes e transforma a matéria em sinônimo de estresse e incompreensão.
Coloque os números em segundo plano e deixe as contas para o computador. Comece a pensar usando conceitos e representações visuais.
A calculadora gráfica
Vamos então ao mais simples e direto modo de visualizar funções: a calculadora gráfica. Nesse artigo, usaremos o aplicativo online Desmos.
O conceito dele é bem simples. Tente a formula: y = x.
O gráfico desenha o ponto x em sequência (linearmente) e o ponto y com o resultado da função que você descreveu.
Para cada ponto x, y é igual a x, ou seja, (0, 0), (1, 1), (2, 2), (3, 3) e por aí vai. O resultado é uma rampa.
Agora tente uma parábola, mas dessa vez, escrita como uma função. f(x) = x^2. Funciona da mesma forma que na programação, para cada argumento x, o resultado é x^2.
Nós podemos transformar esse gráfico com contas básicas. Por exemplo, para escalar no eixo x: r(x) = f(x/2). Agora y “se move” duas vezes mais lento que x.
Escalar no eixo y: r(x) = f(x)/2, mover no eixo x: r(x) = f(x+2) e mover no eixo y: r(x) = f(x)+2.
Com esse aplicativo, podemos até criar controles para todas essas operações:
Tente usar outras funções além da parábola, como por exemplo, cosseno: f(x) = cos(x).
Qualquer gráfico pode ser transformado.
Pensando em conceitos, rascunhando formulas e implementando efeitos
Digamos que eu tenha um objeto que fique sempre na posição do mouse.
Mas isso não é muito interessante. Eu queria faze-lo se mover em ziguezague em torno do ponto, mas não sei ao certo como o efeito vai ficar ou como implementar.
Na hora de projetar efeitos criados dinamicamente por código, a calculado gráfica é uma ótima ajudante.
Qualquer coisa complexa é feita a partir de partes menores. Carros, casas, computadores, cidades. Não é diferente com programação. Vamos pensar em um passo de cada vez, transformar materiais, juntar peças e por fim, terminar com um resulto complexo.
Primeiro quero faze-lo rodar em torno do mouse. Bom, isso é simples, basta ter um ângulo e funções que podem “descrever” um círculo: (cos(a), sin(a))
Esse círculo está muito pequeno. Vou escalar o gráfico usando uma variável w: (cos(a)*w, sin(a)*w).
Agora quero algum tipo de ziguezague. Cosseno é uma função que consegue desenhar ondulações. Vamos criar uma nova função: f(x)=cos(x).
Mas isso é muito simples. Vamos distorcer essa ondulação multiplicando com diferentes ondulações. f(x) = cos(x) * cos(x*2 * cos(x*0.5))
Círculos são formas muito interessantes e úteis. O movimento que você pode fazer na superfície dele é infinito, pois a última posição é também a posição de partida. Podemos usar essa propriedade do círculo para distorcer a distância do objeto sem que haja defeitos e faltos entre o começo e o fim do movimento.
Repare que o resultado mínimo da ondulação (ângulo 0) é 1 e o resultado máximo (pi) é -1. Mas eu quero que a distância vá de 50% a 150%, ou seja, 0.5 a 1.5, por isso precisamos transformar esse gráfico para fazer com que o mínimo e o máximo resultado sejam esses valores. Isso é muito simples. Basta encolhe-lo pela metade e subir um ponto no eixo y. f(x) = cos(x) * cos(x*2 * cos(x*0.5)) * 0.5 + 1.
Agora podemos distorcer a distância aproveitando nossa variável a: (cos(a) * f(a)*w, sin(a) * f(a)*w).
Pronto. Projetamos um movimento um pouco mais interessante para nosso objeto. Agora basta implementar seja lá qual for sua game engine. É apenas matemática.
Código: Selecionar todos
angle += 0.05;
if (angle >= pi*2)
angle = 0;
w = 128;
var fx = cos(angle) * cos(angle*2*cos(angle*0.5)) * 0.5 + 1;
x = mouse_x + cos(angle) * fx*w;
y = mouse_y - sin(angle) * fx*w;Conclusão
Fizemos um pequeno e rápido movimento irregular para um objeto usando ondas e círculos graças a trigonometria. Imagine programar esse ziguezague manualmente... Usando declarações condicionals, timelines, paths, perdendo horas e ainda acabando com um resultado que não é ajustável nem escalável.
Matemática para computação gráfica é isso. Você pega algo e transforma em outro.
A rampa em y = x ou a ondulação em f(x) = cos(x), por exemplo, podem ser vistas como o resultado da distorção de uma simples linha, ou seja, f(x) = x.
Jogos são um processo de transformação entre diversas dimensões. Para se renderizar um modelo 3D, por exemplo, você precisa usar transformações 4D para distorcer pontos 3D e distorcer novamente para formar imagens 2D no monitor. Esse aspecto multidimensional dos jogos não é ficção cientifica nem mágica. É penas o uso da matemática para transformação.
Os usos vão de simples padrões de movimento a vastas e detalhadas vegetações procedurais em filmes e animações.
Não só para gráficos, mas também diversas outras coisas, como por exemplo, a dificuldade e o número de monstros em cada nível de um jogo tower defender pode ser decida assim: https://www.desmos.com/calculator/r36wmfvhrr
Espero que essa introdução lhe coloque no caminho certo e que você comece a ter mais sonhos do que pesadelos com essa matéria.
Até mais.
Não só para gráficos, mas também diversas outras coisas, como por exemplo, a dificuldade e o número de monstros em cada nível de um jogo tower defender pode ser decida assim: https://www.desmos.com/calculator/r36wmfvhrr
Espero que essa introdução lhe coloque no caminho certo e que você comece a ter mais sonhos do que pesadelos com essa matéria.
Até mais.
