Articles

今天的新一代設計展其實還不賴~ 讓我印象比較深刻的有「嶺東科大數位媒體設計系」和「南台科大」，因為筆者的背景是多媒體設計~ 所以自然會對這些領域的東西深感興趣~

在「嶺東科大數位媒體設計系」方面讓我印象最深刻的是「封之青焰 - 桃轅傳」這一款完成度頗高的RPG遊戲，重點在於整個遊戲的引擎是用Flash AS開發的，並結合3D、2D美術設計，還有用AE做魔法特效效果，而且整個遊戲在執行上仍相當順暢~ 所以可能心有戚戚焉的緣故~ 就買了一片遊戲光碟來支持一下! ^^ 畢竟這從討論到實作完成品的過程，只要有一個環節沒有抓好就一定無法完成，隨便想想就有一大堆事要做~ 從手繪、3D建模、特效製作、背景音樂、人物配音、場景設計等等... Orz 真希望我也能參與這樣的一個團隊可以來做這些事 XD

另外「南台科大」印象比較深刻的是有一組用iPhone來開發小遊戲，重點就在於整個會場我只看到有這一組是展示iPhone的成果(還是有其它我沒看到的？)，有興趣的朋友可以到它們團隊的facebook看遊戲展示(KALA7 Games)。

還有值得一提的是「復興商工美工科」依然保持該校的傳統... 底子真是紮實到個不行!

而就應用工具面來看~ 有一些學校做的3D遊戲都採用「Torque 3D」，也有用「Virtools」還有「GameMarker」，還有看到一個賽車體驗互動遊戲直接用C#結合DirectX來開發~ 還有一些做擴增實境的應用等等。

題外話，下午離開新一代展的時候.. 居然在新光三越看到星光六－陳曼青在街頭表演打鼓!! 真帥!

基本上HBase的RPC設計是採用Hadoop的RPC並做一些更動而寫成的(HBase/RoadMaps)，而如果要用一句話來解釋HBase/Hadoop的RPC設計可以這麼說：它是透過Dynamic Proxy Pattern + Reflection + NIO(Multiplexed, non-blocking I/O)所構成的，中間溝通的物件會透過序列化(serialization)的方式來傳遞，所以都需要實作Hadoop的Writable介面，下述是筆者利用HBase/Hadoop的RPC設計來自訂一個Hello, Java範例：

RPCInterface

自行定義一個「say()」方法供RPC呼叫。

package hbase.rpc;

import org.apache.hadoop.hbase.ipc.HBaseRPCProtocolVersion;

public interface RPCInterface extends HBaseRPCProtocolVersion
{
	public String say();
}

Message

實作RPCInterface介面的Message類別，純粹回傳一個「Hello, Java」字串。

package hbase.rpc;

import java.io.IOException;

import org.apache.hadoop.hbase.ipc.HBaseRPCProtocolVersion;

public class Message implements RPCInterface
{
	public String say()
	{
		return "Hello, Java";
	}
	
	@Override
	public long getProtocolVersion(String protocol, long clientVersion) throws IOException
	{
		return HBaseRPCProtocolVersion.versionID;
	}
}

TestRPCServer

該程式會透過「HBaseRPC.addToMap()」來註冊自行定義的方法(Method Registry)，而內部就是利用Reflection來取得該類別所擁有的方法(Method)，它會給予每個方法一個特定的ID，而該ID是一個整數值。

由於HBase/Hadoop的Server是採用Multiplexed, non-blocking I/O方式而設計的，所以它可以透過一個Thread來完成處理，但是由於處理Client端所呼叫的方法是Blocking I/O，所以它的設計會將Client所傳遞過來的物件先放置在Queue，並在啟動Server時就先產生一堆Handler(Thread)，該Handler會透過Polling的方式來取得該物件並執行對應的方法，下述範例預設為10個Handler(HMaster/HRegionServer預設都為25個，根據"hbase.regionserver.handler.count"設定)。

package hbase.rpc;

import org.apache.hadoop.hbase.HBaseConfiguration;
import org.apache.hadoop.hbase.HServerAddress;
import org.apache.hadoop.hbase.ipc.HBaseRPC;
import org.apache.hadoop.hbase.ipc.HBaseServer;

public class TestRPCServer
{
	private HBaseServer server;
	private final HServerAddress address;
	static{HBaseRPC.addToMap(RPCInterface.class, (byte)37);}
	
	public TestRPCServer()
	{
		this.address = new HServerAddress("localhost:56789");
	}

