Metaballs em Actionscript

Olá pessoal,

Hoje vou falar um pouco sobre as Metaballs - que nada mais são do que modelos gráficos de aparência orgânica, usados para simular vários tipos de objetos não-sólidos, incluindo líquidos.

Para quem procura uma definição matemática formal, recomendo a leitura do artigo na Wikipedia. Para quem procura apenas uma forma simples de gerar este tipo de forma em Actionscript, mostrarei alguns passos simples para atingir resultados bastante interessantes.

O primeiro passo é criar uma instância de BitmapData. Apesar de ser possível criar Metaballs vetorialmente, utilizando os recursos desta classe torna o processo bem mais simples.

1
2
var bitmapData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
addChild(new Bitmap(bitmapData));

As Metaballs são círculos em sua essência, e para criá-las vamos criar alguns em nosso bitmap.

1
2
3
4
5
6
7
8
9
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x000000);
circle.graphics.drawCircle(0, 0, 20);
 
for (var i:Number = 0; i < 100; i++){
var matrix:Matrix = new Matrix();
matrix.translate(Math.random() * stage.stageWidth, Math.random() * stage.stageHeight);
bitmapData.draw(circle, matrix);
}

Até então, temos apenas vários círculos bem definidos espalhados de forma randômica. O próximo passo é “misturá-los”, aplicando Blur.

O Blur faz com que as áreas entre os círculos próximos fiquem mais escuras. Áreas entre círculos muito próximos ficam mais escuras do as áreas entre círculos mais afastados, e é isto que cria efeito esperado.

1
2
var blur:BlurFilter = new BlurFilter(10, 10, 10);
bitmapData.applyFilter(bitmapData, bitmapData.rect, new Point(), blur);

O passo final é deixar a figura bem definida novamente, utilizando para isso a função threshold. Primeiramente a função é utilizada para transformar todos os pixels escuros para preto e posteriormente todos os pixels claros para branco, eliminando assim todos os tons de cinza.

1
2
bitmapData.threshold(bitmapData, bitmapData.rect, new Point(), ">", 0xFF666666, 0xFFFFFFFF);
bitmapData.threshold(bitmapData, bitmapData.rect, new Point(), "<", 0xFFFFFFFF, 0xFF000000);</code>

A partir daí, é só usar a criatividade. Apenas como exemplo, usei as Metaballs para simular uma espécie de lava que entra em erupção a cada 10 segundos.

Postado por Henrique Vilela
Autor: Everton Vieira Ver todos os posts de
Sou Bacharel em Análise de Sistemas pela Universidade Católica de Pelotas (UCPel) no ano de 1999. Minha paixão por games é de longa data. Porém, em 2003 tornei essa paixão uma profissão. Durante oito anos atuei como Game Designer e Arquiteto de Software em mais de 30 projetos de Serious Games (simuladores) para grandes empresas do país. Atualmente sou sócio-fundador da Izyplay Game Studio, onde exerço o cargo de Diretor de Criação. Além do envolvimento corporativo, também participei da organização da Pós Graduação em Arquitetura e Desenvolvimento de Jogos Digitais na FATEC SENAC Pelotas. Minha área de interesse e especialização é Game Design e Inteligência Artificial.

2 Comentários em "Metaballs em Actionscript"

  1. Henrique Vilela 11/11/2010 at 23:39 - Reply

    Para quem tiver interesse, tem outro exemplo do uso de metaballs no meu site:
    http://hvilela.com/lava-lamp-actionscript-simulation/

  2. Leandro 12/11/2010 at 15:33 - Reply

    Legal o efeito, com certeza da pra fazer alguns efeitos interessantes com isso. Pessoalmente até ler tue post eu só tinha visto metaball no blender mesmo. :s

Deixar um Comentário