博客园_叶落为重生每片落下的叶子都是为了下一次的涅槃...^_^

基于【双密度松弛算法】的二维流体粒子模拟

2012-05-23T14:16:00Z

以技术预研的心态做的一个东东。基于【双密度松弛算法】

目前来看应用价值不大，更多的是扩展一些思路，扩大前端方向，或者说是js能做的事的范围。大家路过围观一下就好。

源码不多，托管在 github/hongru/fluid上，感兴趣的可以大致看一看。

很早以前自己也做了个类似的，不过那个算法没有理论依据，自己瞎想的。离开了html5，面对“流体力学”，我只能旁观了...。

【实现的思路】

最关键的还是【双密度松弛算法】的实现。具体的算法可以参考文献和资料：

另有一个 html5 版本的粒子流体模拟；实现思路略有不同，可以参考：http://www.music.mcgill.ca/~sinclair/content/blog/liquid_simulator_ported_to_canvas

使用js来做这种高计算量的事情，还是有点吃不住.

本文同步发表在http://www.alloyteam.com/2012/05/fluid-simulation/

本文链接

为什么我推荐事件委托而不是批量绑定

2012-05-20T14:55:00Z

太长时间没写blog了，最近迷迷糊糊，又到一个周末，为了给自己一个交代，还是尽力记录点东西吧。免得哪天失忆想回去找资料都没地方找了。

今天要记录的东西很简单，就是事件委托。我相信但凡一个做前端方向的，甚至不是前端方向的编码者，对于dom元素的事件委托应该都了解了。所以今天不是说“事件委托”是什么？而是说为什么需要它。

【基于前端模版的开发】

我们先说这个，为什么要先说这个呢，因为事件委托在这种模式下显得比较有价值。

前端模版-相信大家也都耳熟能详，玩的很溜了。web的越来越多的工作开始移交到前端来做。其中就包含这一个东西。当然，我们今天也不讨论前端模版的优势。而是要看接下来使用过程中可能遇到的一些问题。

比如简单的，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script>
var $T = new function () {
var $ = this;
// escape
this.escape = function(string) {
return (''+string).replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\//g,'/');
};
// template
this.templateSettings = {
evaluate : /{{([\s\S]+?)}}/g,
interpolate : /{{=([\s\S]+?)}}/g,
escape : /{{-([\s\S]+?)}}/g
};
var noMatch = /.^/;
var unescape = function(code) {
return code.replace(/\\\\/g, '\\').replace(/\\'/g, "'");
};

this.template = function (str, data) {
var c = $.templateSettings;
var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
'with(obj||{}){__p.push(\'' +
str.replace(/\\/g, '\\\\')
.replace(/'/g, "\\'")
.replace(c.escape || noMatch, function(match, code) {
return "',$.escape(" + unescape(code) + "),'";
})
.replace(c.interpolate || noMatch, function(match, code) {
return "'," + unescape(code) + ",'";
})
.replace(c.evaluate || noMatch, function(match, code) {
return "');" + unescape(code).replace(/[\r\n\t]/g, ' ') + ";__p.push('";
})
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n')
.replace(/\t/g, '\\t')
+ "');}return __p.join('');";

var func = new Function('obj', '$', tmpl);
if (data) return func(data, $);

return function (data) {
return func.call(this, data, $);
};
}
}

var tpl1 = '<div>我由第一个模版生成 {{= name }} <button onclick="say.call(this)">one</button></div>',
tpl2 = '<div>我由第二个模版生成 {{= name }} <button onclick="say.call(this)">two</button></div>';

function say () {
alert(this.value || this.innerHTML)
}

document.body.innerHTML = $T.template(tpl1, {name: 'Horizon'})
</script>
</body>

可能大家看这个：

var tpl1 = '<div>我由第一个模版生成 {{= name }} <button onclick="say.call(this)">one</button></div>',
tpl2 = '<div>我由第二个模版生成 {{= name }} <button onclick="say.call(this)">two</button></div>';

看里面这个onclick总会觉得别扭。但是我们还得绑事件呀，直接用addEventListener或者attachEvent，一旦换模版重置innerHTML，那之前的addEventListener不就没用了么....

总不能每次都重绑一次吧？？而且通常也容易带出内存泄漏等等乱七八糟的东西。

所以，这时候，事件委托就有用了。

【利用委托进行事件派发】

一个简单的委托例子可能像下面的代码：

<ul id="dele-ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var $E = {};
$E.on = function (o, e, f) {
return o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function () { f.call(o) });
};

$E.on(document.getElementById('dele-ul'), 'click', function (e) {
var tar = e.target || e.srcElement;
if (tar.nodeName.toLowerCase() == 'li') {
alert(tar.innerHTML);
}
})
</script>

可能注意到里面有个过滤指定dom的代码

if (tar.nodeName.toLowerCase() == 'li') { ... }

当元素简单时，当然还好，当dom层级复杂时。我们就需要做一点小手脚。

给我们需要绑事件的元素，加个标志位，然后利用事件冒泡即可。

简单的，比如下面的代码：

$E = new function () {
function on (o, e, f) {
return o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function () { f.call(o) });
};
function bubbleTo (el, endEl, key) {
if (!el || (el && el == document)) {
return null;
} else if (el == endEl || (el.getAttribute && el.getAttribute(key))) {
return el;
} else if (el.parentNode) {
return bubbleTo(el.parentNode, endEl, key);
} else {
return null;
}
}

function dispatch (el, type, key, distributor) {
if (typeof key == 'object') {
distributor = key;
key = 'data-cmd';
}
$E.on(el, type, function (e) {
var tar = bubbleTo(e.target, el, key);
if (tar) {
var cmd = tar.getAttribute(key);
distributor[cmd] && distributor[cmd].call && distributor[cmd].call(tar, e, tar);
}
});
}

this.on = on;
this.bubbleTo = bubbleTo;
this.dispatch = dispatch;
}

原理就是加一个指定标志位，冒泡到有指定属性的，就停下来，为他响应对应的事件。当然前提是有约定（这个约定属性不能乱用 ^.^）

于是我们就可以这样用：

<body>
<section>
...
<button data-custom-cmd="sayHi"><button>
<div id="tpl-con">
...
</div>
...
</section>

<script>
var tpl1 = '<a data-custom-cmd="walk"><span>{{= name }}</span></a>';
// use tpl
...

// dispatch Event
$E.dispatch(document.body, 'click', 'data-custom-cmd', {
'sayHi': function (e, tar) {
// todo
},
'walk': function (e, tar) {
// todo
}
...
});
</script>
</body>

于是这样，几乎所有的 click 事件全部放到body上来处理了。　

不用担心 templete 模板化，会把之前的事件弄没了。

同时，也可以大大减少对于内存泄漏的一些担心。

【后记】

当然，这只是一个很小很简单的技巧和经验，同时也不适用于所有情况，比如 resize， mousemove 之类的场景，基本不适用。但是对于常用的类似click，mousedown，mouseup之类。大部分情况还是可以考虑一下的。

说不定可以解决一些意想不到的问题。(^^)

简单的东西不用多说，一个小技巧，仅供参考而已，估计已经有很多同学早就开始这样做了。

本文链接

关于简单的碰撞检测

2012-03-31T15:41:00Z

【前言】

这篇博文旨在给自己做个记录和备忘，同时希望也能给有这方面简易碰撞模型需求的同学一点点参考价值。

【关于像素级别检测】

前一阵有同学问我说能否做到像素级别的碰撞检测，做过类似碰撞检测的同学应该清楚，按照我们最常规的想法，假如要检测一个运动的物体和一条线之间是否有碰撞，最简单的判断条件，就是看当前帧，这个物体的位置，是否超过的我们的界定范围...

但这样简单的判定确实是有问题的，我们举一个实际一点的例子。

假如小球从 a 点向 c 点的方向落下。外面的黑框为我们所示的边界，那么，我们想要小球在碰到边界的时候反弹... 那么我们该怎么做呢？

可能有同学会迫不及待说了，这还不简单，一个条件语句搞定：假设小球的纵向速度为 vy，那么在循环帧里判断小球当前的位置，当发现位置低于边界的时候 vy = -vy 就可以了。

没错，这的确是最简单的判别方法。但是也是漏洞百出的办法。在复杂度不高的情况下勉强可以胜任需求。

如果我们把要求升级一点。小球每反弹一次，它的纵向速度值降为原来的 0.5 ，那么会出现什么情况下。我们假设每个循环帧的间隔为dt，我下面画出小球在临界碰撞前后3帧位置的示意图，大家看看就会发现问题了。

假设a,b,c 三点为小球 1，2，3帧的位置，那么我们按上面说的检测方法，小球在b点的时候检测发现小球位置已经超出界定范围了，那么 vy 反向，同时，vy的数值减半，那么可想而知，再下一帧的位置就会大约是在 c点的位置。

那么按照上面说的检测方法，问题就来了，在 c 点，检测发现，小球位置依然在界定范围外，又被判定为 “碰撞” ，速度反向，那么可想而知，以此类推，这个小球就永远也弹不起来了... 坑爹。

好吧，为了绕过这种问题，肯定有同学都想到了，我们的碰撞检测再加上对于速度方向的判断不就可以了吗？

没错，对于这个模型，再加上一个速度方向的判断，也可以勉强的解决问题。不过话说回来，这样不觉得有些别扭吗？而且其实反弹的点也不对，正确的应该是在红色交点 o 处反弹的，结果按照上面的思路变成在 b 点反弹了.... 还是有点坑爹。

那么怎么把反弹点从b点移到o点呢？

可能又有同学会说了，你这不就回到最开始的问题了吗，要精确的得到反弹点 o 不就需要所谓的像素级判断了吗？理论上是不可能的....

确实，如果按照上面的思路是不可能的。但是换个思路，一切就有戏了。

【关于线段相交】

回到正题，上面的例子已经表明那种简单的利用当前位置来判断碰撞的模型是不太靠谱的。那么换个思路，按小球的运行轨迹与边界的相交性来判断，是否可行呢？
什么意思呢？就是说我们把小球当前帧和下一帧的位置连接起来，变成一条线段，然后跟需要进行检测的边界这条线段放到一起，碰撞问题就变成数学中简单的【二维平面中两条线段相交问题】了。

同样，我们以 a, b, c 三点来表示小球前后 3 帧的位置，中间那条黑色的实线表示边界N, 那么在第一帧到第二帧，也就是 a -> b 的运行过程中，线段ab 和边界N 明显是没有交点的，那么自然可以认为是没有碰撞的。

而由b->c 的过程中，可以发现，线段bc 和 N 就有交点 o 了，只要我们有办法证明 bc 和N 相交，并且求出这个交点 o 的位置，那么就可以证明小球在 b -> c 的运行过程中，必然和边界N 碰撞。同时交点 o 即为反弹点。

通过这种方式来判断碰撞关系的话，就不会说因为小球的速度过大或者 FPS 过小而造成碰撞检测失效的情况了，而且还能精确的得到反弹点。甚至反弹角度。

好吧，接下来，咋们有了数学模型，就是所谓的关于两条线段的相交问题。这个问题怎么处理呢。

判断已知的两条线段是否相交的办法，我这里提供两个。

1. 分别求出两条线段的二维表示公式如：线段A： y= a1*x + b1; 线段B： y=a2*x+b2;
然后把线段A 的两个端点分别带到线段B 的公式里。
我们知道，把一个点坐标带到一条直线公式中， a2*x + b2 -y ；如果等于0 ，那么表示点在线上，如果小于0表示点在线的一方，大于0 表示在另一方。
那么当两个端点带到公式里面的结果，一正一负就可以表示这条线段的两个端点分别在这条直线的两边。

如：

把 a， b点分别带到线段N 所在的直线公式中，如果结果一正一负就可以表示 a, b 分布在N 的两边，

但是光把 a, b 戴到N中去算是不够的，因为还有这种情况，

因为是线段嘛，所以还要把另一条线段的端点再带到自己所在直线的公式上，按同样的方式进行计算，得到另一条线段端点也分布在相对应的线段两边的时候，才能保证线段是相交的。

另外一种判断两条线段是否相交的思路，可以用向量外积来判断。关于外积，如果已经还给数学老师的同学，可以百度或者google一下。简单的理解，其实外积本身也就是带方向的向量，数值上等于两条向量组成的三角形的外接矩形面积。

我们可以简单的理解为，我们先求线段ab 的两个端点相对于 cd 的“外积” 。比如，由 a,c,d 三点组成的三角形的外积，得到的结果是一个带方向的数值，我们假定为 S_acd, 同样的方式得到 b点和线段cd 组成的三角形外积 S_bcd 。
数学上可以证明，如果a， b 两点分布在 cd 的两侧的话，那么 S_acd 和S_bcd 一定是反向的。即 S_acd*S_bcd < 0;

同理，为了避免类似：

这种，虽然 S_abc * S_abd < 0 , 但是 S_acd*S_bcd > 0;

同样不能判定相交。

所以必须是：

S_abc * S_abd < 0
S_acd * S_bcd < 0

同时满足时，才能证明 ab 和 cd 两条线段相交。

关于二维坐标系三角形外积的求法，我这里给出简单的代码：

/* == Helper == */
// 用于帮助检测碰撞
/**
* Helper area calculation function. Returns 2 X the area.
* 三角形外积
*
* @param {Vec2} pointA
* @param {Vec2} pointB
* @param {Vec2} pointC
* @return {number}
*/
function signed2DTriArea(pointA, pointB, pointC) {
return ((pointA.x - pointC.x) * (pointB.y - pointC.y) - (pointA.y - pointC.y) * (pointB.x - pointC.x));
}

有了上面的知识，就可以得出两条线段相交的判定方法和交点了：

/**
* Helper intersection function. Checks if two lines intersect.
*
* @param {LineSegment2} a Line A
* @param {LineSegment2} b Line B
* @return {Object} An object is returned with intersection point and time if they intersect, otherwise null.
* 判断两条线段是否相交，如果是，返回交点，和相交比例，否则返回null
*/
function intersectLineSegments(a, b) {
var a1 = signed2DTriArea(a.a, a.b, b.b);
var a2 = signed2DTriArea(a.a, a.b, b.a);
if (a1 * a2 < 0) {
var a3 = signed2DTriArea(b.a, b.b, a.a);
var a4 = a3 + a2 - a1;
if (a3 * a4 < 0) {
var intersectionTime = a3 / (a3 - a4);

// intersectionPoint = a.a + intersectionTime * (a.b - a.a);
var intersectionPoint = new Vec2(a.b.x, a.b.y);
intersectionPoint.sub(a.a);
intersectionPoint.mul(intersectionTime);
intersectionPoint.add(a.a);

return {intersectionPoint: intersectionPoint,intersectionTime : intersectionTime};
}
}

return null;
}

【关于线段类】

当然，我们要用到线段的概念，那么最好抽象出一个线段的类，我这里也提供在线段处理中常用的几个方法，比如

获取线段上到指定点p 最短距离的点
获取距离p点最短距离的点的比例
得到 p 点到线段的最短距离

类似的，可以看看这个 demo 就知道是怎么回事了。http://hongru.github.com/proj/laro/test/lineSegment.test.html （需canvas支持，里面几个端点都是可以拖动的）。

【关于由多条线段组成的不规则凸起物的碰撞】

有了针对运动物体相对于一条线段碰撞的检测后，那么由多条线段组成的凸起物也就顺着解决就行，无非就是将这种由多条线段组成的凸起物按每条边分解成单一的向量，分别检测就行。
以下是一个圆相对于不规则突起物的碰撞检测判断代码：

/**
* Test a sweep-circle against convex shape.
*
* @param {Circle} circle Circle used in test
* @param {Vec2} movement Vector describing movement
* @param {ConvexShape} shape Shape to be tested against
* @return {Collisions} Collision objects that holds both contact points and intersection time.
* 判断一个移动的圆和不规则凸起形状的碰撞相交关系，如果相交，返回关联的点和相交比例
* convex shape 的 points 顶点顺序需要是逆时针排列的，这样可以避免在内部碰撞的检测，同时movement反向的也可以直接跳出
*/
function getCollisionShape(circle, movement, shape) {
var contactPoints = [],
SWEEP_EPSILON = pkg.SWEEP_EPSILON;

var foundOne = false;
var minIntersectionTime = Number.MAX_VALUE;
var localIntersectionTime = Number.MAX_VALUE;

var i = 0; // Used for iteration
var pt; // Handle during loops
var contact; // Placeholder for eventual contact point

if (shape.numOfPoints() > 1) {
pt = shape.points;
for (i = 0; i < pt.length; i++) {
var last = pt[i];
var curr = i+1 === pt.length ? pt[0] : pt[i+1];

// last & curr is now start and end points of the line.
// 远离
var normal = new Vec2(-(curr.y - last.y), curr.x - last.x);
if (0 < normal.dot(movement)) {
continue;
}

normal.normalize();

// last = last + normal * (circle.r + SWEEP_EPSILON)
var _last = new Vec2(normal.x, normal.y);
_last.mul(circle.r + SWEEP_EPSILON);
_last.add(last);

// curr = curr + normal * (circle.r + SWEEP_EPSILON)
var _curr = new Vec2(normal.x, normal.y);
_curr.mul(circle.r + SWEEP_EPSILON);
_curr.add(curr);

var endPos = new Vec2(circle.c.x, circle.c.y);
endPos.add(movement);

var localContact = new Vec2();

var res = intersectLineSegments(new LineSegment2(circle.c, endPos), new LineSegment2(_last, _curr));
if (res) {
if (res.intersectionTime < minIntersectionTime) {
foundOne = true;
minIntersectionTime = res.intersectionTime;

// localContact - normal * circle.r
var _lc = new Vec2(normal.x, normal.y);
_lc.mul(circle.r);

res.intersectionPoint.sub(_lc);

contact = new CollisionContact(res.intersectionPoint, normal, 0, shape.user, shape.material);
}
}
}
}

if (!foundOne) {
pt = shape.points;
for (i = 0; i < pt.length; i++) {
localIntersectionTime = Number.MAX_VALUE;

// Multiply the length of the ray to make sure that the spheres won't go
// through each other at extremely low speeds
var _mov = new Vec2(movement.x, movement.y);
_mov.mul(1.1);
if (intersectRaySphere(new Ray2(circle.c, _mov), new Circle(pt[i], circle.r))) {
localIntersectionTime = closure();
if (localIntersectionTime < minIntersectionTime) {
// Got collision.
foundOne = true;
minIntersectionTime = localIntersectionTime;

// circle.c + localIntersectionTime * movement - pt[i]
var _normal = new Vec2(movement.x, movement.y);
_normal.mul(localIntersectionTime);
_normal.sub(pt[i]);
_normal.add(circle.c);
_normal.normalize();

// Contact point is the vertex.
// Normal is vector from corner to position of sphere at collision time.
contact = new CollisionContact(pt[i], _normal, 0, shape.user, shape.material);
}
}
}
}

if (foundOne) {
contactPoints.push(contact);
return new Collisions(contactPoints, minIntersectionTime);
}
else {
return null;
}
};

其他的代码我就不多贴了，相信明白了原理之后，大家都能自己写出类似功能的代码。
我也就不献丑了。

最后把另外两个用上面的方式进行碰撞检测的demo 贴出来：（都需要canvas支持）
http://hongru.github.com/proj/laro/test/laro.collision.test2.html
http://hongru.github.com/proj/laro/test/laro.collision.test3.html

【注：test3 demo 引入的弹性碰撞和非弹性碰撞的概念，这个后面再说】

【后记】
代码功能越多，复杂度越高，必然导致计算量增加。更重要的是找一个权衡吧。
PS，吐槽下，所谓的弹性工作时间没了，明天要9点前到公司，坑爹，要早起了。
今天早点睡吧，各位晚安 : )

本文链接

事情没有想象中那么难--JX官网首页3D粒子效果

2012-03-27T16:43:00Z

上周为AlloyTeam/JX做了个简单的官网http://alloyteam.github.com/JX/，当时文档，demo以及其他的附属工具都还没完善，地址就流了出去...

独立的粒子特效demo 可以看这里 http://hongru.github.com/proj/laro/examples/jxhome/

JX 作为webqq的底层，框架本身怎么样，我这里暂时不作评论，很多同学对JX官网home页的opening动画的实现很感兴趣，我这里就简单说一下实现的思路。应该没有大家想象中麻烦。

【关于canvas的使用】

home页的粒子效果其实是受启发于 Google 2011年的I/O 大会的opening。只是实现思路可能稍有不同。我知道I/O大会上他们的opening用的是Three.js 来做3D渲染，但是具体的细节我也没有深究。我这里只是说一下我自己的实现思路。

目前这个例子效果是基于canvas的，其实用dom也是可以实现的。只是担心大量的dom操作和appendChild，removeChild之类的，对性能和内存的影响蛮大，就没去做兼容。

实现思路就是：基于canvas的 3D 粒子旋转算法 + 依赖imageData 生成模型数组。

【3D粒子旋转】

这个部分说麻烦也麻烦，说简单也很简单。其实就是两三个数学公式的事儿。我之前有好几篇随笔都是讲它的，所以我这里也就不重复赘述了。具体可以参考：

【怎么让粒子组成指定形状？】

最开始想到的思路，是自己拼数组出来，类似现在很多html5小游戏的地图数据一样，通过数组中特定的值来表示某一个具体的位置，比如这个demo（http://hongru.github.com/test/google-clock.html）里面的由粒子组成的数字，其实最开始就是一组特定的数组，如下：

var NUM = [
'#### ########## ##################### ',
'# # # # ## ## # ## ## # ',
'# # # # ## ## # ## ## # # ',
'# # ##################### ######### ',
'# # ## # # ## # ## # # # ',
'# # ## # # ## # ## # # ',
'#### ######### ######### ######### '
]

由左向右分别是0-9以及冒号。通过这种数组， # 就代表一个粒子。这种人工生成模型数组的方式还可以处理一些简单的模型，例如这种数字，或者少数字母等等。

但是如果想要让粒子组成一些稍微复杂一些的图案，人工排列的方式就变得不太靠谱了。

那有什么办法可以让它自动生成这种类似的模型数组呢？

canvas的imageData就有用了。我们知道canvas支持像素级别的操作，可以把一个canvas画布里面每一个像素点都拿出来独立处理。
假如，我们把一个canvas画布上不透明或者有颜色的所有像素点都找出来，把每一个像素点都当成一个粒子的话，那么岂不是我们在canvas上写的字，draw的image等等，都可以由很多粒子组成？

比如这个demo（http://hongru.github.com/test/my-text-particle.html）：

大家注意这一段代码：

getImageData: function () {
var imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
for (var x = 0; x < imageData.width; x ++) {
for (var y = 0; y < imageData.height; y ++) {
//var i = 4*(x * imageData.height + y);
var i = 4*(y * imageData.width + x);
if (imageData.data[i + 3] > 128) {
this.place ++;
(this.place%4 == 0) && this.particles.push(new Particle(x, y, this.canvas));
}
}
}
},

我们遍历canvas的指定区域像素点，把透明度大于 0.5 的点都找出来，当成一个particle来处理。当然，为了减少并行的粒子数造成的性能问题，我这里把符合条件的粒子又除以了4.

看到这里，我想应该好多同学都明白了怎么让粒子组成想要的图形或者字符了吧。没错，就是借助图片，利用imageData取出想要的点。然后记录下它的位置和颜色，利用这些信息生成自定义的粒子。

当然，这里还有个小技巧，就是关于图片大小的控制，因为imageData是像素级别的，所以太大图片，必然导致过多的粒子，我们做这种效果并不需要多精确的形状，而且太多的粒子在后续渲染上是个极大的消耗，所以通常控制在 20*20 大小，算比较合适，也就是保持在 400 个粒子左右变化，在图形组成和变换性能上取一个权衡点。

【最后，关于进程的控制】

这也是一个关键点，通常，一个稍有经验的开发者，有了上面说的几点知识后，应该就能大致写出类似的效果了，但是如果涉及到像这种连续几个不同的动画来转换的时候，进程的控制会让人觉得头疼，因为从一个动画进入到下一个动画的时候，为了降低性能消耗，需要把上一次使用的粒子请出循环数组，而是用下一个动画需要的模型数组来变化。另外我们还需要在动画连续帧变化的loop 中控制每个动画过程的时间，以便到了某个节点可以进入到下一个动画进程。

为了很好的控制进程，简化编码思路，我这里引入了一个【有限状态机 FSM】的概念。引入这个概念之后，基本上相似的动画，每个动画进程可以独立成一个 status来处理，互相基本没有耦合，只用关心自己即可。而且代码都具有相似的结构

进入状态-update更新-重绘draw-状态转换条件transition- 离开状态leave

这很好的帮助了我们简化思路。便利的控制整个进程。

关于有限状态机更多的信息和源码以及使用方法，可以参照源码：
https://github.com/hongru/Laro/blob/master/src/game/fsm.js
https://github.com/hongru/Laro/blob/master/src/game/state.js

【后记】

思路大致就是这样，当然，细节方面还有很多需要注意的地方，如果感兴趣的同学不妨一点点尝试，从3D 旋转算法开始，完成一个类似的特效。对编码思路以及简易的图形学算法应该会有些帮助。

大家晚安 : )

本文链接

【Laro】- About Game Engine

2012-03-16T15:13:00Z

经过断断续续折腾。关于html5 canvas 的一个游戏引擎的底层框架部分大致完成了。

现在是version 0.1，还有很多不完善的地方，或者是bug。亦或设计不合理的地方。

我把地址放出来，正好我看院子里也有些同学写html5 的小游戏或者游戏引擎。感兴趣的同学可以大家互相交流一下，互帮互助，一起成长。

关于Laro ，放在github上 https://github.com/hongru/Laro 或者 https://github.com/AlloyTeam/Laro 都可以看到源码。

感兴趣的同学，或者有好的意见建议的同学可以在上面留言。互相交流。

如果说是游戏引擎，目前还仅仅完成了30%-40%的工作，因为最终目的是要以底层框架为基础，搭建一个可视化的游戏编辑器。方便快捷的制作html5 小游戏。

所以今后还会有漫漫长路。不停的优化，继续。

里面也放了利用这个底层框架和网络上的一些素材资源制作的简易的演示demo。可以稍微体验一下，可能会有些bug。

http://hongru.github.com/proj/laro/examples/emberwind/

http://hongru.github.com/proj/laro/examples/typeshot/index.html

希望能和大家多交流。

另外，这里再附上 JX 框架的地址，也已经开源到github。https://github.com/AlloyTeam/JX 关于Jx，是webQQhttp://web.qq.com/ 2.0~4.0 一直在使用的一个底层js框架。目前正在写一些详细一些的介绍文档和官网制作。大家可以提前先去看一下。也欢迎提一些意见和建议。

各位晚安 : )

本文链接

【前端应该知道的那些事儿】运动学基础

2012-03-16T12:41:00Z

【写在前面的话：】
前不久刚看到过一句话：说好的技术文章应该让读者感觉增加信心，而不是失去信心。
有感于这句话是因为以前觉得发一些貌似高深的，看起来nb的东西才算一篇好博文，可是多少有点炫技的成分。可是后来越发觉想把一个看起来简单的问题说通透也着实不易。我希望今后的文章多少能带给更多的读者一些帮助吧。这是我的目标之一。

web前端，确实算编码里面的挺特殊的一个职位，不仅仅要理性的编码，还要感性的接触UI，通常我都把这种工作叫做需要情商的码字工作者。

要说前端有多难，我想会被很多做算法或者底层的同学所不齿。确实，前台的工作并不算难，尤其是web端的前台，有困难的部分，那也是少数。所以在互联网发展初期，都没有前端这个职位，就算后来有了前端这个职位，也曾被当作是门槛最低的IT类职位之一。很多同学学习前端相关的知识，初衷很简单，因为好学，包括当年的自己也是一样 : )

当然，如今随着交互逻辑的不断复杂，用户体验的不断提升，外带很多后端的逻辑也都纷纷转到前端来实现。前端的工作者们开始有了一些价值。当然，你要担当的更多，必然需要会的更多。所以如今对于一个优秀的前台编码工作者来说，要求高了很多。

但是同样，还是不能算难。因为哪怕前端们开始接触一些算法，一些数学物理的东西，但常用的，通常也仅限于初衷，高中的程度。所以神马高等数学，高等物理之类的。咱暂时还用不上，大家完全不用惧。

那么，比如：

【关于缓动】
我相信在DHTML时代，也就是所谓的动态 html 的时候，那时候javascript 脚本除了用来做一些表单验证和提交之外，开始干起让页面动起来的事情。最常见的莫过于什么幻灯片，轮播banner之类的。甚至在当时能够手写出一款好的，兼容的轮播插件成了一件非常niu的事儿。那么回想一下，我们最开始学习，尝试自己写一个轮播插件的时候，遇到的头疼的事儿，我想缓动应该算一个了吧。
好吧，咱们就先来说说它。

缓动难吗，不难，我们先说一个最简单的。所谓“缓动”，无非就是运动的越来越缓慢呗。那么怎么让一个物体运动的越来越缓慢呢。

我们用的计时器，不管你是用setInterval也好，setTimeout也好，或者 requestAnimationFrame也好，思路都一样。反正把它想象成是单位时间重复调用某个函数就行。那就好，既然单位时间是一样，那么我们让单位时间内物体运行的距离越来越小不就成了“缓动”了吗。

ok，咱们可以试试看：

假如我们有一段固定的路程100米，然后让物体每个单位时间里面运动的距离都是它距离目的地剩余距离的1/10，什么意思呢。即物体最开始距离目的地100米，那么它第一个单位时间里朝目的地运动 100*1/10 ，即10米，于是，第二个单位时间里，它距离目的地就只有90米了，那么第二次运动 90*1/10 ，即9米，... 不断叠加下去，由于物体总是距离目的地越来越近，那么它单位时间里运动的距离必然越来越小。这不就达到了我们缓动的目的的了么。

(function () {
var moveDis = 0,
conEl = document.getElementById('container'),
maxDis = (conEl.offsetWidth-22) || (800-20), // 总距离
moveEl = document.getElementById('move');

function step () {
var nowLeft = parseInt(moveEl.style['left']),
leftDis = maxDis - nowLeft, // 获取距离目的地的距离
stepDis = Math.ceil(leftDis*.015); // 每次移动剩余距离的固定百分比。

nowLeft += stepDis; // 不断叠加
moveEl.style['left'] = nowLeft + 'px';

requestAnimFrame(step); // repeat
}

step();

})();

Tween Demo 1

当然，这是最简单的模式，咱们接着往下看。

那么，那些看起来高深的缓动公式是怎么来的呢？？

其实也很简单，想想我们初中，高中学的数学吧，二次函数，三角函数之类的。

先看二次函数，也就是我们的抛物线：

为什么我要说先看二次函数或者三角函数呢。他们的轨迹跟缓动有什么关系？我们接着往下看：

拿上面的那个最简单的demo举例，我们把方块的运行距离s 和时间 t的运动关系画出来，看会是什么样子的。

看这个demo：
Tween Demo 2

这里面的缓动算法跟上面那个最简单的模式一模一样。我们把它的 t-s 路线图画出来，可以看出一点端倪了吧。没看出来的同学，把它旋转一下，想象成 x轴时间， y轴位移。那么是不是就跟我上面画那个二次函数的左半部分的形状很像。

所以，到此为止，相信不难理解，为什么缓动的公式通常和二次函数或者三角函数有关，直观一点的话说，就是在某一个区间内位移的变化率是随着时间递减的。那么这种轨迹都可以用作缓动公式。

那么，

我们怎么用二次函数来做缓动呢？很简单，大家随着我的思路来。我们要设计一个缓动的接口api，假如是类似下面这样,我们先想一个最简单的方式。

【已知】：一物体要从 0 运行到 400，运行时间为1秒（1000ms）。
那么我们怎么为它来设计一个二次函数的缓动呢。我们先画一个示意图：

那么求的方程的系数 a = 0.00005, b = -0.1;

那么方程就出来了 s = 0.00005*t^2 - 0.1*t (0 < t <=1000);

剩下的就好办了，把每个时间点的位置渲染出来就好了。
例如，我们做个例子，设计一个api：

// from 表示起始点
// to 表示到达位置
// t 表示运行总时间
tween(from, to, t)

按照上面说的思路，其实就是已知运行距离（from-to）和运行时间t ，求一个二次函数公式而已。

// 二次函数 s = a*t^2 + b*t;
// 顶点： (to-from) = a*t^2 + b*t
// 右侧x轴交点： 0 = a*(2t)^2 + b*2t
// 得出 a = -(to-from)/t^2; b = 2(to-from)/t;

var left = a*st*st + b*st;
o.style['left'] = from + left + 'px';

看demo：
　 Tween Demo 3 　(demo里面由于用的普通的dom生成的点图，会占内存，请不要测试过多次 ^^).

原理其实就是那么简单，其实大家可以自己试一下，熟悉了之后完全可以封装出自己的好用的，易用的缓动方法。

用这类的二次函数，还有一个很常见的场景，就是“重力系统”。

我们知道，如果忽略所谓的空气阻力和一些外界干扰因素，重力系统其实就完全可以简化成二次函数（抛物线）问题。

比如我们做个小游戏，系统有固定的向下的重力 g ,那么由用户操作的主角在像上跳的过程中，就完全可以按上面说的方式来考虑。

基本思路上面都说了，这次我们换个思路。都说数学和物理是相通的，那么这次已知在一个重力系统中，跳起初速度和重力大小。那么假设一个物体跳起该怎么运动呢？

S = v0*t + a*t^2
v0 = a*t

这两个应该是初中的物理公式吧。已知初速度v0 和加速度 a ，求位移还不简单。
其他的我就不多说了，看一个简单的demo吧：
弹跳Demo

看完了【二次函数】，咱们再看看【三角函数】，其实在我们常用的特效中，三角函数能做的事情比二次函数多很多。但是今天就只讲跟【缓动】相关的。

前面说了，凡是大家看到类似这种“山坡”形状的图，基本都可以做成类似的缓动。那么我们取sin函数的前 PI/2 部分，可以看出他也完全满足所谓的缓动的图形条件。

而且，基于sin函数做的缓动公式相对于二次函数而言，思路更简单。因为更容易得出位移相对时间的公式S-T：

/**
我们假设每一帧间隔时间为 dt，那么在这个dt时间内运动的距离为ds
那么，假设一个物体从 from 移动到 to 所花的时间为t，则容易得出在这个时间区间内用sin公式得到每个dt的位移公式ds
*/
function tween (from, to, t) {
// sin函数; ds = (to-from)*Math.sin(Math.PI*dt/(2*t));
}

剩下的工作，就是把计算出来的当前位置渲染到页面即可。我们这里还是以类似的例子为例：
　 sin 缓动 demo 　

【写在后面的话】
不知不觉也写了这么多了，所谓“会者不难”，本文说到底其实涉及的技术技巧其实并不多，我花这么大篇幅来说也是希望能给对运动学还不甚了解的同学一点帮助吧。
我希望我能把简单的东西说明白，至于有没有达到这个目的我也不得而知。

其实在前端的工作里，还有一些常用的数学和物理知识，但是都不难。说起来都很简单。比如前一阵的mac QQ浏览器的logo 周围的闪动旋转的星星。就是用了简单的椭圆公式。
http://hongru.github.com/test/qqbrowser/index.html

本文链接

每天出门前，记得提醒自己一遍，别落下了梦想

2012-02-25T16:19:00Z

好久没有更新blog了。今天终于有了心再写一篇。算是对自己工作和生活的一种回顾吧。

11年底和12年初的时候自己都没有写什么总结性质的博文，或者之类的东西。但是心里确是有稍微对过去的时间做一点结算工作的。

【关于个人】

过去差不多一年的时间里。做的事情不多，但是其实也不少。我这里都可以大概列出除了日常在公司工作之外自己在业余为自己专业提升而做的事情。在自己的github上面，去年有不少更新。主要的工作集中在3个较为大的项目上面。

一个是自己一点一点累计起来的关于javascript的基本lib。取名叫做Leta,内容倒没什么特别值得说的，都是根据工作经验和工作需求累积起来的关于前端工作的基本脚本库。当然还并没有完成，目前大概80%的样子吧。并且没有过多整理，相对有一点凌乱，在当前市面上已有众多相对完善的javascript lib 或者framework来说，可能好多人会说我这算又一个闭门造轮子，没什么太大的意义。然而我不这么想，我并不把它当成一个轮子，仅当作这是我专业成长的一个必经之路。重要的积累和沉淀的过程，至于会不会进行推广，有没有人来用，那又是另外一回事了。现在的我倒是没那么关注。
第二个是一个webgl的lib。取名Sandy,这个名字我倒是觉得可以小说一下。为什么会取名叫sandy，估计好多人也发现了，sandy的读音和中文的‘3D’读音蛮像的。所以为社么我们只能让英文的东西音译成中文？我们也可以把中文的发音译成英文不是吗？前一年我大概花了半年的时间一直在研究webgl相关的东西，倒也不是说想做出什么惊世骇俗之作。国外关于这方面前沿技术的研究比我们国内成熟很多，以three.js的代表的3D 的脚本框架稍微列一下，都可以列出不下10个。他们确实是我们学习和借鉴的很好的榜样。因为兴趣原因，我倒也做了不少关于3D建模的demo，包括算法模拟的也好，使用webgl的也好。也做过一两次分享。这里还有一个分享时总结的slide http://hongru.github.com/share/3D.html （请使用现代浏览器浏览，鼠标拖拽翻页）。
这是关于3D的东东。另外最近还利用webgl做了一个简单的照片美化的工具 Mr.Photo 。出发点也很简单，因为自己非常喜欢ios上的一个照片分享的应用instagram，里面对于图像滤镜的处理做的非常出色。能让不会拍照的我，用手机拍的照片经过它的滤镜就能变出大片的感觉。所以也就是想尝试一下。正好借助glfx，做了这个小东西。有兴趣的同学可以试一下。
第三个主要的方面就是也是大概持续了好几个月一直到现在还在做的一个html5 基于canvas 的2d或者2.5d 的游戏引擎。取名叫Laro, 我这里也说一下这个名字的由来。这个单词念起来有点奇怪，按英文的发音有点像“腊肉”,其实这个单词是菲律宾语中 “游戏”的意思。至于为什么选他，无非就是我对 L 打头的单词都有莫名的好感吧。这个游戏引擎经过大概接近半年的断断续续的更新。现在主体框架也算大概完成了90%左右了吧。只是一直在往上堆功能，还没有时间进行整理。比较凌乱。文档和demo相对比较缺乏。我这里经过在网上不断的搜集素材，拼接出了一个简单的Demo demo里面基本涵盖了做一个基于canvas的2d类游戏所需的基本的东西，比如场景切换，资源加载，动画帧的绘制，进程控制，声音控制，输入输出等等。当然刚说了，这只是一个不成形的demo。暂不用过多深究。随着html5技术的演变和不断推进，当前html5 相关的游戏框架也不算少了。而自己这个的亮点在哪里？我自己认为是对于游戏进程的控制上，也就是“有限状态机FSM”，详细这个东西对很多人来说并不陌生。但是目前把这个概念引入的页游的制作思路上的，好像还不多。至于这个东西对于像游戏这种典型的事件驱动的编程模型的好处，有兴趣的同学可以看看代码。后续的文档等我这个框架完善一些了。我会详细补上。

【接下来的打算】

刚才也说了，上面3块东西耗了我基本业余大部分的时间和精力。上面3个项目总的代码量加上注释的话，应该大约在15000 行左右。看起来不算多。但这确实挺费时费力的，跟平时的业务代码确实不太一样。所以关于去年一年自己的积累和成长，自己还算满意的。

同时，正因为一年内同时进行了3个项目，无法集中精力来完成其中一个，导致了上面3个项目的完成度都不太理想。大概都是在80%~90%左右。这也是我为什么之前一直没有公开宣布的原因。所以接下来一段时间的工作就是把这3个东西好好的完善下去。包括代码组织的调整，部分重构，以及冗余代码的提出，目录结构的整理。还有完整的项目文档，以及各个方面的demo与讲解。这会是很大一部分的工作量。

我的目的也不是说要多少人来用我的东西，或者要多少人知道，只是希望能够通过我个人的努力，完成一些东西，能给业界带来一些新鲜的活力。就已经很满足了。当然如果有人觉得代码里面有些部分有值得用的地方。部分拷出去使用也是ok的。

【关于团队】

去年7月份我换了工作。换了城市。到现在也有7个月有余了。在新的团队里面。我们希望也能为前端的技术发展做出一点点小小的贡献。所以今年除了工作上业务的需求外，团队的建设和发展也会是团队里每一个成员的重责。目前已经有开始着手在做了。

有了团队自己的 blog http://webpluz.org/ ,虽然blog上线才不久，内容也不算多，但是大家都会努力的将自己日常的工作积累往上分享的。我自己今后的blog大部分也会同时跟新到这个团队blog上面。我们会尽量把自己的团队blog做起来，尽量保质保量。主要方向还是在前端的前沿技术方面。希望大家如果觉得里面内容对自己还算有些帮助，多捧个场。
关于【html5沙龙】。这个之前一直没提及。http://www.mhtml5.com/ 不了解的同学可以去看看。主要是w3ctech 和 html5 研究小组，联合举办的在各大城市分享和推广html5相关技术的活动。基本每月在各大城市都会有，请相关同行进行分享交流，或者组织讨论，以及codejam等各种形式。目前深圳区的活动都是由我们团队组织和举办的。怎么说我也算是参与和组织者之一吧。所以也希望大家感兴趣的可以经常关注下这方面的活动。
另外团队也刚在github上建立了一个organization，希望今后能有好的作品以团队的形式开源给同行。https://github.com/organizations/qwt ，由于刚建立，目前里面暂时没有什么内容。但是这里可以给大家提前透露一下。可能不久后就会有好几个项目开源到上面。包括
- css3 UI Lib，一个方便大家选取使用 css3常用ui特效和控件的lib
- 还有就是上面提到的，关于3D建模的framework。
- 经过完善后的游戏引擎，包括游戏制作相关工具等。
- 新版的Jx 框架等等。

好了，说了这么多，该总结的，该展望的都差不多了。接下来就剩踏实努力的继续朝着自己的目标前进吧。

随着年龄的日益增长，也渐渐对自己所谓的梦想开始有了逐渐清晰的认知。至于梦想是什么？可能每个人都不太一样吧，这里暂时就不说了，梦想说的白了就没那么有力量了。

这里希望所有有梦想的人都踏踏实实努力的为了它努力吧。要相信，只要你付出的够多，一定会有回报的。

今天刚好看了一个关于动画大师宫崎骏和他儿子工作的一段纪录片。很有感概：

关于亲情，梦想，执着与坚持。对于专业度的严苛以及完美主义。这一定是其中最好的诠释之一。梦想不是说说而已的，梦想一定是一生的方向。今天和朋友吃完饭闲聊，我们为什么会对生活有诸多抱怨。那是因为原来我们对自己要求太低了。

有兴趣的朋友可以看看http://v.youku.com/v_show/id_XMzA1NTU5MDI4.html

好了，今天到此为止，各位晚安。

本文链接

canvas保存为data:image扩展功能的实现

2012-01-14T12:27:00Z

【已知】
canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。

【想要的】
往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，我不想新开一个tab，然后还要右键另存为...

我还需要更方便的自由的配置生成的图片的大小，比例等。

另外如果我还要别的图片格式，比如位图bmp，gif等怎么办...

【解决办法】
a)想直接把图片生成后download到本地，其实办法也很简单。直接改图片的mimeType，强制改成steam流类型的。比如‘image/octet-stream’，浏览器就会自动帮我们另存为..

b)图片大小，及比例的可控倒也好办，我们新建一个我们想要大小的canvas，把之前的canvas画布重新按照所要的比例，及大小draw到新的canvas上，然后用新的canvas来toDataURL即可。

c)想要bmp位图会麻烦些... 没有直接的接口，需要我们自己来生成。生成图片的响应头和响应体有一定的规则，略显麻烦。不过还能接受。剩下的就是性能问题，按像素级别来操作，对于一个大图来说计算量很有压力。

【实现】

/**
* covert canvas to image
* and save the image file
*/

var Canvas2Image = function () {

// check if support sth.
var $support = function () {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');

return {
canvas: !!ctx,
imageData: !!ctx.getImageData,
dataURL: !!canvas.toDataURL,
btoa: !!window.btoa
};
}();

var downloadMime = 'image/octet-stream';

function scaleCanvas (canvas, width, height) {
var w = canvas.width,
h = canvas.height;
if (width == undefined) {
width = w;
}
if (height == undefined) {
height = h;
}

var retCanvas = document.createElement('canvas');
var retCtx = retCanvas.getContext('2d');
retCanvas.width = width;
retCanvas.height = height;
retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
return retCanvas;
}

function getDataURL (canvas, type, width, height) {
canvas = scaleCanvas(canvas, width, height);
return canvas.toDataURL(type);
}

function saveFile (strData) {
document.location.href = strData;
}

function genImage(strData) {
var img = document.createElement('img');
img.src = strData;
return img;
}
function fixType (type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
}
function encodeData (data) {
if (!window.btoa) { throw 'btoa undefined' }
var str = '';
if (typeof data == 'string') {
str = data;
} else {
for (var i = 0; i < data.length; i ++) {
str += String.fromCharCode(data[i]);
}
}

return btoa(str);
}
function getImageData (canvas) {
var w = canvas.width,
h = canvas.height;
return canvas.getContext('2d').getImageData(0, 0, w, h);
}
function makeURI (strData, type) {
return 'data:' + type + ';base64,' + strData;
}

/**
* create bitmap image
* 按照规则生成图片响应头和响应体
*/
var genBitmapImage = function (data) {
var imgHeader = [],
imgInfoHeader = [];

var width = data.width,
height = data.height;

imgHeader.push(0x42); // 66 -> B
imgHeader.push(0x4d); // 77 -> M

var fsize = width * height * 3 + 54; // header size:54 bytes
imgHeader.push(fsize % 256); // r
fsize = Math.floor(fsize / 256);
imgHeader.push(fsize % 256); // g
fsize = Math.floor(fsize / 256);
imgHeader.push(fsize % 256); // b
fsize = Math.floor(fsize / 256);
imgHeader.push(fsize % 256); // a

imgHeader.push(0);
imgHeader.push(0);
imgHeader.push(0);
imgHeader.push(0);

imgHeader.push(54); // offset -> 6
imgHeader.push(0);
imgHeader.push(0);
imgHeader.push(0);

// info header
imgInfoHeader.push(40); // info header size
imgInfoHeader.push(0);
imgInfoHeader.push(0);
imgInfoHeader.push(0);

// 横向info
var _width = width;
imgInfoHeader.push(_width % 256);
_width = Math.floor(_width / 256);
imgInfoHeader.push(_width % 256);
_width = Math.floor(_width / 256);
imgInfoHeader.push(_width % 256);
_width = Math.floor(_width / 256);
imgInfoHeader.push(_width % 256);

// 纵向info
var _height = height;
imgInfoHeader.push(_height % 256);
_height = Math.floor(_height / 256);
imgInfoHeader.push(_height % 256);
_height = Math.floor(_height / 256);
imgInfoHeader.push(_height % 256);
_height = Math.floor(_height / 256);
imgInfoHeader.push(_height % 256);

imgInfoHeader.push(1);
imgInfoHeader.push(0);
imgInfoHeader.push(24); // 24位bitmap
imgInfoHeader.push(0);

// no compression
imgInfoHeader.push(0);
imgInfoHeader.push(0);
imgInfoHeader.push(0);
imgInfoHeader.push(0);

// pixel data
var dataSize = width * height * 3;
imgInfoHeader.push(dataSize % 256);
dataSize = Math.floor(dataSize / 256);
imgInfoHeader.push(dataSize % 256);
dataSize = Math.floor(dataSize / 256);
imgInfoHeader.push(dataSize % 256);
dataSize = Math.floor(dataSize / 256);
imgInfoHeader.push(dataSize % 256);

// blank space
for (var i = 0; i < 16; i ++) {
imgInfoHeader.push(0);
}

var padding = (4 - ((width * 3) % 4)) % 4;
var imgData = data.data;
var strPixelData = '';
var y = height;
do {
var offsetY = width * (y - 1) * 4;
var strPixelRow = '';
for (var x = 0; x < width; x ++) {
var offsetX = 4 * x;
strPixelRow += String.fromCharCode(imgData[offsetY + offsetX + 2]);
strPixelRow += String.fromCharCode(imgData[offsetY + offsetX + 1]);
strPixelRow += String.fromCharCode(imgData[offsetY + offsetX]);
}
for (var n = 0; n < padding; n ++) {
strPixelRow += String.fromCharCode(0);
}

strPixelData += strPixelRow;
} while(-- y);

return (encodeData(imgHeader.concat(imgInfoHeader)) + encodeData(strPixelData));

};

/**
* saveAsImage
* @param canvasElement
* @param {String} image type
* @param {Number} [optional] png width
* @param {Number} [optional] png height
*/
var saveAsImage = function (canvas, width, height, type) {
if ($support.canvas && $support.dataURL) {
if (type == undefined) { type = 'png'; }
type = fixType(type);
if (/bmp/.test(type)) {
var data = getImageData(scaleCanvas(canvas, width, height));
var strData = genBitmapImage(data);
saveFile(makeURI(strData, downloadMime));
} else {
var strData = getDataURL(canvas, type, width, height);
saveFile(strData.replace(type, downloadMime));
}

}
}

var convertToImage = function (canvas, width, height, type) {
if ($support.canvas && $support.dataURL) {
if (type == undefined) { type = 'png'; }
type = fixType(type);

if (/bmp/.test(type)) {
var data = getImageData(scaleCanvas(canvas, width, height));
var strData = genBitmapImage(data);
return genImage(makeURI(strData, 'image/bmp'));
} else {
var strData = getDataURL(canvas, type, width, height);
return genImage(strData);
}
}
}

return {
saveAsImage: saveAsImage,
saveAsPNG: function (canvas, width, height) {
return saveAsImage(canvas, width, height, 'png');
},
saveAsJPEG: function (canvas, width, height) {
return saveAsImage(canvas, width, height, 'jpeg');
},
saveAsGIF: function (canvas, width, height) {
return saveAsImage(canvas, width, height, 'gif')
},
saveAsBMP: function (canvas, width, height) {
return saveAsImage(canvas, width, height, 'bmp');
},

convertToImage: convertToImage,
convertToPNG: function (canvas, width, height) {
return convertToImage(canvas, width, height, 'png');
},
convertToJPEG: function (canvas, width, height) {
return convertToImage(canvas, width, height, 'jpeg');
},
convertToGIF: function (canvas, width, height) {
return convertToImage(canvas, width, height, 'gif');
},
convertToBMP: function (canvas, width, height) {
return convertToImage(canvas, width, height, 'bmp');
}
};

}();

【Demo】
http://hongru.github.com/proj/canvas2image/index.html
可以试着在canvas上涂涂画画，然后保存看看。如果用bmp格式的话，需要支持 btoa 的base64编码，关于base64编码规则可看上一篇博文

【不完美的地方】
1）jpeg接口本身就不完善，当canvas没有填充颜色或图片时，保存的jpeg由于是直接由png的alpha通道强制转换过来的，所以在png的透明部分在jpeg里面就是黑色的。

2）gif的限制太多。且可用性不大，有png就够了

3）bmp位图生成，计算量稍显大了。

4）由于是强制改mimeType来实现的自动下载，所以下载的时候文件类型不会自动识别。

本文链接

关于base64编码的原理及实现

2012-01-14T03:47:00Z

我们的图片大部分都是可以转换成base64编码的data：image。这个在将canvas保存为img的时候尤其有用。虽然除ie外，大部分现代浏览器都已经支持原生的基于base64的encode和decode，例如btoa和atob。（将canvas画布保存成img并强制改变mimetype进行下载，会在下一篇记录）

但是处于好奇心，还是驱使我去了解下base64编码的原理。以便也在不支持原生base64编码的ie下可以得以实现。

【Base64】
-base64的编码都是按字符串长度，以每3个8bit的字符为一组，
-然后针对每组，首先获取每个字符的ASCII编码，
-然后将ASCII编码转换成8bit的二进制，得到一组3*8=24bit的字节
-然后再将这24bit划分为4个6bit的字节，并在每个6bit的字节前面都填两个高位0，得到4个8bit的字节
-然后将这4个8bit的字节转换成10进制，对照Base64编码表（下表），得到对应编码后的字符。

（注：1. 要求被编码字符是8bit的，所以须在ASCII编码范围内，\u0000-\u00ff，中文就不行。
　2. 如果被编码字符长度不是3的倍数的时候，则都用0代替，对应的输出字符为=）

Base64 编码表
Value	Char	Value	Char	Value	Char	Value	Char
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

比如举下面2个例子：
a) 字符长度为能被3整除时：比如“Tom” ：

T o m
ASCII: 84 111 109
8bit字节: 01010100 01101111 01101101
6bit字节: 010101 000110 111101 101101
十进制: 21 6 61 45
对应编码: V G 9 t

所以，btoa('Tom') = VG9t

b) 字符串长度不能被3整除时，比如“Lucy”：

L u c y
ASCII: 76 117 99 121
8bit字节: 01001100 01110101 01100011 01111001 00000000 00000000
6bit字节: 010011 000111 010101 100011 011110 010000 000000 000000
十进制: 19 7 21 35 30 16 (异常) (异常)
对应编码: T H V j e Q = =

由于Lucy只有4个字母，所以按3个一组的话，第二组还有两个空位，所以需要用0来补齐。这里就需要注意，因为是需要补齐而出现的0，所以转化成十进制的时候就不能按常规用base64编码表来对应，所以不是a，可以理解成为一种特殊的“异常”，编码应该对应“=”。

有了上面的理论，那我们实现一个base64编码就容易了。

/**
* base64 encoding & decoding
* for fixing browsers which don't support Base64 | btoa |atob
*/

(function (win, undefined) {

var Base64 = function () {
var base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

// btoa method
function _btoa (s) {
if (/([^\u0000-\u00ff])/.test(s)) {
throw new Error('INVALID_CHARACTER_ERR');
}
var i = 0,
prev,
ascii,
mod,
result = [];

while (i < s.length) {
ascii = s.charCodeAt(i);
mod = i % 3;

switch(mod) {
// 第一个6位只需要让8位二进制右移两位
case 0:
result.push(base64hash.charAt(ascii >> 2));
break;
//第二个6位 = 第一个8位的后两位 + 第二个8位的前4位
case 1:
result.push(base64hash.charAt((prev & 3) << 4 | (ascii >> 4)));
break;
//第三个6位 = 第二个8位的后4位 + 第三个8位的前2位
//第4个6位 = 第三个8位的后6位
case 2:
result.push(base64hash.charAt((prev & 0x0f) << 2 | (ascii >> 6)));
result.push(base64hash.charAt(ascii & 0x3f));
break;
}

prev = ascii;
i ++;
}

// 循环结束后看mod, 为0 证明需补3个6位，第一个为最后一个8位的最后两位后面补4个0。另外两个6位对应的是异常的“=”；
// mod为1，证明还需补两个6位，一个是最后一个8位的后4位补两个0，另一个对应异常的“=”
if(mod == 0) {
result.push(base64hash.charAt((prev & 3) << 4));
result.push('==');
} else if (mod == 1) {
result.push(base64hash.charAt((prev & 0x0f) << 2));
result.push('=');
}

return result.join('');
}

// atob method
// 逆转encode的思路即可
function _atob (s) {
s = s.replace(/\s|=/g, '');
var cur,
prev,
mod,
i = 0,
result = [];

while (i < s.length) {
cur = base64hash.indexOf(s.charAt(i));
mod = i % 4;

switch (mod) {
case 0:
//TODO
break;
case 1:
result.push(String.fromCharCode(prev << 2 | cur >> 4));
break;
case 2:
result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2));
break;
case 3:
result.push(String.fromCharCode((prev & 3) << 6 | cur));
break;

}

prev = cur;
i ++;
}

return result.join('');
}

return {
btoa: _btoa,
atob: _atob,
encode: _btoa,
decode: _atob
};
}();

if (!win.Base64) { win.Base64 = Base64 }
if (!win.btoa) { win.btoa = Base64.btoa }
if (!win.atob) { win.atob = Base64.atob }

})(window)

Base64 example

本文链接

追踪子弹-初中简单的物理和数学

2012-01-10T07:33:00Z

飞行射击类游戏很常用的追踪子弹，或者塔防里面固定炮台打怪物的时候，为了保证子弹不会打空，追踪是必要的。

然而，这是极其简单的事情。

在每一帧里判断当前子弹和目标位置的距离和方向，不断修正速度方向即可。

// this.x, this.y 表示当前子弹的位置
// this.tar.x, this.tar.y 表示当前目标的位置
var dis = Math.sqrt(Math.pow((this.tar.x-this.x), 2) + Math.pow((this.tar.y - this.y), 2));
var angleX = (this.tar.x - this.x)/dis;
var angleY = (this.tar.y - this.y)/dis;
this.speedX = speed * angleX;
this.speedY = speed * angleY;
this.x += this.speedX;
this.y += this.speedY;

算出速度方向，然后速度*dt 叠加到位移即可。

Trace Bullet

本文链接