	public void start()
	{
		try
		{
			Message msg = new Message();
			this.server = HBaseRPC.getServer(msg, address.getBindAddress(), address.getPort(), 10, true, new HBaseConfiguration());
			this.server.start();
			while (true)
			{
				Thread.sleep(3000);
			}
		} catch (Exception e)
		{
			e.printStackTrace();
		}

	}
	public static void main(String[] args)
	{
		new TestRPCServer().start();
	}
}

TestRPCClient

這裡的「HBaseRPC.getProxy()」就是採用Dynamic Proxy Pattern + Reflection來設計，有興趣的朋友可以去研究它的Source Code。

package hbase.rpc;

import java.io.IOException;
import java.net.InetSocketAddress;
import org.apache.hadoop.hbase.HBaseConfiguration;
import org.apache.hadoop.hbase.ipc.HBaseRPC;
import org.apache.hadoop.hbase.ipc.HBaseRPCProtocolVersion;


public class TestRPCClient
{
	protected RPCInterface server;
	static{HBaseRPC.addToMap(RPCInterface.class, (byte)37);}
	@SuppressWarnings("unchecked")
	public TestRPCClient()
	{
		try
		{
			server = (RPCInterface) HBaseRPC.getProxy(RPCInterface.class, HBaseRPCProtocolVersion.versionID, new InetSocketAddress("localhost", 56789), new HBaseConfiguration());
		} catch (Exception e)
		{
			e.printStackTrace();
		}
	}

	public String call() throws IOException
	{
		return server.say();
	}

	public static void main(String[] args) throws IOException
	{
		TestRPCClient client = new TestRPCClient();
		System.out.println(client.call());
	}
}

玩玩看吧!

和朋友去九份夜拍... 可惜不是黃昏時刻，不然玩玩黑卡效果應該也不錯!

相較於前一篇所實作的KNN「分類」演算法，本篇所要實作的則是K-means「分群」演算法(Unsupervised learning)，兩者同樣都是使用Euclidean distance來決定和中心點的距離計算，只不過K-means還需要反覆不斷的修正K個中心點，直到K個點慢慢地趨於穩定才算完成，詳細的程式如下：

(本範例K值為3，所以一開始在畫面上點擊滑鼠左鍵會先依序分配3個分群的中心點，接著再不斷地點擊滑鼠左鍵就可以觀察到K點的變化，玩玩看吧>>kmeans)

Kmeans.as

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Point;
	import flash.utils.*;
	
	public class Kmeans extends MovieClip
	{
		private var k:uint = 3;
		private var count:uint = 0;
		private var _r:uint = 0;
		private var _g:uint = 0;
		private var _b:uint = 0;
		private var k_center:Array = new Array();
		private var k_means:Array = new Array();
	
		public function Kmeans()
		{
			stage.addEventListener(MouseEvent.MOUSE_UP,put);
			init();
		}
		public function put(m:MouseEvent):void
		{
			if(count < k)
			{
				k_means[count] = new Array(); 
				var c:Circle = null;
				if(count == 0)
				{
					c = new Circle(0x0000FF);
				}else if(count == 1)
				{
					c = new Circle(0x00FF00);
				}else{
					c = new Circle(0xFF0000);
				}
				c.x = stage.mouseX;
				c.y = stage.mouseY;
				addChild(c);
				k_center[count] = c;
				count++;
				return;
			}
			for(var w = 0 ; w < 20 ; w++)
			{
				var cc2:Circle = this.getChildAt(w) as Circle;
				var k_arr:Array = new Array();
				var k_dict:Dictionary = new Dictionary(true);
				for(var v = 0 ; v < k ;v++)
				{
					var k_c = k_center[v];
					var dist2 = Point.distance(new Point(k_c.x,k_c.y),new Point(cc2.x,cc2.y));
					k_dict[dist2] = k_c;
					k_arr.push(dist2);
				}
				k_arr.sort(Array.NUMERIC);
				var min = k_arr[0];
				var color:uint = k_dict[min].getColor();
				cc2.reDraw(color);
				if(color == 0x0000FF)
				{
					k_means[0][_b] = new Point(cc2.x,cc2.y);
					_b++;
				}else if(color == 0x00FF00)
				{
					k_means[1][_g] = new Point(cc2.x,cc2.y);
					_g++;
				}else{
					k_means[2][_r] = new Point(cc2.x,cc2.y);
					_r++;
				}
			}
			trace(_r+" "+_g+" "+_b);
			var xx=0,yy=0;
			for(var bb = 0 ; bb < _b ; bb++)
			{
				xx += k_means[0][bb].x;
				yy += k_means[0][bb].y;
			}
			k_center[0].x = xx/_b;
			k_center[0].y = yy/_b;
			xx=0;yy=0;
			for(var gg = 0 ; gg < _g ; gg++)
			{
				xx += k_means[1][gg].x;
				yy += k_means[1][gg].y;
			}
			k_center[1].x = xx/_g;
			k_center[1].y = yy/_g;
			xx=0;yy=0;
			for(var rr = 0 ; rr < _r ; rr++)
			{
				xx += k_means[2][rr].x;
				yy += k_means[2][rr].y;
			}
			k_center[2].x = xx/_r;
			k_center[2].y = yy/_r;
			trace(k_center[0].x+" "+k_center[0].y);
		}
		public function init():void
		{
			for(var i = 0 ; i < 10 ; i++)
			{
				var c:Circle = new Circle(0x777777);				
				c.x = Math.random()*500;
				c.y = Math.random()*500;
				addChild(c);				
			}
			for(i = 0 ; i < 10 ; i++)
			{
				var c2:Circle = new Circle(0x777777);				
				c2.x = Math.random()*500;
				c2.y = Math.random()*500;
				addChild(c2);
			}
		}
	}
}

