Animação de esqueletos em 2D

Continuando com a série de posts sobre animação de esqueletos em 2D, vou produzir uma pequena animação com um modelo aprimorado do esqueleto que usei no último artigo.

Foi usado o programa VideoPoint, que normalmente é usado em aplicações científicas. Ele permite que se marque a posição de um objeto ao longo de vários frames de vídeo, e nos dá uma lista de pontos e suas posições no intervalo com que se trabalhou. Você pode fazer um vídeo lateral como este no endereço https://www.youtube.com/watch?v=G8Veye-N0A4 e repetir o mesmo processo.

Foram marcados três pontos. Um na bacia, outro no joelho e outro no calcanhar. Dessa maneira, foi possível determinar os ângulos da coxa e da canela. Fiz um gráfico desse movimento e escolhi um trecho que parecia periódico. Este trecho está no gráfico abaixo. Os ângulos estão em graus. No programa, tive que convertê-los para radianos.

 

Caminhada

 

 

O resultado da animação é este:

Tem um pequeno lag causado pelo software de captura de vídeo. Espero que o leitor possa relevar esta pequena falha.

Foram necessárias poucas alterações no código do programa anterior. Basicamente, adicionei uma rotina que, dado um instante, retorna os ângulos das articulações correspondentes. Também adicionei código para iniciar a animação.

O código mais importante é este:

Na falta de um nome melhor, chamei a rotina de ‘movimento’. Ela está mal escrita, e se você fizer código sério, por favor, não a reproduza; não é um bom exemplo de boa programação. No entanto, é bem simples entender o que está acontecendo. Há uma sequencia de 21 instantes, e quatro ângulos correspondentes, dois para a perna esquerda e dois para a direita. As duas pernas são simétricas, então só precisei fazer um “shift” dos pontos. Usei o módulo Math::Spline, que, depois de inicializado, é capaz de interpolar os pontos e retornar um valor razoável para qualquer instante dentro do intervalo.

O código completo do programa está aqui:

A descrição do esqueleto usada para construir esta animação é este:

Concluindo, este é um exemplo bastante simples de como se faz uma animação usando dados obtidos a partir de movimentos reais. Eu usei interpolação com splines, mas para que a animação fique perfeita, o ideal é estabelecer o framerate que será usado e capturar o movimento com o intervalo entre frames correspondente. Dessa forma não é necessário gastar processamento fazendo cálculos. Também é possível recorrer a bibliotecas de animação, como as listadas na página http://alastaira.wordpress.com/2013/07/24/using-free-mocap-data-for-game-character-animation-in-unity/, mas há dois passos para usá-las: o primeiro é entender o(s) formato(s) de arquivo em que a animação está salva; o segundo é converter o movimento de 3D para 2D, já que em geral são encontrados em três dimensões.

Talvez fosse de interesse descrever o funcionamento da mistura de movimentos, como por exemplo juntar o movimento de levantar a mão com o de pular. Mas isso foge um pouco da finalidade desses textos, que é de introduzir o assunto.

Com esse artigo praticamente se fecha o assunto. Acredito que ele seja didático o suficiente para entender a ideia da animação de esqueletos. A partir de agora, é possível começar a imaginar como tudo funciona em três dimensões.

Desenho de esqueletos

Deve haver muitas maneiras de descrever a estrutura dos ossos de uma personagem para animação. Eu vou descrever algo que desenvolvi que considero simples de explicar e também de implementar.

Um osso é caracterizado por uma origem, e uma rotação. Ele pode estar ligado a outros ossos que se movimentam junto. Então podemos pensar em uma estrutura da seguinte forma:

A posição de um osso inferior é determinada em relação à origem do osso superior na estrutura. Então, ao contrário de um esqueleto orgânico, não é necessário que eles se toquem.

Também vou adicionar dois outros parâmetros, que serão uma lista de vértices de um polígono, além da cor com que devem ser desenhados. Quando se aplicar uma rotação ao osso, é necessário rotacionar todos os vértices do polígono, de maneira a que estes acompanhem o movimento do membro.

Para facilitar as coisas, escrevi uma rotina que pega essas informações de um arquivo e criam a estrutura de dados. Não vou entrar em detalhes de seu funcionamento, e não garanto que não haja problemas em sua implementação. Todavia, se o arquivo de entrada estiver no formato esperado, ela vai funcionar.

A rotina para desenhar o osso é bem simples:

