Metaballs em Actionscript

Henrique.Vilela — Wed, 10 Nov 2010 15:48:11 +0000

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.

var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x000000);
circle.graphics.drawCircle(0, 0, 20);
 
for (var i:Number = 0; i &lt; 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

Integrador de Verlet Parte 1 – Introdução

Regis Machado — Thu, 21 Oct 2010 21:33:03 +0000

por: Regis Machado

Olá pessoal esse é o meu primeiro post como colaborador aqui no Abrindo o Jogo, e pra isso eu vou mostrar como funcionam os verlet points, que são bem legais de usar e tem como simular uma física legal e descomplicada, ou criar um sistema de partículas simples.

“O Integrador Verlet é um metodo numérico usado para simular a equação de movimento de Newton’s. É usada frequentemente para calcular trajetorias de particulas em simulações de dinâmica molecular e video games”.-Wikipedia

O ponto de verlet que vou mostrar aqui é um vetor onde mantem armazenada a sua ultima posição e a posição atual e a partir da diferença entre essas duas posições ele calcula sua movimentação futura, se pensarmos na parte física, se um corpo em um momento T0 está na posição x e em um segundo momento T1 está na posição x1, o seu deslocamento no tempo-espaço D(x1-x) pode (não obrigatoriamente) ser considerado como sua velocidade de deslocamento no futuro.

Para demonstrar isto, vou apresentar a implementação em AS3 (uma linguagem que eu gosto muito de trabalhar para fazer jogos). A IDE que vou usar é o FlashDevelop e vocês podem utilizar o tutorial aqui do Abrindo o Jogo para baixar e instalar.

Essa primeira parte vai ser composta de 3 classes, a classe principal, a classe VerletPoint, e o VerletStick uma classe criado pelo yoambulante que nessa primeira parte vai nos ajudar muito a ver o poder e simplicidade dos verlet points.

Primeiro a Classe VPoint que implementa o integrador de verlet:

public class VerletPoint {
 
public var x:Number;
public var y:Number;
private var oldx:Number;
private var oldy:Number;
public function VerletPoint (x:Number, y:Number) {
 
setPos(x,y);
 
}
 
/* informa a posição do ponto*/
public function setPos(x:Number, y:Number):void{
this.x = oldx = x;
this.y = oldy = y;
}
 
/*Atualiza a posição do ponto, de acordo com o integrador de Verlet*/
public function refresh():void {
 
var tempx:Number = x;
var tempy:Number = y;
x += x - oldx;
y += y - oldy;
oldx = tempx;
oldy = tempy;
}
 
/* função que desenha o ponto na tela */
public function render(g:Graphics):void{
 
 g.beginFill(0xff8989);
 g.drawCircle(x,y,2);
 g.endFill();
}
 
}

E a classe que criada pelo yoambulante para limitar a movimentação entre dois pontos de verlet:

public class VerletStick{
 
public var pointa:VPoint;
public var pointb:VPoint;
private var _lenght:Number;
 
public function VerletStick(a:VPoint, b:VPoint, lenght:Number = -1) {
 
pointa = a;
pointb = b;
 
if(lenght == -1){
var dx:Number = a.x - b.x;
var dy:Number = a.y - b.y;
_lenght = Math.sqrt(dx * dx + dy * dy);
}else{
_lenght = lenght;
}
 
}
 
public function contract():void {
 
var dx:Number = pointb.x - pointa.x;
var dy:Number = pointb.y - pointa.y;
var h:Number = Math.sqrt(dx * dx + dy * dy);
var diff:Number = _lenght - h;
var offx:Number = (diff * dx / h) * .5; // or /2
var offy:Number = (diff * dy / h) * .5;// or /2
pointa.x -= offx;
pointa.y -= offy;
pointb.x += offx;
pointb.y += offy;
}
 
public function render(g:Graphics):void {
g.lineStyle(1,0xff00ff);
g.moveTo(pointa.x,pointa.y);
g.lineTo(pointb.x, pointb.y);
}
 
}

E finalmente a nossa classe main que ira fazer a mágica

public class Main extends Sprite{
 
public function Main():void
{
  if (stage) init();
  else addEventListener(Event.ADDED_TO_STAGE, init);
 
}
 
private function init(e:Event = null):void{
 
removeEventListener(Event.ADDED_TO_STAGE, init);
createPoints();//função encarregada de criar os Vpoints;
addEventListener(Event.ENTER_FRAME, render);
}
 
//constante com o numero de verlets points que será gerado
private const NUM_POINTS:int = 10;
//vetor com os pontos, somente flashplayer 10+
private var pontos:Vector.VerletPoint;
private var sticks:Vector.VerletStick;
 
public function createPoints():void {
 
pontos = new Vector.VerletPoint();
sticks = new Vector.VerletStick();
for (var i:int = 0 ; i &amp;lt; NUM_POINTS; i++ ) {
pontos.push(new VerletPoint(25*(i+1),25*(i+1)));
}
 
for (var a:int = 1 ; a &amp;lt; NUM_POINTS; a++ ) {
sticks.push(new VerletStick(pontos[a-1], pontos[a]));
}
 
}
 
public function render(e:Event):void {
 
this.graphics.clear(); //limpa a tela
pontos[0].setPos(mouseX, mouseY); //seta o ponto 0 com a posição do mouse
for each(var s:VerletStick in sticks) {
s.contract(); //atualiza os sticks
s.render(this.graphics);
 
}
 
for each (var p:VerletPoint in pontos) {
p.refresh(); //atualiza os pontos
p.render(this.graphics);
 
}
 
}
 
}

A versão final em Flash vocês podem conferir aqui:

Espero que tenham gostado se alguem tiver problemas comenta que eu tento resolver o mais rápido possivel.

Até a segunda parte do nosso Integrador de Verlet.

Abrindo o Jogo » ActionScript 3.0

Metaballs em Actionscript

Integrador de Verlet Parte 1 – Introdução