Circle.as

package
{
	import flash.display.*;
	
	public class Circle extends Sprite
	{
		private var color:uint = 0;
		
		public function Circle(c:uint)
		{
			this.color = c;
			this.graphics.lineStyle(5);
			this.graphics.beginFill(this.color);
			this.graphics.drawCircle(0,0,20);
			this.graphics.endFill();
		}
		public function getColor():uint
		{
			return this.color;
		}
		public function reDraw(color:uint):void
		{
			this.graphics.clear();
			this.graphics.lineStyle(5);
			this.graphics.beginFill(color);
			this.graphics.drawCircle(0,0,20);
			this.graphics.endFill();
			this.alpha = .5;
		}
	}
}

最近本來想打算藉由Flash CS5的發佈來開發iPhone應用程式，無奈Apple的大刀一揮~ 導致就算用Flash CS5開發出來的iPhone程式也通過不了上架的審核... 一下子打亂了我的一些計劃... 不過還是要練習練習AS3，而本文主要就是用AS3來實現KNN的基本概念，簡單來說KNN是一種可以藉由訓練資料來推測可能結果的演算法(Supervised learning)，詳細的程式細節如下：

(本範例初始化的K值為5，玩玩看吧>>knn.swf)

KNN.as

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Point;
	import flash.utils.*;
	
	public class KNN extends MovieClip
	{
		private var k:uint = 5;
	
		public function KNN()
		{
			stage.addEventListener(MouseEvent.MOUSE_UP,put);
			init();
		}
		public function put(m:MouseEvent):void
		{
			var c:Circle = null;			
			var num:uint = this.numChildren;
			trace(num);
			var k_dict:Dictionary = new Dictionary(true);
			var k_arr:Array = new Array();
			for(var i = 0 ; i < num ; i++)
			{
				var cc:Circle = this.getChildAt(i) as Circle;
				var dist = Point.distance(new Point(stage.mouseX,stage.mouseY),new Point(cc.x,cc.y));
				k_dict[dist] = i;
				k_arr.push(dist);
			}
			k_arr.sort(Array.NUMERIC);
			var blue = 0;
			var red = 0;
			for(var j = 0 ; j < k ; j++)
			{
				var nid = k_dict[k_arr[j]];
				var c2:Circle = this.getChildAt(nid) as Circle;
				var cor:uint = c2.getColor();
				trace(nid+" "+k_arr[j]+" "+cor);
				if(cor == 0x0000FF)
					blue++;
				else
					red++;
			}
			if(blue > red)
				c = new Circle(0x0000FF);				
			else
				c = new Circle(0xFF0000);				
			
			c.x = stage.mouseX;
			c.y = stage.mouseY;
			addChild(c);
		}
		public function init():void
		{
			for(var i = 0 ; i < 10 ; i++)
			{
				var c:Circle = new Circle(0xff0000);				
				c.x = Math.random()*500;
				c.y = Math.random()*500;
				addChild(c);				
			}
			for(i = 0 ; i < 10 ; i++)
			{
				var c2:Circle = new Circle(0x0000FF);				
				c2.x = Math.random()*500;
				c2.y = Math.random()*500;
				addChild(c2);
			}
		}
	}
}

Circle.as

package
{
	import flash.display.*;
	
	public class Circle extends Sprite
	{
		private var color:uint = 0;
		
		public function Circle(c:uint)
		{
			this.color = c;
			this.graphics.lineStyle(5);
			this.graphics.beginFill(this.color);
			this.graphics.drawCircle(0,0,20);
			this.graphics.endFill();
		}
		public function getColor():uint
		{
			return this.color;
		}
	}
}

相關資源

．KNN演算法

．KNN演算法 (更正篇)