在一个月的时间内断断续续的粗略的读完了第一本关于HTML5的书：《HTML5用户指南》，感觉还是颇有收获。写几点自己的感觉。

有遇到一些朋友问HTML5是啥，按我的理解来说，HTML5是一系列的规范，它规定了浏览器在遇到什么内容的时候应该做什么样的处理。比如一些新的标签，一些新的input的类型，以及更多的JavaScript API等等。通过http://html5test.com/的测试，Firefox 3.6的分数是155，后来我升级到Firefox 4.0 RC，得分是240。不过综合看来下，目前还是chrome对HTML5的支持是最好的。

最有吸引力的新特性在网上已经有很多了，大概就是video和audio标签，canvas画布，本地存储和web socket等。给我的感觉是：

1，video和audio的确很好，不过支持的格式不统一，目前似乎各浏览器都支持的只有ogg；
2，canvas的功能和API和ActionScript的绘图API很接近，包括简单的动画等等，不过在Firefox下，一些使用canvas的例子的运行并不太好；
3，本地存储是个挺有趣的东西，存储的大小似乎并没有统一的标准，不过完全可以代替cookies，有点类似于ActionScript中的本地SharedObject。另外一个就是web SQL，似乎目前也没有支持的浏览器；
4，有个新鲜的东西叫web worker，主要的功能是可以让JavaScript多线程执行，这样就不会因为JavaScript繁忙导致浏览器假死了，挺好；
5，web socket是我最期盼的东西，但是书中没有涉及到服务器相关的内容。

总的来说，真本书还算不错，解答了很我之前我感觉模糊的东西，有一些不错的例子，在实际开发中可能会有所帮助。不过等HTML5标准正式颁布，等所有浏览器都支持HTML5了，可能还会有更多变数吧。就我自己来说，学习和关注的技术重点将逐渐的从Flex/Flash/ActionScript向HTML5/CSS3/JavaScript转移了。还是那句话，让Flash静静的走开吧。

HTML5用户指南 [平装]
作者：罗森(Bruce Lawson)，夏普(Remy Sharp)
译者：刘红伟，等
出版社: 机械工业出版社; 第1版 (2011年1月1日)
外文书名: Introducing HTML 5
平装: 192页
正文语种: 汉语, 英语
开本: 16
ISBN: 9787111322788, 7111322789

Suppose that the data mining task is to cluster the following eight points (with (x, y) representing location) into three clusters.
A1(2, 10), A2(2, 5), A3(8, 4), B1(5, 8), B2(7, 5), B3(6, 4), C1(1, 2), C2(4, 9).
The distance function is Euclidean distance. Suppose initially we assign A1, B1, and C1 as the
center of each cluster, respectively. Use the k-means algorithm to show only
(a) The three cluster centers after the first round of Assignment execution and
(b) The final three clusters

就算法本身来说是很简单的，K-means算法是很简单的，基本过程如下：

1，从 n个数据对象任意选择 k 个对象作为初始聚类中心；
2，根据每个聚类对象的均值（中心对象），计算每个对象与这些中心对象的距离；并根据最小距离重新对相应对象进行划分；
3，重新计算每个（有变化）聚类的均值（中心对象） ；
4，重复2->3到不再变化或稳定为止。

其中最麻烦是第一步确定k的值和如何选定第一组中心值。不过在这道题中完全不涉及这个问题，因为k的值（3）和初始中心值的选择已经给定。

一下是用ActionScript实现的代码：

