蚁群算法js版[vml vs div]

阅览次数:
文章来源: CP整理
原文作者:
整理日期: 2008-05-17
发表评论

字体大小:
小
中
大

思路1：用div做点
----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>蚁群算法js版</title> <style> /*---------------------------------- v\:*{behavior:url(#default#VML);} o\:*{behavior:url(#default#VML);} /*================================*/ .map{ position:absolute; background-color:#000000; overflow:hidden; top:0px; left:0px; } .ant{ position:absolute; background-color:#ff0000; overflow:hidden; width:1px; height:1px; } .ant2{ position:absolute; background-color:#00ff00; overflow:hidden; width:1px; height:1px; } .food{ position:absolute; background-color:#00ffff; overflow:hidden; width:2px; height:2px; } .nest{ position:absolute; background-color:#ff00ff; overflow:hidden; width:2px; height:2px; } </style> <script type="text/JavaScript"> //============================ //系统参数初始化 //---------------------------- //生命体数量与轨迹长度 Unit=30;Path=10; //生命体运动范围 xM=500;yM=500; //生命体速度上下限 v0=2;vM=10; //生命体加速度变化范围 Kr=0.1;Kv=0.1*(vM-v0); //气味感知范围 R_2=5*5; //生命体出生地(巢穴) var xi0=xM*Math.random(); var yi0=yM*Math.random(); var str0=Math.floor(xi0)+','+Math.floor(yi0); //食物所在地 xf=xM*Math.random(); yf=yM*Math.random(); //============================ var x=new Array(); var y=new Array(); var r=new Array(); var v=new Array(); var dr=new Array(); var dv=new Array(); var p=new Array(); var q=new Array(); /*================================*/ //单击暂停 var xi0,yi0,xf,yf; var Time0,clicked; window.status='pause'; function document.onclick(){ if(clicked){ window.status='pause'; return clicked=false; } map.style.width=xM; map.style.height=yM; nest.style.left=xi0; nest.style.top=yi0; food.style.left=xf; food.style.top=yf; clicked=true; //测试初始化时间用 //Time0=(new Date()).getTime(); if(!inited)init(0); else StartMove(0); } //窗口大小调整后刷新页面以调整系统参数 function window.onresize(){ // window.location.href=document.location; } //初始化函数 var life; str0='<div id=ant class=ant style=\"left:'; str1=';\"></div>'; inited=false; var point=new Array(); Total=Unit*Path; function init(i){ if(!clicked) return false; if(i<Total){ if(i<Unit){ x[i]=xi0; y[i]=yi0; p[i]=i; q[i]='ant'; r[i]=Math.random(); v[i]=1/Math.random(); dr[i]=Kr*Math.random(); dv[i]=Kv*Math.random(); }else{ xi0=x[i%Unit]; yi0=y[i%Unit]; } //vml做点 //point[i]=Math.floor(xi0)+','+Math.floor(yi0); //div做点 point[i]=Math.floor(xi0)+';top:'+Math.floor(yi0); setTimeout('init('+(window.status=++i)+')',0); }else{ //vml做点 //shape1.outerHTML=shape1.outerHTML.replace(/ path = \".*?\"/,' path = \"m'+str0+'l'+point.join('m'+str0+'l')+' e\"'); //div做点 map.innerHTML=str0+point.join(str1+str0)+str1; inited=true; window.status=0; //测试初始化时间用 //alert('生成耗时：'+((new Date()).getTime()-Time0)+'ms'); //Time0=(new Date()).getTime(); StartMove(0); } } function StartMove(i){ if(i<Unit){ Move(p[i]); setTimeout('StartMove('+(window.status=++i)+')',0); }else{ //测试初始化时间用 //alert('生成耗时：'+((new Date()).getTime()-Time0)+'ms'); } } //运动函数 P2=2*Math.PI; function Move(i){ if(!clicked) return false; k=i%Unit; X=x[k]; Y=y[k]; R=r[k]; V=v[k]; obj=ant[i]; R+=dr[k]*(2*Math.random()-1); V+=dv[k]*(2*Math.random()-1); X+=Math.sin(P2*R)*V; Y+=Math.cos(P2*R)*V; //遇到食物原路返回并减小角度变化 if(q[i%Unit]=='ant'){ distance=(X-xf)*(X-xf)+(Y-yf)*(Y-yf); if(distance<R_2){ R+=0.5; q[i%Unit]='ant2'; } }else{ distance=(X-xi0)*(X-xi0)+(Y-yi0)*(Y-yi0); if(distance<R_2){ R+=0.5; q[i%Unit]='ant'; } } /*---------------------------------- /*================================*/ //碰撞边界反弹 R=(X<0||X>xM)?-R:R; R=(Y<0||Y>yM)?0.5-R:R; X=x[k]+Math.sin(P2*R)*V; Y=y[k]+Math.cos(P2*R)*V; /*================================*/ /*---------------------------------- //溢出边界重生(类似流星效果) if(X<0||X>xM||Y<0||Y>yM){ X=xi0; Y=yi0; } /*================================*/ //边界限制 x[k]=X=(X<0)?0:(X>xM)?xM-2:X; y[k]=Y=(Y<0)?0:(Y>yM)?yM-2:Y; r[k]=(R>1)?(R-1):(R<0)?(R+1):R; v[k]=(V<v0)?v0:((V<vM)?V:vM); /*================================*/ obj.style.left=x[k]=X; obj.style.top=y[k]=Y; i=p[i%Unit]=(i+Unit)%Total; obj.className=q[i%Unit]; setTimeout('Move('+i+')',40/*Unit*/); } //根据浏览器自动加载动画 switch(navigator.appName.toLowerCase()){ case "netscape": window.addEventListener("load",document.onclick,false); break; case "microsoft internet explorer": default: window.attachEvent("onload",document.onclick); break; } </script> </head> <body style="margin:0px;">  <div id="map" class="map"><div id="ant"></div></div> <div id="food" class="food"></div> <div id="nest" class="nest"></div> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
-------------------------
思路2：用vml中的path指令做点
----------------------
经过学习终于搞明白了怎么用vml做点，并试着生成2000~4000个点看看，以下代码生成随机4000个由蚁巢出发的线段，大家放心了，生成中基本速度不减慢（看状态栏），当然机器较慢的朋友还是请适当减小参数再浏览。
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>蚁群算法js版</title> <style> v\:*{behavior:url(#default#VML);}o\:*{behavior:url(#default#VML);} .ant{ position:absolute; background-color:#000000; overflow:hidden; width:2px; height:2px; } .food{ position:absolute; background-color:#0000ff; overflow:hidden; width:2px; height:2px; } .nest{ position:absolute; background-color:#ff0000; overflow:hidden; width:2px; height:2px; } </style> <script type="text/JavaScript"> //============================ //系统参数初始化 //---------------------------- //生命体数量与轨迹长度 Unit=4000;Path=1; //生命体运动范围 x0=0;xM=500; y0=0;yM=500; //生命体出生地(巢穴) var xi0=x0+(xM-x0)*Math.random(); var yi0=y0+(yM-y0)*Math.random(); //var str0='<div class="ant" style="left:'+xi0+';top:'+yi0+';"></div>'; var str0=Math.floor(xi0)+','+Math.floor(yi0); //食物所在地 xf=x0+(xM-x0)*Math.random(); yf=y0+(yM-y0)*Math.random(); /*---------------------------------- //生命体速度上下限 v0=2;vM=10; //生命体加速度变化范围 Kr=0.1;Kv=0.1*(vM-v0); //气味感知范围 R_2=5*5; //============================ var r=new Array(); var v=new Array(); var dr=new Array(); var dv=new Array(); var life=new Array(); /*================================*/ //单击暂停 var xi0,yi0,xf,yf; var Time0,clicked; window.status='pause'; function document.onclick(){ if(clicked){ window.status='pause'; return clicked=false; } window.status=0; nest.style.left=xi0; nest.style.top=yi0; food.style.left=xf; food.style.top=yf; clicked=true; //测试初始化时间用 Time0=(new Date()).getTime(); init(0); } //窗口大小调整后刷新页面以调整系统参数 function window.onresize(){ // window.location.href=document.location; } //初始化函数 var point=new Array(); function init(i){ if(!clicked) return false; if(i<Unit){ xi0=x0+(xM-x0)*Math.random(); yi0=y0+(yM-y0)*Math.random(); point[i]=Math.floor(xi0)+','+Math.floor(yi0); /*---------------------------------- r[i]=Math.random(); v[i]=1/Math.random(); dr[i]=Kr*Math.random(); dv[i]=Kv*Math.random(); /*================================*/ //Move(i); setTimeout('init('+(window.status=++i)+')',0); }else{ shape1.outerHTML=shape1.outerHTML.replace(/ path = \".*?\"/,' path = \"m'+str0+'l'+point.join('m'+str0+'l')+' e\"'); alert('生成耗时：'+((new Date()).getTime()-Time0)+'ms'); } } //运动函数 Total=Unit*Path; P2=2*Math.PI; function Move(i){ if(!clicked) return false; k=i%Unit; X=x[k]; Y=y[k]; R=r[k]; V=v[k]; if(!life[i]){ str='<div class="ant" style="left:'+X+';top:'+Y+';"></div>'; document.body.appendChild(life[i]=document.createElement(str)); } obj=life[i]; R+=dr[k]*(2*Math.random()-1); V+=dv[k]*(2*Math.random()-1); X+=Math.sin(P2*R)*V; Y+=Math.cos(P2*R)*V; //遇到食物原路返回并减小角度变化 distance=(X-xf)*(X-xf)+(Y-yf)*(Y-yf); if(distance<R_2){ R+=0.5; r[i]/=2; v[i]*=2; } distance=(X-xi0)*(X-xi0)+(Y-yi0)*(Y-yi0); if(distance<R_2){ R+=0.5; r[i]/=2; v[i]*=2; } /*---------------------------------- /*================================*/ //碰撞边界反弹 R=(X<x0||X>xM)?-R:R; R=(Y<y0||Y>yM)?0.5-R:R; X=x[k]+Math.sin(P2*R)*V; Y=y[k]+Math.cos(P2*R)*V; /*================================*/ //溢出边界重生(类似流星效果) if(X<x0||X>xM||Y<y0||Y>yM){ X=xi0; Y=yi0; } /*---------------------------------- /*================================*/ //边界限制 x[k]=X=(X<x0)?x0:(X>xM)?xM-2:X; y[k]=Y=(Y<y0)?y0:(Y>yM)?yM-2:Y; r[k]=R>1?R-1:R<0?R+1:R; v[k]=V=(V<v0)?v0:((V<vM)?V:vM); /*================================*/ obj.style.left=x[k]=X; obj.style.top=y[k]=Y; setTimeout('Move('+(i+Unit)%Total+')',Unit); } //根据浏览器自动加载动画 switch(navigator.appName.toLowerCase()){ case "netscape": window.addEventListener("load",document.onclick,false); break; case "microsoft internet explorer": default: window.attachEvent("onload",document.onclick); break; } </script> </head> <body style="margin:0px;"> <v:group ID="group1" style="position:relative; left:0px; top:0px;WIDTH:500px;HEIGHT:500px;" coordsize = "500,500"> <v:rect filled="f" style="width:100%;height:100%" /> <v:PolyLine filled="f" Points="0 0" /> <v:shape id=shape1 name=shape1 filled="f" style="width:100%;height:100%" path="m 0,0 e" /> </v:group> <div id="food" class="food"></div> <div id="nest" class="nest"></div> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

个人感觉在div和vml最主要的区别在于用div生成的点是静态的不像vml中的path最小化后还原要重新生成。

上一篇:PHP使用zlib扩展实现页面GZIP压缩输出
下一篇:构建支持Master/Slave读写分离的数据库操作类

推荐文章

热点文章

相关文章

百度搜索

蚁群算法js版[vml vs div]

网友评论: