离开了html5，面对“流体力学”，我只能旁观了...

今天偶见园子里有编辑推荐了一则新闻：那些程序员搞的流体力学的演示先是一个同学用java写了个仿流体的applet，引来众人围观，然后各路神仙不甘落后，先后又有flash版本，html5的canvas版本，c++的版本都出来了。

　　看了之后我也很来兴趣，想试一试，可惜html5的版本已经有了，我不能简简单单步别人后尘吧...于是咬咬牙，说同为web前端层面，你用html5，我偏偏就不用。我就要用原生的JavaScript，就用html 4和css 2,来作苦苦挣扎。

　　结果，挣扎了几个小时，终于发现离开了html5，想要模拟流体运动真是困难啊。而且效率也极低，在500个元素模拟的时候，ff就表示基本跑不动了，ie8以下就更别说了...

所以，最终结果是：

　　只能哀叹一声，离开了了html5，面对“流体力学”，我只能旁观了...

当然，鉴于我只是一只“小虾”，我的失败不排除有其他的“大虾”能破解这个魔咒。不过就html 4 和css 2的这点表现力在document中的话，我个人觉得是很难了.

最后，虽然尝试失败了，依旧还是给各位看客看看我失败的尝试吧：（建议用chrome或其他js引擎给力的浏览器查看）：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>liquid</title>
<meta name="author" content="hongru.chen" />
<style type="text/css">
html {overflow:hidden}
body {margin:0; padding:0; position:absolute; height:100%; width: 100%}
#wrap {position:absolute; left:50%; top:50%; width:300px; height:300px; margin-left:-150px; margin-top:-150px;}
.drop {position: absolute;font-size: 0;width: 1px;height: 1px;overflow: hidden;background: blue;}
</style>
<script type="text/javascript">
var Liquid = function () {
var wp, parts, space, obj = [], grid, nw, nh, gw, gh, flag = false;
var addEvent = function (o, e, f) {
o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)});
}
var init = function (o) {
wp = document.getElementById(o.id);
parts = o.parts ? o.parts : 500;
space = o.space ? o.space : 3;
document.onselectstart = function () { return false; }
wp.ondrag = function () { return false; }
//start
for (var i=0; i<parts; i++) {obj[i] = new Drop()}
(function () {
nw = wp.offsetWidth;
nh = wp.offsetHeight;
gw = Math.round(nw/space);
gh = Math.round(nh/space);
grid = new Array(gw * gh);
for (var i=0; i<parts; i++) obj[i].boundary();
for (var i=0; i<parts; i++) obj[i].move();
setTimeout(arguments.callee, 1);
})();
}
/* main function */
var Drop = function () {
var o = document.createElement('span');
o.className = 'drop';
wp.appendChild(o);
this.x = Math.random()*50 + 50;
this.y = Math.random()*50 + 50;
this.vx = this.vy = this.dx = this.dy = 0;
this.sty = o.style;
}
Drop.prototype = {
move : function () {
if (flag) {
this.x += this.dx;
this.vx += this.dx;
this.vy += this.dy;
var opa = Math.random()+.4, wh = Math.ceil(Math.random()*2);
this.sty.opacity = opa>1 ? 1 : opa;
this.sty.width = wh + 'px';
this.sty.height = 3-wh + 'px';
}
this.y += this.dy;
this.dx = this.dy = 0;
// set position
this.sty.left = Math.round(this.x) + 'px';
this.sty.top = Math.round(this.y) + 'px';
},
boundary : function () {
//gravity
this.vy += .06;
this.x += this.vx;
this.y += this.vy;
//set boundary
if (this.x < space*.5) this.dx += (space * .5 - this.x);
else if (this.x > nw - space * .5) this.dx -= (this.x - nw + space * .5);
if (this.y < space * .5) this.dy += (space * .5 - this.y);
else if (this.y > nh - space * .5) {this.dy -= (this.y - nh + space * .5); flag = true;}
var gx = Math.round(this.x / space);
var gy = Math.round(this.y / space);
/* ---- neightbors constraints ---- */
for (var ix = gx - 1; ix <= gx + 1; ix++) { 
for (var iy = gy - 1; iy <= gy + 1; iy++) {
var g = grid[iy * gw + ix] || [];
for (j = 0, l = g.length; j < l; j++) {
var that = g[j];
var dx = that.x - this.x;
var dy = that.y - this.y;
var d = Math.sqrt(dx * dx + dy * dy);
if (d < space && d > 0) {
dx = (dx / d) * (space - d) * .25;
dy = (dy / d) * (space - d) * .25;
this.dx -= dx;
this.dy -= dy;
that.dx += dx;
that.dy += dy;
}
}
}
}
/* ---- update neighbors list ---- */
if (!grid[gy * gw + gx]) grid[gy * gw + gx] = [this];
else grid[gy * gw + gx].push(this);
}
}
return init;
}();
</script></head>
<body>
     <div id="wrap"></div>
<script type="text/javascript">
window.onload = function () {
Liquid({
id: 'wrap',
space: 4,
parts: 500
})
}
</script></body>
</html>

ps: 看看http://jsbin.com/unovo4 这个用canvas的源码，终于给自己的失败找了一个借口，人家用了canvas，js都写了400多行，怎么可能是自己不用canvas，仅仅100来行的代码能搞定的呢？！

posted on 2010-12-21 16:14 岑安阅读(8490) 评论(33) 编辑收藏举报

刷新页面返回顶部

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

离开了html5，面对“流体力学”，我只能旁观了...

导航

公告