//##############################################################################
//
//##############################################################################
package
{
	import flash.display.Sprite;
	import flash.geom.Point;

	public class CC extends Sprite
	{

		public function CC()
		{

			allPoints = new Object();
			allPoints.a1 = new Point(2, 10);
			allPoints.a2 = new Point(2, 5);
			allPoints.a3 = new Point(8, 4);
			allPoints.b1 = new Point(5, 8);
			allPoints.b2 = new Point(7, 5);
			allPoints.b3 = new Point(6, 4);
			allPoints.c1 = new Point(1, 2);
			allPoints.c2 = new Point(4, 9);
			//
			getCluster();
		}

		private var allPoints:Object;

		private var c1:Object = new Object();

		private var c2:Object = new Object();

		private var c3:Object = new Object();

		private var oldC1:Object;

		private var oldC2:Object;

		private var oldC3:Object;

		private var p1:Point = new Point(2, 10);

		private var p2:Point = new Point(5, 8);

		private var p3:Point = new Point(1, 2);

		private var accountTime:uint = 1;

		private function getCluster():void
		{
			trace("Count Num: " + accountTime);
			oldC1 = c1;
			oldC2 = c2;
			oldC3 = c3;
			c1 = new Object();
			c2 = new Object();
			c3 = new Object();
			for (var name:String in allPoints)
			{
				var p:Point = allPoints[name] as Point;
				var num:uint = getClusterNum(allPoints[name], name);
				this["c" + num][name] = p;
			}
			trace("New clusters are:");
			for (var i:uint = 1; i <= 3; i++)
			{
				var str:String = i + ": ";
				for (var n:String in this["c" + i])
				{
					str += n + ", ";
				}
				trace(str);
			}
			trace("Count " + accountTime + " end");
			getNewCenters();

		}

		private function getNewCenters():void
		{
			var str:String = "New centre points are: ";
			for (var i:uint = 1; i <= 3; i++)
			{
				var xx:Number = 0;
				var yy:Number = 0;
				var count:uint = 0;
				for each(var p:Point in this["c" + i])
				{
					xx += p.x;
					yy += p.y;
					count ++;
				}
				xx = xx / count;
				yy = yy / count;
				this["p" + i] = new Point(xx, yy);
				str += ("p" + i + ": (" + xx.toFixed(2) + ", " + yy.toFixed(2) +　"), ");
			}
			trace(str + "n");
			if(isEnd() || accountTime > 100)
			{
				trace("Centre points not changed, ALL END");
			}
			else
			{
				accountTime ++;
				getCluster();
			}
		}

		private function isEnd():Boolean
		{
			for (var i:uint = 1; i <= 3; i++)
			{
				for(var n:String in this["c" + i])
				{
					if(this["oldC" + i][n] == null) return false;
				}
			}
			return true;
		}

		private function getClusterNum(p:Point, pName:String):uint
		{
			var d1:Number = getDistance(p, p1);
			var d2:Number = getDistance(p, p2);
			var d3:Number = getDistance(p, p3);
			//
			var str:String = "Distances for " + pName + ": ";
			str += d1.toFixed(2) + ", ";
			str += d2.toFixed(2) + ", ";
			str += d3.toFixed(2);
			//
			var num:uint;
			if (d1 <= d2)
			{
				if (d1 <= d3)
				{
					num = 1;
				}
				else
				{
					num = 3;
				}
			}
			else
			{
				if (d2 <= d3)
				{
					num = 2;
				}
				else
				{
					num = 3;
				}
			}
			str += " | nearest: " + num;
			trace(str);
			return num;
		}

		private function getDistance(p1:Point, p2:Point):Number
		{
			var xx:Number = p1.x - p2.x;
			var yy:Number = p1.y - p2.y;
			var dd:Number = Math.sqrt(xx * xx + yy * yy);
			//trace("get distance", p1, p2, dd);
			return dd;
		}
	}
}

输出结果如下：