É uma função recursiva, que atua sobre o osso passado como parâmetro e sobre os seus descendentes. Ela pede, como parâmetros, o osso, a posição de origem em que deve ser desenhado, e a rotação que deve ser aplicada.

Ela começa rotacionando a posição do osso em relação à origem passada como parâmetro, repete então o processo em todos os vértices do polígono que será desenhado, e então o desenha usando a função draw_polygon_filled, do SDL, com a cor definida.

Em seguida, cada osso descendente repete esse mesmo procedimento, com a diferença de que a rotação que foi recebida como parâmetro é somada com a rotação inicial do osso, e a origem é a posição do osso atual.

Para fazer a animação, basta definir programaticamente os ângulos de rotação na estrutura de dados.

O programa de exemplo completo está abaixo:

O arquivo esqueleto_exemplo.txt com a estrutura do esqueleto está abaixo:

O funcionamento da função de rotação já foi explicado em um artigo anterior. O programa é razoavelmente inteligível, e talvez não precise de maiores explicações para quem entendeu como funciona o SDL.

Depois de executá-lo, uma janela será mostrada, e basta pressionar as teclas j e k para movimentar a coxa, e i e u para movimentar a canela. A animação é toda determinada pelo usuário.

Nos próximos artigos pretendo mostrar como aplicar movimentos autônomos a essa animação, de maneira que, por exemplo, possamos replicar uma caminhada.

Rotação em 2D

Par chegar mais perto da meta de escrever um sistema de animação de ossos em duas dimensões, vai ser necessário rotacionar partes do corpo ao redor de um ponto.

A rotação em 2D é muito mais simples que em 3D. A redução da complexidade torna fácil explicar o processo, e por isso vou deixar para outra oportunidade as explicações de como fazer o mesmo em um ambiente de três dimensões.

Se você não sabe como funcionam matrizes, provavelmente não chegou ainda ao terceiro ano do ensino médio. Eu recomendo que dê uma olhada nos livros que tratem desse assunto para entender o significado do que escrevo nas próximas linhas.

A matriz de rotação em duas dimensões é

\(Rot(\theta)=\left(\begin{array}{ccc} cos \theta & -sin \theta \\ sin \theta & cos \theta \end{array}\right)\)

 

A função abaixo traduz essa conta para Perl. A função rotaciona um vetor posicionado na origem do plano (0, 0).

Isso é só a implementação da multiplicação de uma matriz de rotação por um vetor. No entanto, é possível generalizá-la, adicionando um outro vetor que indica em relação a que ponto do plano a rotação vai acontecer. Então podemos reescrevê-la passando um parâmetro que indica a posição do vetor de origem:

É simples testar. Aplicando rotações de noventa graus em vetores alinhados aos eixos, os resultados devem ser vetores alinhados aos eixos perpendiculares.

Se a variável $r for igual a [1, 2], a rotina estará correta.

Agora é possível movimentar partes do corpo de uma personagem. A ideia é bem simples. Tudo o que é necessário é determinar a posição de origem e orientação do desenho de cada membro do corpo. É disso que vou tratar no próximo artigo.

SDL e Perl

Há alguns meses venho pensando em escrever código para conseguir animar personagens no computador. Li bastante coisa, mas achei que precisava colocar a mão na massa pra entender como as entranhas desse animal funcionam. Pra isso, reduzi um pouco o escopo do problema – de 3D, passei a 2D – e comecei a maltratar o teclado.

Me surpreendi com a facilidade pra escrever programas gráficos em Perl com SDL, com os pacotes já funcionando com a versão dois da biblioteca gráfica. Com poucas linhas, sem muito trabalho, já dá pra ver a janela funcionando.

O programa mínimo para se criar uma janela é este:

Esse código cria uma janela com tamanho padrão, o título especificado, e o exit_on_quit indica que ao clicar no X da janela, a aplicação termina. Muito simples, não?

O módulo SDLx::App acelera muito o trabalho, colocando fora do caminho o código repetitivo e facilitando o acesso a funções mais úteis. Mas antes de desenhar, é importante saber que há alguns detalhes a considerar.

Como o módulo é feito primariamente para se escrever jogos, é natural que ele implemente os padrões mais usados, como o loop de jogo. O loop de jogo fica implementado no método run, e através dele são chamados alguns callbacks que precisam ser registrados anteriormente. Eles são três que podem ou não serem implementados através dos seguintes métodos:

Os nomes já dão uma ideia de suas funções. Em princípio, vou mostrar como desenhar algumas coisas.

Esse código, colocado antes do $app->run, desenha um retângulo nas coordenadas 100, 100 com tamanho 100, 200, e na cor 255,0,0 (vermelho), com canal alfa 255. Depois disso, é feito um update, que efetivamente transfere para a tela o que se preparou na linha anterior.

SDLx::App é na verdade um SDLx::Surface, que tem vários métodos para desenhar:

Novamente, os nomes podem ser muito sugestivos sobre suas respectivas funções. Uma olhada na página da documentação do módulo mostra detalhes sobre como devem ser usados.

O método para registrar o handler de evento é útil para capturar as entradas. Afinal de contas, um jogo não seria um jogo se o jogador não pudesse apertar teclas ou clicar no mouse loucamente. Um exemplo simples e mínimo está abaixo:

Através dele, é possível terminar a aplicação ao clicar em ESC. Eu poderia usar outra tecla, como ‘q’, substituindo SDLK_ESCAPE por SDLK_q.

O outro handler é o move. A ideia é que a lógica do jogo seja colocada lá. Eu vou um pouco além e, no código que escrevo, mostro como alterar valores de variaveis caso a tecla esteja pressionada. A ideia é um pouco diferente de só observar eventos como pressionar ou soltar teclas. Aqui, ignoro esses eventos e só quero saber do estado atual da tecla.

A função get_key_state retorna um vetor com o estado de todas as teclas. Usando as constantes correspondentes, é possível modificar a posição ou qualquer outro estado de “atores” de um jogo.

Este artigo não tem a pretensão de ser mais que uma introdução mínima ao assunto. Qualquer um que pretenda fazer algo mais precisa se encorajar e ler a documentação do SDL que é muito rica e contem vários exemplos. Devem ler inclusive o livro SDL_Manual, que tem exemplos de jogos simples, mas completos, onde se descreve todo o processo de criação de um bicho como esse.

Porque eu deixei de usar node e voltei a desenvolver em Perl Catalyst

Passei há uns dois anos a desenvolver sites usando Javascript em Node. A decisão na época foi tomada com o intuito exploratório, de aprender a usar a ferramenta, já que ela trás algumas vantagens que eu não tinha usando Catalyst, como o atendimento assíncrono das requisições. De fato, Node permite que muitos hits possam ser servidos sem que o uso de memória do servidor suba consideravelmente. No entanto, o preço a se pagar por isso é a falta de produtividade. Usando Catalyst + DBIx::Class, é inegável que a produtividade é muito alta. O processo de modelagem de banco de dados, criação do esquema de objetos, e seu uso no ecossistema gera uma economia de tempo que eu não consegui parear enquanto desenvolvi na outra tecnologia. Sinto falta de algumas coisas, claro. A resposta assíncrona é uma delas. A outra são os templates Jade que são o padrão quando se usa o framework Express. Neste caso, bastaria que houvesse um módulo Perl correspondente e o preço da transição seria próximo de zero.

Para quem está em dúvida entre Perl e Javascripts para desenvolver sites do lado do servidor, eu não posso recomendar esta última tecnologia. Mais ainda, na dúvida entre Mongo e um banco de dados relacional, a escolha ainda está com esta segunda. Não que não haja uso para NoSQL. No entanto, a não ser que seu site venha a ter um volume de acessos muito alto, ainda vale a pena fazer o projeto pensando em bancos relacionais. O preço de se usar Mongo é que muitas coisas, que seriam feitas trivialmente em SQL, demandam uma ginástica de código para serem implementadas. Quando há pressão para entregar um protótipo funcional em curto intervalo de tempo, a não ser que você já seja extremanente fluente em NoSQL, não vale a pena.

A verdade é que poucos sites precisam realmente de otimização tão prematura. A melhor coisa a se fazer é colocar rapidamente a ideia em produção. Se ela sobreviver e chegar ao ponto de causar preocupações reais sobre performance, você é um felizardo!

Primeira experiência com componentes SMD

Usar componentes SMD pode ser vantajoso de algumas maneiras. Eles são mais baratos em geral. Os componentes mais sofisticados só são oferecidos nesse formato. E, mais que tudo, as placas são muito, muito mais compactas.

Por isso decidi aprender alguma coisa sobre montagem de circuitos usando esses componentes minúsculos. Para começar, escolhi algo bem simples, um multivibrador astável, com dois leds piscando alternadamente.

Alguma se coisas têm que ser levadas em consideração ao projetar esse circuito. A frequência é determinada por um circuito RC, através da fórmula T=0,69RC. O resistor que determina a corrente no LED deve estar em uma faixa de valores tal que não seja muito grande nem muito pequeno. Também deve ser suficiente para que a corrente acenda o LED. E a corrente também precisa ser relacionada ao ganho do transistor. Se o beta for 100, é necessário ter um resistor 100 vezes menor, aproximadamente, que o resistor do circuito RC. A escolha teve alguns chutes, já que havia um limite para os resistores cerâmicos que havia à mão. Como eu buscava uma frequência próxima a um hertz, o capacitor de 100 nanofarads disponível precisava de um resistor de alguns megaohms. O transistor usado foi o 2N2222 que tem um gente de por volta de 100. No entanto, para baixas correntes, esse ganho também cai. Então o resistor de carga precisa tal que a corrente seja suficiente para ligar o LED. Felizmente, o resultado foi satisfatório quando usei resistores de 30kΩ para a carga e de 3MΩ para o circuito RC, e capacitores de 100nF.

O esquema da placa de circuito foi aproximadamente este:

Eu só fiz algumas alterações para diminuir a distância dos contatos para o capacitor. Desenhei a placa com uma caneta de retroprojetor e coloquei em uma solução de vinagre e água oxigenada. Normalmente se usa percloreto de ferro para fazer a corrosão, mas eu buscava uma alternativa mais simples e segura. O vinagre é muito menos corrosivo, então a duração do processo leva mais tempo, quase uma hora. Mas isso não é um problema para quem faz isso por hobby.

E aqui está o resultado final. A placa não ficou perfeita, mas o circuito funciona:

A técnica de soldagem ainda não é a melhor. Eu usei solda comum, e com componentes SMD me parece mais adequado usar pasta em solda. No próximo circuito vou tentar aprimorar as técnicas para ter um resultado de mais qualidade.

Desenhando circuitos eletrônicos

Fazer projetos à mão e testá-los na mesma hora poderia ser uma tarefa um tanto quanto inglória. É demorado, caro, propenso a erros. Por causa disso, algumas pessoas resolveram passar um tempo pensando em maneiras de se criar circuitos usando tinta condutiva. Foi possível realmente desenhar circuitos em papel, e juntando com alguns dispositivos como leds e baterias, fazer algumas peças bonitas de se ver.

Aposto que com um material assim seria possível dar um passo além na educação de adolescentes que poderiam montar realmente circuitos. Sem falar que dá pra pensar em um futuro em que ao invés de um esquema ser apenas uma representação de um circuito, pode se tornar o circuito em si, plenamente funcional.

Esse tipo de material, entre tantos outros, nos dá a chance de pensar em novas aplicações, talvez impensadas até agora, ou a possibilidade de trazer fenômenos presentes só na ficção científica à vida real.

Se você conhecer os riscos de se brincar com produtos químicos extremamente perigosos, pode tentar produzir sua própria tinta condutiva. O processo é todo descrito na página http://jordanbunker.com/archives/41.

Aplicativos Windows em Perl

Então você quer escrever um programa em Perl que rode no Windows. Há diversas razões para isso. Mas a mais básica é querer entregar a alguém um programa que rode sem que haja necessidade de se expor a complexidade que a instalação do ambiente Perl poderia requerer.

Vou assumir que você tenha um conhecimento básico de Perl, e que tenha instalada, no seu computador, no mínimo a versão 5.16 do Strawberry Perl.

Toda a mágica é feita pelo módulo PAR::Packer, que instala um programa chamado pp no diretório de executáveis do Strawberry. Ele funciona empacotando o interpretador Perl e todos os módulos que o seu programa precisar.

O pacote PAR::Packer pode ser um tanto traiçoeiro para instalar. O artigo Packing Perl into a standalone executable mostra diversos métodos, erros e acertos para instalação do pacote. Eu vou mostrar o que funcionou para mim, que foi a instalação através do CPAN.

A instalação do pacote é simples pelo CPAN. Execute o cpan na linha de comando e inicie a instação:

E é isso. Se houver problemas, o artigo que indiquei acima pode ajudar. Ou grite nos comentários e eu ajudo conforme eu puder.

O processo de compilação é simples. Vamos escrever um programa mínimo bem simples para usarmos como teste.

