Snippets and notes about actionscript.

Metaballs (AS3)

Posted: December 8th, 2008 | Author: | Filed under: Flash | Tags: , , , | 2 Comments »

Here is a simple 2D metaballs demo along with the source code. Hopefully the source is not too messy or hard to understand. Used the Metaballs Wikipedia article and an article titled “Metaball Math” to help me program it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
package  {
 
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.Point;
 
	public class Main extends Sprite {
 
		private var output:BitmapData;
		private var buffer:BitmapData;
		private var aPoint:Point;
		private var threshold:Number;
		private var b1_x:int;
		private var b1_y:int;
		private var b1_x_vel:int;
		private var b1_y_vel:int;
		private var b2_x:int;
		private var b2_y:int;
		private var b2_x_vel:int;
		private var b2_y_vel:int;
		private var b3_x:int;
		private var b3_y:int;
		private var b3_x_vel:int;
		private var b3_y_vel:int;
 
		public function Main() {
			buffer = new BitmapData(stage.stageWidth, stage.stageHeight, false);
			output = new BitmapData(stage.stageWidth, stage.stageHeight, false);
			aPoint = new Point(0, 0);
			threshold = 1 / 25;
			b1_x = 30;
			b1_y = 30;
			b1_x_vel = 2;
			b1_y_vel = 1;
			b2_x = 60;
			b2_y = 90;
			b2_x_vel = 4;
			b2_y_vel = 6;
			b3_x = 100;
			b3_y = 100;
			b3_x_vel = 5;
			b3_y_vel = -3;
 
			addChild(new Bitmap(output));
			stage.addEventListener(Event.ENTER_FRAME, render);
		}
 
		private function render( e:Event ):void {
			// Apply velocity and check boundaries
			b1_x += b1_x_vel; if ( b1_x > stage.stageWidth || b1_x < 0 ) { b1_x_vel *= -1; }
			b1_y += b1_y_vel; if ( b1_y > stage.stageHeight || b1_y < 0 ) { b1_y_vel *= -1; }
			b2_x += b2_x_vel; if ( b2_x > stage.stageWidth || b2_x < 0 ) { b2_x_vel *= -1; }
			b2_y += b2_y_vel; if ( b2_y > stage.stageHeight || b2_y < 0 ) { b2_y_vel *= -1; }
			b3_x += b3_x_vel; if ( b3_x > stage.stageWidth || b3_x < 0 ) { b3_x_vel *= -1; }
			b3_y += b3_y_vel; if ( b3_y > stage.stageHeight || b3_y < 0 ) { b3_y_vel *= -1; }
 
			// Apply metaball formula : 1 / sqrt( (x1-x0)^2 + (y1-y0)^2 )
			for ( var i:int = 0; i < buffer.width; i++ ) {
				for ( var j:int = 0; j < buffer.height; j++ ) {
					var ball_1:Number = 1 / Math.sqrt( ((i - b1_x) * (i - b1_x)) + ((j - b1_y) * (j - b1_y)) );
					var ball_2:Number = 1 / Math.sqrt( ((i - b2_x) * (i - b2_x)) + ((j - b2_y) * (j - b2_y)) );
					var ball_3:Number = 1 / Math.sqrt( ((i - b3_x) * (i - b3_x)) + ((j - b3_y) * (j - b3_y)) );
 
					if ( ball_1 + ball_2 + ball_3 > threshold ) {
						buffer.setPixel(i, j, 0x000000);
					}
					else {
						buffer.setPixel(i, j, 0xFFFFFF);
					}
				}
			}
 
			output.copyPixels(buffer, buffer.rect, aPoint);
		}
	}
}

2 Comments on “Metaballs (AS3)”

  1. 1 Faycal said at 1:28 am on September 17th, 2009:

    very impressive!

  2. 2 antonio brandao said at 8:40 am on October 18th, 2010:

    very nice

    What about vectorial metaballs? it seems to be much more complex to develop.

    have you seen the vectorial metaballs by Mathieu Badimon ? You can see it in his experience “Liquid Form” in http://lab.mathieu-badimon.com/

    surprisingly it was done using AS2 in 2006


Leave a Reply