Count Num: 1
Distances for b3: 7.21, 4.12, 5.39 | nearest: 2
Distances for a1: 0.00, 3.61, 8.06 | nearest: 1
Distances for a2: 5.00, 4.24, 3.16 | nearest: 3
Distances for a3: 8.49, 5.00, 7.28 | nearest: 2
Distances for c1: 8.06, 7.21, 0.00 | nearest: 3
Distances for b1: 3.61, 0.00, 7.21 | nearest: 2
Distances for c2: 2.24, 1.41, 7.62 | nearest: 2
Distances for b2: 7.07, 3.61, 6.71 | nearest: 2
New clusters are:
1: a1,
2: b3, b1, c2, b2, a3,
3: a2, c1,
Count 1 end
New centre points are: p1: (2.00, 10.00), p2: (6.00, 6.00), p3: (1.50, 3.50),

Count Num: 2
Distances for b3: 7.21, 2.00, 4.53 | nearest: 2
Distances for a1: 0.00, 5.66, 6.52 | nearest: 1
Distances for a2: 5.00, 4.12, 1.58 | nearest: 3
Distances for a3: 8.49, 2.83, 6.52 | nearest: 2
Distances for c1: 8.06, 6.40, 1.58 | nearest: 3
Distances for b1: 3.61, 2.24, 5.70 | nearest: 2
Distances for c2: 2.24, 3.61, 6.04 | nearest: 1
Distances for b2: 7.07, 1.41, 5.70 | nearest: 2
New clusters are:
1: c2, a1,
2: b3, b1, b2, a3,
3: a2, c1,
Count 2 end
New centre points are: p1: (3.00, 9.50), p2: (6.50, 5.25), p3: (1.50, 3.50),

Count Num: 3
Distances for b3: 6.26, 1.35, 4.53 | nearest: 2
Distances for a1: 1.12, 6.54, 6.52 | nearest: 1
Distances for a2: 4.61, 4.51, 1.58 | nearest: 3
Distances for a3: 7.43, 1.95, 6.52 | nearest: 2
Distances for c1: 7.76, 6.39, 1.58 | nearest: 3
Distances for b1: 2.50, 3.13, 5.70 | nearest: 1
Distances for c2: 1.12, 4.51, 6.04 | nearest: 1
Distances for b2: 6.02, 0.56, 5.70 | nearest: 2
New clusters are:
1: c2, a1, b1,
2: b3, b2, a3,
3: a2, c1,
Count 3 end
New centre points are: p1: (3.67, 9.00), p2: (7.00, 4.33), p3: (1.50, 3.50),

Count Num: 4
Distances for b3: 5.52, 1.05, 4.53 | nearest: 2
Distances for a1: 1.94, 7.56, 6.52 | nearest: 1
Distances for a2: 4.33, 5.04, 1.58 | nearest: 3
Distances for a3: 6.62, 1.05, 6.52 | nearest: 2
Distances for c1: 7.49, 6.44, 1.58 | nearest: 3
Distances for b1: 1.67, 4.18, 5.70 | nearest: 1
Distances for c2: 0.33, 5.55, 6.04 | nearest: 1
Distances for b2: 5.21, 0.67, 5.70 | nearest: 2
New clusters are:
1: c2, a1, b1,
2: b3, b2, a3,
3: a2, c1,
Count 4 end
New centre points are: p1: (3.67, 9.00), p2: (7.00, 4.33), p3: (1.50, 3.50),

Centre points not changed, ALL END

一直没能在linux上找到好的IDE用来编写Flex/AS。Adobe的Flash Builder从07年出了个flex3的alpha版本之后就再也没有更新，FDT感觉挺好但是太贵，买不起。

后来听说FDT为Open Source开发者免费提供FDT 4 Max License，因为一直有开源自己的fb-aslib，虽然是个非常龊的项目，但是也厚着脸皮发信请求一个免费的license。过了半个多月，没想到真收到免费的OS license。以后可以在linux上用IDE写ActionScript，挺好！

用了几天，感觉和用Flash Builder差别还是挺大的。

首先，FDT的format很好用，和以前的Flash的Editor一样的快捷键，而且自定义的内容很多；

其次，对SWC和项目的引用和Flash Builder不一样，包括linked sources也不一样，但是这样更直接明了，项目组织比FB更清晰，比较符合我的习惯；

但是文件模板没有Flash Builder好用，不过代码模板还是挺好的，只是我很少用；

然后，我在公司的机器上也装上了FDT，但是明显感觉Windows版的没有Linux的稳定，总是报内存错误然后崩掉，我家的机器只有２G内存，公司的是４G，怎么还是内存不足呢？也许是windows版的eclipse的问题？

最后，代码提示没有Flash Builder来得便捷，但是用起来也算很顺手。

其他的优点，就慢慢再体会了，感谢FDT提供如此棒的免费IDE。

FDT site: http://www.fdt.powerflasher.com/

Thanks FDT so much to provide such awesome Flex/AS IDE.

结构清晰简洁明了，以备后用。

<?xml version="1.0" encoding="UTF-8"?>
<project name="myBuild" default="main">

    <property name="SRC_DIR" location="src" />
    <property name="OUT_DIR" location="deploy" />
    <property name="DOC_DIR" location="asdoc" />
    <property name="TARGET_NAME" value="targetName" />
    <property name="TARGET_PATH" location="src/Main.as" />
    <property name="WRAP_NAME" value="index.html" />

    <!-- 修改这里的depends，加入需要的target -->
    <target name="main" depends="" />

    <!-- flex.frameworks的设置是eclipse里面设置的，这里可以用任何其他SDK路径代替 -->
    <target name="compile">
        <mxmlc output="${OUT_DIR}/${TARGET_NAME}.swf" file="${TARGET_PATH}">
            <load-config filename="${flex.frameworks}/flex-config.xml" />
        </mxmlc>
    </target>

    <target name="wrapper">
        <html-wrapper swf="${TARGET_NAME}" output="${OUT_DIR}"
            file="${WRAP_NAME}" width="100%" height="100%" history="true"
            express-install="true" version-detection="true" />
    </target>

    <target name="asdoc">
        <asdoc output="${DOC_DIR}">
            <load-config filename="${flex.frameworks}/flex-config.xml" />
            <doc-sources path-element="${SRC_DIR}" />
        </asdoc>
    </target>

    <!-- compc编译让我搞了很久。原来compc是不支持include-sources的。所以这里只能用include-classes了 -->
    <target name="library" depends="clean-library ">
        <fileset id="sources" dir="${SRC_DIR}">
            <include name="**/*.as" />
        </fileset>
        <pathconvert property="classes" pathsep=" " refid="sources">
            <chainedmapper>
    <!-- 在windows下面，要将/换成 -->
                <globmapper from="${SRC_DIR}/*" to="*" />
                <mapper type="package" from="*.as" to="*" />
            </chainedmapper>
        </pathconvert>
        <compc output="${OUT_DIR}/${TARGET_NAME}.swc" include-classes="${classes}" >
            <source-path path-element="${SRC_DIR}" />
            <load-config filename="${flex.frameworks}/flex-config.xml" />
            <include-file name="${SRC_DIR}/resources/img.png" path="${SRC_DIR}/resources/img.png" />
        </compc>
    </target>

    <target name="clean" depends="clean-library,clean-compile,clean-asdoc,clean-wrapper" />

    <target name="clean-compile">
        <delete file="${OUT_DIR}/${TARGET_NAME}.swf" />
    </target>

    <target name="clean-wrapper">
        <delete dir="${OUT_DIR}/history" />
        <delete>
            <fileset dir="${OUT_DIR}">
                <include name="${WRAP_NAME}" />
                <include name="swfobject.js" />
                <include name="playerProductInstall.swf" />
            </fileset>
        </delete>
    </target>

    <target name="clean-asdoc">
        <delete dir="${DOC_DIR}" />
    </target>

    <target name="clean-library">
        <delete file="${OUT_DIR}/${TARGET_NAME}.swc" />
    </target>

</project>

