Obrigado por visitar a The Game Makers Brasil 😁 Use o fórum de Dúvidas para fazer perguntas. Se está em busca de aprender dê uma olhada nos tutoriais.

[Artigo] Usando Matemática - Aprendendo a visualizar

Anúncios, Sugestões, Apresentações, Negócios e outras discussões.
Avatar do usuário
Kabeção
Novato
Novato
Reações: 0
Mensagens: 6

[Artigo] Usando Matemática - Aprendendo a visualizar

Mensagem por Kabeção » 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.
Imagem

Avatar do usuário
All-x
Administrador
Administrador
Reações: 8
Mensagens: 621
Localização: Dourados-MS

Contato:

Re: [Artigo] Usando Matemática - Aprendendo a visualizar

Mensagem por All-x » Seg Jun 27, 2016 2:51 pm

Realmente Kabeção, essa fobia de matemática prejudica demais quando se aprende cálculos. Lógico que não estamos falando de abstrair o conhecimento matemático, mas elevar o modo que o enxergamos a um outro nível.

Na caixa de pesquisa da Google também é possível ver esse tipo de resultado gráfico ao pesquisar uma expressão simples como x = y e etc.

Geralmente quando se fala em cálculos e matemática você nota imediatamente a cara de desanimo da pessoa. Talvez se fosse mostrado resultados de forma gráfica e com aplicações, a gente não ouviria tanto "Onde vou usar isso na minha vida?". Exemplos nos jogos simples não faltam: "Fixar a arma no braço do jogador", "Fade in-Out repetitivo", "Sistema de bones" e etc....

Enfim, é um assunto que se tratado de forma criativa como você fez pode "Tirar o monstro da jaula". haha

Ótimo artigo.

FLWS!
Começando com o Game Maker? Olhou para assinatura certa!

Imagem

Tutoriais e vídeo aulas de programação! Clique no Banner e confira!

Avatar do usuário
lukbebalduke
Membro
Membro
Reações: 0
Mensagens: 44
Localização: Curitiba

Contato:

Re: [Artigo] Usando Matemática - Aprendendo a visualizar

Mensagem por lukbebalduke » Seg Jun 27, 2016 7:18 pm

Interessante. Me lembrou ontem, quando estava com esse site aberto, mas curiosamente usando para outra coisa.

Não só se pode obter movimentos e curvas interessantes com esses gráficos, mas progressões interessantes, estava estudando sobre como deveria funcionar o sistema de level up do jogador dentro dum jogo, para garantir que o jogador tivesse a melhor experiencia, e percebi num dos tópicos que lia que funções de log são otinas para representar progressão de level.

Imagem

Brincar com as funções pode nos trazer progressões curiosas.

Do mais; excelente post.
Abraço 

Avatar do usuário
Kabeção
Novato
Novato
Reações: 0
Mensagens: 6

Re: [Artigo] Usando Matemática - Aprendendo a visualizar

Mensagem por Kabeção » Seg Jun 27, 2016 10:38 pm

"Onde vou usar isso na minha vida?" Deu uma nostalgia. Você só descobre o uso depois que termina a escola. É realmente uma pena.
Certas vezes usei o Google para criar gráficos 3D para visualizar o resultado de um shader. Exemplo: https://www.google.com.br/#q=z+%3D+sin(x)+%2B+cos(x)+*+sqrt(x*y)
Essas calculadoras gráficas são muito úteis.
Imagem

Responder

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 0 visitante