Metaball（元球）效果學習

幾年前就在網上曾看見過這種效果，但一直不知道叫什麼名字

前一陣無意在9ria(天地會)論壇上看到了一篇專門講這個的文章：as3 元球（metaball），不過有點遺憾的是那篇文章上的**直接複製下來都不能除錯，花了點時間整理了一下，終於除錯通過了，貼在這裡分享一下：

metaball的公式：

其中，x、y是舞台上的任意乙個點，x0、y0是metaball的位置，r為半徑。從公式上看，可以理解為萬有引力的變種（即引力與距離成反比，與半徑與正比）

先定義乙個metaball類(注：相對於原文而言，增加了vx,vy速度變數，用於後面演示運動的效果)：

package 
public function equation(tx:number,ty:number):number 
}}

接下來是如何運用：

var sw:number=stage.stagewidth;//舞台寬度
var sh:number=stage.stageheight;//舞台高度
var canvas:bitmapdata=new bitmapdata(sw,sh,false,0xff000000);//預設生成乙個黑背景的bitmapdata
var rect:rectangle=canvas.rect;//canvas的矩形區域
var pt:point=new point(rect.left,rect.top);//rect的左上頂點
var blurfilter:blurfilter=new blurfilter(10,10);//定義乙個模糊濾鏡
var metaballs:array = new array();//用於儲存n個metaball的陣列
var ballnumber:uint=5;//小球數目
var i:uint=0;//迴圈變數
var minthreshold:int=0x000009;//最小閾值
var maxthreshold:int=0x000020;//最大閾值
var bitmap:bitmap = new bitmap();//最終用來顯示的點陣圖物件
var ishollow:boolean=false;//是否空心圖形
function init() else if (b.x < b.original_radius) 
if (b.y>sh-b.original_radius) else if (b.y=sw-b.original_radius) else if (b.x=sh-b.original_radius) else if (b.y=minthreshold) 
} else 
}} }
canvas.unlock();
bitmap.bitmapdata=canvas;
}init();

大概原理就是根據公式遍歷舞台上的每個畫素點，得到乙個計算值，如果該值在指定的閾值之間，就設定為白色。

空心metaball：

實心metaball：

正如大家所看到的，效果雖然不錯，但是執行效率也是極低的，因為要逐畫素處理。

kernel metaballs
< namespace : "com.rocketmandevelopment";
vendor : "rocketman development";
version : 1;
description : "fast metaballs";
>
}}

借助於pixelbender toolkit可以將它匯出為flash所需要的二進位制檔案metall.pbj，然後在flash中測試一把：

package

private function enterframehandler(e:event):void

private function checkwalls(ball:metaball):void else if (ball.x < ball.original_radius + adjust)

if (ball.y>sh-ball.original_radius-adjust) else if (ball.y很明顯，現在看上去流暢多了。

上面提到的都是極其精確的標準做法，如果要求不高，其實這種效果可以直接用bitmap + 模糊濾鏡來模似(不過看上去效果有點假)，大概原理就直接把二個圓形進行重疊，然後把最終的(並集)圖形邊緣模糊處理。(該方法是從一位老外的部落格上看到的)

var ballnum:uint=5;

var balls:array = new array();

var sw:number=stage.stagewidth;

var sh:number=stage.stageheight;

var container:sprite = new sprite();

var bmd:bitmapdata=new bitmapdata(sw,sh,false,0x00000000);

var bitmap:bitmap;

var i:uint=0;

var rect:rectangle=new rectangle(0,0,sw,sh);

var pt:point=new point(0,0);

var filter:blurfilter=new blurfilter(10,10);

function init() else if (b.x=sh-b.radius-adjust) else if (b.y

} bmd.dispose();

bmd=new bitmapdata(sw,sh,false,0x00000000);

bmd.draw(container);

bitmap.bitmapdata=bmd;

}init();

Metaball（元球）效果學習

微信小程式懸浮球效果

vc 實現懸浮窗，迅雷360懸浮球效果

元學習調研

Metaball（元球）效果學習

微信小程式懸浮球效果

vc 實現懸浮窗，迅雷360懸浮球效果

元學習調研

相關推薦