3. 空间滤波
(a)噪点生成器。1. 找到（或开发）一段程序能在一个图像中加入高斯噪点,并且必须能够指出噪点的均值和方差。2.找到（或开发）一段程序能在一个图像中加入黑白相间的（脉冲式）噪点,并且必须能指出这两种噪点中每一种的出
现概率。
(b)写一段程序实现空间均值滤波，把你的滤波器应用到在(a)中含噪点的图像上。你可以把你的空间遮罩的大小固定设成3X3，但是系数要是可变的并作为你程序的输入。
(c)修改你在(b)中生成的程序以实现一个3X3 的中值滤波。比较用均值滤波和中值滤波过滤后的图像的不同之处。

结果图：

先把高斯噪声的伪随机数生成方法记下来。其他的以后有空再写。

/**
* 用雅可比变换生成一个呈高斯分布的伪随机数。
*
* @param mu 平均值μ
* @param sigma 标准差σ^2
* @return 伪随机数。
*/
private function getGaussianRandom(mu:Number = 0, sigma:Number = 1):Number
{
	var r1:Number = Math.random();
	var r2:Number = Math.random();
	var rs:Number = Math.sqrt(-2 * Math.log(r1)) * Math.cos(2 * Math.PI * r2 ) * sigma + mu;
	return rs;
}

写一段几何转换程序可以按一定数值进行旋转,转换和缩放图像,分别使用用最邻近点算法和双线性差值算法。

开始的时候google了很多关于最近邻点算法（nearest）和双线性差值算法（biliear）的内容，发现挺麻烦的，而且推算下来的计算量很大，觉得无从下手。后来看了课程的讲义，发现老师的要求似乎是很简单的（实际上是我搜索错了算法 O_O）。对于最近邻算法，转换之后的点对应到原图位置后，距离该位置最近的一个点的灰度，即为转换后的点的灰度。而双线性差值算法要稍微多算一点，如下图：

将对应的位置附近的四个点的灰度统一起来做计算即可。公式也很简单，假设目标位置的左下，左上，右下，右上点的灰度分别为f00，f01，f10，f11，x值是目标位置到f00点的x距离，y值是目标位置到f00点的y距离，fxy是转换后的点的灰度值，公式为：

fxy = (f10 – f00) * x + (f01 – f00) * y + (f11 + f00 – f01 – f10) * x * y + f00

结果如下图。

其实为了偷懒，我没有计算rotate值，因为没有想出一个好的方法来将转换后的坐标mapping到原图的位置，干脆就使用Flex中的rotate属性做了一个切换，老师应该看不出来的吧。XD

这东西只能断断续续的做，还是将自己做的东西记录下来，免得忘掉了。

首要的问题，在AS中似乎没有直接获取灰度值的方法，因此我用的是将RGB值分解之后取平均值。顺便记录一下分解RGB的简单算法：

var red:uint = color >> 16 & 0xFF;
 var green:uint = color >> 8 & 0xFF;
 var blue:uint = color & 0xFF;

如果不将RGB的值转换成一个灰度值，可以分别对三个值进行计算，得到三个直方图，让后用同样的算法对三个值进行计算，之后再组成一个RGB值，可以作为整个图形的计算。

第一题，直方图均衡化

• 写一段程序计算一个图像的直方图
• 实现直方图均衡化
• 你的程序必须大体上能允许所有的灰阶图像作为输入

至少，在你的报告中需要包括原始图像和它的直方图，一张直方图均衡化的图，转换函数，改进后的图像和他的直方图。

实现效果：

按照我自己的理解，直方图的算法如下。未必正确，仅供参考。

// 以下代码仅描述算法，不能直接运行。
// 第一步，获取该位图从0-255的每个灰度值的点的个数。
for(i = 1 ; i < 255 ; i++)
{
	for(j = 1 ; j < 255 ; j++)
	{
		// grays数组的index为灰度值，值为该灰度值的点的个数
		grays[getGrayAt(i, j)]++;
	}
}