Esse é um programa mínimo, e se o processo não funcionar com ele, provavelmente não vai funcionar com nada mais complexo. Vamos chamá-lo de hello.pl.

A compilação é tão simples quanto:

Depois disso será criado o arquivo hello.exe, que deve dar o mesmo resultado que o script ao ser chamado na linha de comando.

Agora vamos tentar um exemplo um pouco mais complexo, com uma GUI mínima.

Aqui usamos o módulo Prima que facilita a criação de interfaces gráficas em diversas plataformas. Se chamarmos este arquivo de hello_prima.pl, podemos criar o executável com o comando abaixo:

Execute o arquivo hello_prima.exe e você vai ver a janela abrindo. No entanto, também vai perceber que ele fica ligado à janela de prompt. Para que o programa seja desconectado do prompt, é necessário usar o parâmetro –gui junto ao pp.

Este artigo explica apenas o mínimo que se deve saber para criar executáveis Windows com o Perl. Se quiser se aprofundar mais, é essencial estudar as páginas dos módulos que são a primeira fonte de informações.

WordPress em servidor Nginx

Imediatamente depois que adquiri este domínio, tive que instalar o WordPress para ter um site funcional. No entanto, ao invés de fazer a instalação padrão, com o Apache, e sua biblioteca de PHP, preferi usar a solução mais moderna com Nginx e PHP-FPM, que é um gerenciador de processo PHP. O Nginx é um servidor mais leve que o Apache, e tem sido minha escolha nos últimos projetos. A prática comum é usar, com ele, FastCGI para comunicação com a aplicação. No caso, o PHP-FPM serve PHP através de FastCGI de maneira eficiente, e independente do servidor HTTP.

Vou descrever o processo que usei para instalar todo o sofware que está executando este site. O sistema operacional que uso é o Ubuntu LTS 12.04, mas pode ser adaptado para outros sem grandes dificuldades. Vou assumir que você tenha acesso ao terminal e possa instalar pacotes.

É necessário ter Nginx, MySQL e PHP-FPM instalados, e fazer download da última versão do WordPress no site.

Depois disso é necessário configurar o Nginx para servir o novo site. Vou assumir que o seu nome de usuário é usuario e que você vai hospedar em uma pasta chamada example.com na sua $HOME, /home/usuario. Substitua conforme sua necessidade. O domínio de exemplo vai ser example.com. Dentro da pasta example.com o conteúdo do site vai ficar em uma pasta chamada public. Também vale a pena criar uma pasta para guardar os arquivos de log.

Então você deve criar os seguintes diretórios:

O servidor nginx vai ser executado no Ubuntu pelo usuário www-data. Então os diretórios que em ele cria arquivos devem dar permissão de escrita. No caso, o único diretório em que isso é necessário é onde ele vai gravar os arquivos de log

O arquivo de configuração mais simples está abaixo:

Eu costumo chamá-lo de nginx.conf e mantê-lo no diretório do site, e criar um link simbólico no diretório de configuração do Nginx.

Depois disso é necessário recarregar o Nginx:

O site está ativo e pronto para a instalação do WordPress.

Agora é necessário baixar o arquivo com a última versão do wordpress

Você vai encontrar um diretório chamado wordpress. Mova todo o seu conteúdo para o diretório public. Durante a configuração do WordPress, o Nginx vai ter que editar o arquivo wp-config.php. Então vai ser necessário adicionar permissões de escrita para o grupo www-data.

Agora é necessário crir o banco de dados no MySQL. Acesse o banco com o comando abaixo, informando a senha que escolheu durante a instalação do MySQL.

Depois disso você pode criar o banco e dar permissões de acesso.

Em seguida vai ser possível acessar o banco de dados no terminal com a senha que você definiu agora.

A configuração no terminal já terminou. Agora é necessário abrir o site no navegador, e seguir as instruções. Você vai ter que informar o nome e senha do banco de dados, e escolher um nome de usuário e senha para acessar o WordPress. São poucos passos, e o processo é todo autoexplicativo.

Depois de todo esse trabalho, o site já estará funcionando, e é possível parar por aqui. Eu fui um pouco mais além, transformando a instalação do WordPress em uma rede de sites. Isso faz com que seja possível criar novos sites do tipo blog.example.com, ou outro.example.com. São sites independentes, mas que compartilham a mesma instalação. Se quiser aprender mais, acesse a página sobre como criar uma rede no WordPress.