// 第二步，获得归一化之后的直方图
for(pi = 0 ; pi < grays.length ; pi++)
{
	p[pi] = grayList[pi] / (imgWidth * imgHeight); // p数组中保存的是每个灰度的百分比
}
// 第三步，累计的归一化直方图
for(ci = 0 ; ci < p.length ; ci++)
{
	c[ci] = 0;
	for(cj = 0 ; cj < ci ; cj++)
	{
		c[ci] += p[cj]; // 数组c中保存的是归一化之后的直方图
	}
}
//
// 最后，转换成新的位图
for(ti = 1 ; ti < 255 ; ti++)
{
	for(tj = 1 ; tj < 255 ; tj++)
	{
		t[ti][tj] = c[getGray(originaImage.getGrayAt(ti, tj))] * (maxGray - minGray) + minGray;
	}
}
// maxGray是原图中最高的灰度值，minGray是最低的。
// 数组t即为新的图的像素矩阵。

补充几个AS的方法：

public static function splitColor(color:uint):Array
{
	var red:uint = color >> 16 & 0xFF;
	var green:uint = color >> 8 & 0xFF;
	var blue:uint = color & 0xFF;
	return [red, green, blue];
}

public static function getGray(color:uint):uint
{
	var RGB:Array = splitColor(color);
	return uint((RGB[0] + RGB[1] + RGB[2]) / 3);
}

public static function getColor(gray:uint):uint
{
	return gray * 65536 + gray * 256 + gray;
}

[code language="c"]Cannot modify header information - headers already sent by[/code]

最简单的解决方法是将php.ini中设置

[code language="c"]set output_buffering = On[/code]

这种方法开启了所有php程序的输出缓存，这样做可能影响php执行效率，这取决于服务器的性能和代码的复杂度。但是至少我现在运行良好。

关于flex中的国际化。

1. 在任何地方放置语言根目录，然后按照语言创建子目录，比如英文是en_US，简体中文是zh_CN，其他的看手册；
2. 每个语言包的文件都是xxx.properties，xxx是文件名，扩展名都不变；
3. 将语言根目录添加到项目的sources Path中，如果本来就在，就不用改了；
4. 编译的时候设置-locale zh_CN，多个语言用空格隔开；
5. 如果在SDK的frameworkslocale目录下没有你使用的语言，比如4.0之前的SDK就没有zh_CN，将4.0之后的同目录下的文件直接copy过去使用即可；
6. 在flex代码中使用resourceManager.localeChain来定义默认的语言和优先级；
7. 使用的方法一般如下：
   1. 先要绑定：[ResourceBundle("xxx")]
   2. resourceManager.getString(bundle, key);其中bundle是绑定的文件名称，比如前面的xxx，key是文件中对应的每个键值对的key；
   3. @Resource(bundle=’xxx’, key=’….’)这是用在flex中的，用法都差不多。

差不多就这样吧。如果是flex项目用起来似乎还不错，但是不能实时切换。有待改善。

整个安装过程非常简单，清晰。fb4linux的作者应该也是国人，相比之下真是自惭形秽。

不过似乎没有找到flashplayer10 debug plus for linux x86_64，debug的时候无法连接player。目前只能使用自己写的调试工具来调试了。

i wrote lots of codes, most of which are UI components. in fact, i didnot understant what is “UI component”, so i named them all as “Tools” in TAS.

anyhow, “TAS” coms back and rename to “FAS”, means “FinalBug Framework for ActionScript”. “Tang” is changed to “FinalBug” which is my nickname and the name of this site. a “Framework” is also added, means i will do more on my ActionScript lib.

nowadays, project FAS is hosted in google code whit the name finalbug-fas (because “fas” is used by other project). anyone can feel free to download the archived .swc files or check out sources via SVN.

for more infos, plz check FAS page.