js多个引力小球计算

最新推荐文章于 2024-07-16 11:19:23 发布
最新推荐文章于 2024-07-16 11:19:23 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： html5 文章标签： 源码 html5 canvas 动画 引力小球
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq631431929/article/details/17350997
版权

闲着无聊写着玩的一个小程序，模拟多个平面小球在相互引力作用下的运动状态。随便写的也没怎么优化计算过程，在chrome 31，ff 25，ie 10上都运行了下，50个小球在1000频率的情况下chrome和ff还能看看，ie就完全不能看了。

源码如下：

<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  	<meta http-equiv="content-language" content="zh-CN" />
    <title>引力小球运动探测</title>
    
    <script type="text/javascript">
    //---------------------------------------------------此区域定义程序执行需要的bean结构-----------------------
    function Vector(speedx,speedy){
    	this.speedX=speedx;
    	this.speedY=speedy;
    }
    
	/**
		x：x坐标
		y：y坐标
		weight：质量，与引力计算有关
		objSpeed：一个向量，包含x方向和y方向的速度
	*/
    function OriantObj(x,y,r,weight,objSpeed){
    	this.x=x;
    	this.y=y;
		this.r=r;
    	this.speed=objSpeed;
    	this.weight=weight;
    }   
    
    function pathCalc(speed,accelerate,time){
    	var path=new Vector();
    	path.speedX=speed.speedX*time+accelerate.speedX*time*time/2;
    	path.speedY=speed.speedY*time+accelerate.speedY*time*time/2;
    	return path;
    }
    
    function speedCalc(speed,accelerate,time){
    	var path=new Vector();
    	path.speedX=speed.speedX+accelerate.speedX*time;
    	path.speedY=speed.speedY+accelerate.speedY*time;
    	return path;
    }
    function Position(x,y){
    	this.px=x;
    	this.py=y;
    }	
	</script>
	<script type="text/javascript">
	//-----------------------------------------------------------此区域定义计算过程中用到的各种函数---------------------------
	/**
		计算令一个小球对当前小球作用力的加速度效果；		
	*/
	OriantObj.prototype.accelerationToOriant=function(another){
    	var rx=another.x-this.x;
    	var ry=another.y-this.y;
    	var r2=rx*rx+ry*ry;
    	var r=Math.sqrt(r2);
		
		//防止无限加速的情况产生
		var minr=this.r+another.r;
		if(r<minr){
			r=minr;
			r2=minr*minr;
		}
		
    	var accs=GRAVITY*another.weight/(r2);
    	return new Vector(rx*accs/r,ry*accs/r);
    };
	
	/**
		计算一小段时间内小球运动到的地方，在此时间内认为各小球位置变动极小，忽略引力变化
		同时，如果判断到两小球碰撞到一起了，认定两球均为刚体，计算碰撞效果；
	*/
	function caclWhile(oriants,index,ft){
		var currAcc=new Vector(0,0);
		var ball=oriants[index];
		
		for(var kk=0;oriants[kk];kk++){
			if(kk===index){
				continue;
			}
			var rr=ball.r+oriants[kk].r;
			var lenx=ball.x-oriants[kk].x;
			var leny=ball.y-oriants[kk].y;
			//计算引力效果
			if(openGravity){
				var accCurr=ball.accelerationToOriant(oriants[kk]);
				currAcc.speedX=currAcc.speedX+accCurr.speedX;
				currAcc.speedY=currAcc.speedY+accCurr.speedY;
			}		
			//计算碰撞效果	
			if((lenx*lenx+leny*leny)<=(rr*rr)){
				rigidBodyCollision(ball,oriants[kk]);
			}
		}
		if(openFriction){
			//计算阻力作用效果
			currAcc.speedX=frictionCacl(ball.speed.speedX,currAcc.speedX);
			currAcc.speedY=frictionCacl(ball.speed.speedY,currAcc.speedY);
		}	
				
    	var pp=pathCalc(ball.speed,currAcc,ft);
		ball.x=ball.x+pp.speedX;
    	ball.y=ball.y+pp.speedY;
		var sbf=ball.speed;
    	ball.speed=speedCalc(ball.speed,currAcc,ft);
		
		//如果速度变更跨过0，则置0
		if(sbf.speedX*ball.speed.speedX<0){
			ball.speed.speedX=0;
		}
		if(sbf.speedY*ball.speed.speedY<0){
			ball.speed.speedY=0;
		}
		
		//边界反弹检测
		if(openRegionDetect){
			drawRegionDetect(ball);
		}	
		return ball;
	}
	
	/**
		计算阻力作用
	*/
	function frictionCacl(speed,force){
		if(speed==0){
			if(FRICTION>Math.abs(force))
				return 0;
			else 
				return force-(FRICTION*force)/Math.abs(force);
		}else{
			return force-(FRICTION*speed)/Math.abs(speed)
		}
	}
	
	/**
		计算刚体碰撞
	*/	
	function rigidBodyCollision(obj1,obj2){
		//避免重复检测碰撞
		if(obj1.crashChecked&&obj2.crashChecked){
			obj1.crashChecked=obj2.crashChecked=false;
			return ;
		}
		if(obj1.speed.speedX==0&&obj1.speed.speedY==0&&obj2.speed.speedX==0&&obj2.speed.speedY==0){
			return;
		}
		var cx=obj1.x-obj2.x,cy=obj1.y-obj2.y;
		var tmp=cx*cx+cy*cy;
		var x1=cx*obj1.speed.speedX+cy*obj1.speed.speedY;
		var y1=-cy*obj1.speed.speedX+cx*obj1.speed.speedY;
		var x2=cx*obj2.speed.speedX+cy*obj2.speed.speedY;
		var y2=-cy*obj2.speed.speedX+cx*obj2.speed.speedY;
		
		var midtmp=(1+rebound)*(obj1.weight*x1+obj2.weight*x2)/(obj1.weight+obj2.weight);
		var ax1=midtmp-rebound*x1;
		var ax2=midtmp-rebound*x2;

		obj1.speed.speedX=(ax1*cx-y1*cy)/tmp;
		obj1.speed.speedY=(ax1*cy+y1*cx)/tmp;	
		obj2.speed.speedX=(ax2*cx-y2*cy)/tmp;
		obj2.speed.speedY=(ax2*cy+y2*cx)/tmp;
		
		obj1.crashChecked=obj2.crashChecked=true;
			
		
		//按重量各退一步，避免互相嵌入
		var axxx=((obj1.r+obj2.r)/Math.sqrt(tmp))-1;
		var t1=axxx/(1+(obj2.weight/obj1.weight));
		var t2=axxx/(1+(obj1.weight/obj2.weight));
		obj1.x=obj1.x+cx*t1;
		obj1.y=obj1.y+cy*t1;
		obj2.x=obj2.x-cx*t2;
		obj2.y=obj2.y-cy*t2;
	}
	
	/**
		边界检测函数
	*/
	function drawRegionDetect(ball){
		if((ball.x-ball.r<0&&ball.speed.speedX<0)||(ball.x+ball.r>900&&ball.speed.speedX>0)){
			ball.speed.speedX=-ball.speed.speedX;
		}
		if((ball.y-ball.r<0&&ball.speed.speedY<0)||(ball.y+ball.r>500&&ball.speed.speedY>0)){
			ball.speed.speedY=-ball.speed.speedY;
		}
	}
	function strIsNum(str){
		return !isNaN(str);
	}
	</script>
	 <script type="text/javascript">
	 //--------------------------------------------此区域定义运行参数------------------------------------------------------
		var GRAVITY=0.667;//引力系数
		var ft=0.00001;//两次运动计算的间隔时间，在该段时间内忽略引力变化
		var drawSpeed=1000;//时间轴运行速度，该值越大，两次绘图间代表的实际时间越长，具体时间为drawSpeed*ft
		var rebound=0.91;//定义碰撞恢复系数	
		var FRICTION=1.96;//定义摩擦系数	
		var openGravity=false;//是否开启引力效果
		var openFriction=false;//是否开启摩擦力效果
		var openRegionDetect=false;//是否开启边界反弹效果
		var runAnimation=false;//是否要运行动画
		var defaultBallColor="blue";//设置小球颜色为红色
		var oriantSize=50,oriantR=8;//设置小球个数与半径
		
		//定义多个刚性引力球
		var oriants=new Array();
		//随机生成多个刚体球
		for(var i=0;i<oriantSize;i++){
			while(true){
				var xy=[Math.random()*900,Math.random()*500];
				var cc=true;
				for(var j=0;oriants[j];j++){
					if((oriants[j].x-xy[0])*(oriants[j].x-xy[0])+(oriants[j].y-xy[1])*(oriants[j].y-xy[1])<((oriantR*oriantR)<<2)){
						cc=false;
						break;;
					}
				}
				if(cc){
					oriants[i]=new OriantObj(xy[0],xy[1],oriantR,Math.random()*10e5,new Vector(0,0));
					break;
				}
				
			}
			
		}
	 </script>
	<style type="text/css">
		.tabhead{
			width:25%;
		}
		.tabinput{
			width:25%;
			margin:0;
			text-align:left;
		}
	</style>
  </head>
  
  <body style="background:black;color:white;">
  <table>
  	<tr>
  		<td width="901" height="501">
  			<canvas id="drawReagon" contenteditable="false" height="500" width="900" style="border: 1px solid white;margin: 0;"></canvas>
  		</td>
		<td valign="top" width="360">
			<table>
				<tr>
					<td class="tabhead">开启引力</td>
					<td class="tabinput" align="left">
						<input type="checkbox" οnclick="javascript:openGravity=this.checked;">
					</td>
					<td class="tabhead">引力系数</td>
					<td class="tabinput">
						<input type="text" id="gravityIndex"  width="50px" style="width:50px;" οnblur="javascript:if(strIsNum(this.value)){GRAVITY=Number(this.value);}else{alert('引力系数必须为数字！');this.value=GRAVITY=0.667};">
					</td>				
				</tr>
				<tr>
					<td class="tabhead">开启摩擦</td>
					<td class="tabinput" align="left">
						<input type="checkbox" οnclick="javascript:openFriction=this.checked;">
					</td>
					<td class="tabhead">摩擦系数</td>
					<td class="tabinput">
						<input type="text" id="frictionIndex" style="width:50px;" 
						οnblur="javascript:if(strIsNum(this.value)){FRICTION=Number(this.value);}else{alert('摩擦系数必须为数字！');this.value=FRICTION=1.96};">
					</td>
				</tr>
				<tr>
					<td class="tabhead">边界反弹</td>
					<td class="tabinput" align="left">
						<input type="checkbox" οnclick="javascript:openRegionDetect=this.checked;">
					</td>
					<td class="tabhead">计算频率</td>
					<td class="tabinput">
						<input type="text" id="drawSpeedIndex" width="50px" style="width:50px;" 
						οnblur="javascript:if(strIsNum(this.value)){drawSpeed=Number(this.value);}else{alert('计算频率必须为数字！');this.value=drawSpeed=1000};if(drawSpeed<1){alert('计算频率过慢！');this.value=drawSpeed=1000}">
					</td>
				</tr>
				
				<tr>
					
					<td class="tabhead" colspan="3" align="right">球体恢复系数</td>
					<td class="tabinput" align="left">
						<input type="text" id="reboundIndex" width="50px" style="width:50px;" 
						οnblur="javascript:if(strIsNum(this.value)&&this.value>=0&&this.value<=1){rebound=Number(this.value);}else{alert('恢复系数必须为0-1之间的数字！');this.value=rebound=0.91};">
					</td>
					
				</tr>
				
				<tr>
					<td colspan="4" align="center">
						<input type="button" id="runAnimationButton" style="width:80px;"
						οnclick="javascript:if(runAnimation){this.value='继续运行';runAnimation=false;}else{this.value='暂停运行';runAnimation=true;};">
					</td>
				</tr>
			</table>
		</td>
  	</tr>
  </table>	
    <script type="text/javascript">	
		function $(id){return document.getElementById(id);}
		var cs=$("drawReagon").getContext("2d");
		cs.fillStyle = defaultBallColor;
		$("gravityIndex").value=GRAVITY;
		$("frictionIndex").value=FRICTION;
		$("drawSpeedIndex").value=drawSpeed;
		$("reboundIndex").value=rebound;
		$("runAnimationButton").value=runAnimation?"暂停运行":"继续运行";
		
		if(!runAnimation){
			for(var i=0;oriants[i];i++){
				cs.beginPath();
				cs.arc(oriants[i].x,oriants[i].y,oriants[i].r,0,Math.PI * 2,false);
				cs.fill(); 
				cs.closePath()
			}
		}
		//计算和绘制界面
		(function funSelf(){
			if(runAnimation){
				cs.clearRect(0,0,900,1000);
				for(var i=0;i<drawSpeed;i++){
					for(var ks=0;oriants[ks];ks++){
						oriants[ks]=caclWhile(oriants,ks,ft);
					}
				}
				for(var i=0;oriants[i];i++){
					cs.beginPath();
					cs.arc(oriants[i].x,oriants[i].y,oriants[i].r,0,Math.PI * 2,false);
					cs.fill(); 
					cs.closePath()
				}
			}	
			window.requestAnimationFrame(funSelf);	
		})();
    </script>
  </body>
</html>

喵主子
关注
专栏目录
JS引力小球代码
星云
08-27 191
小球两两存在引力；两个球碰撞后变成一个，其质量等于两个球之和；如果小球质量太大会爆炸产生碎片。下面代码粘贴进文件后缀改为html直接运行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
JS原生实现多个小球跟着鼠标移动.html
05-19
JS原生实现多个小球跟着鼠标移动
js实现多个小球碰撞
desjs7499的博客
04-23 584
实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹 实现代码： ...
js html5 canvas制作多个小球碰撞的动画效果
11-07
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
日本的Grape引力计算多核处理器
ComingtoExpert的专栏
05-19 1437
计算机设备一般分为两类。一是通用机，人们日常所见的绝大多数计算机都属于此类，而本文要介绍的GRAPE则是作为专用机设计的：其用途仅限于牛顿引力（或形式类似的作用力）计算，多用于天体物理研究。不过千万不要因为GRAPE的目的单一而小瞧它：它一度是世界上速度最快的计算机，并多次荣获为高性能计算机设置的Gordon Bell奖。GRAPE-5获1999年Gordon Bell奖的证书（图片提供：东京大学
GODLIKE_轨道_轨道优化_多引力辅助轨道计算_MGA_优化算法轨道_
09-30
本项目"Godlike_轨道_轨道优化_多引力辅助轨道计算_MGA_优化算法轨道"提供了一个MATLAB代码库，专门用于进行轨道优化和MGA计算。MATLAB是一种广泛应用于工程和科学领域的高级编程环境，其强大的数值计算和可视化功能...
flyby_matlab_多引力辅助轨道设计_引力_
09-30
本资料包"flyby_matlab_多引力辅助轨道设计_引力_"显然是一个基于MATLAB的计算案例，用于模拟和分析这种复杂的轨道规划。 MATLAB是一种广泛使用的数学和工程计算软件，其强大的数值计算能力以及友好的编程环境使其...
多个引力引理的领先软定理
04-05
通过将Sen的方法[1，2]扩展到费米子对称性，我们在具有任意数量的有限能量粒子的任意超重力理论中，计算了多个引力子（和引力子）的前导软定理。 我们的结果与外部粒子的质量和自旋无关。 我们的结果对于II型和...
致密双星系统的引力辐射计算 (2007年)
05-12
利用Landau-Lifshitz的能量-动量张量表述和四极矩公式对双星模型下的致密天体引力辐射源进行了讨论、计算了几种典型的致密双星系统的引力辐射（如PRSl913+16双星、PSRJ0737-3039A/B双脉冲星和双黑洞系统），并将计算...
Dynamics.js-可创建物理运动动画效果的js库插件
12-12
Dynamics.js是一款可以创建物理运动动画效果的js库插件。你可以使用它来制作任何DOM元素的CSS属性动画，也可以制作SVG属性动画和任何JAVASCRIPT对象动画。
Resonance_testing_scripts:使用N体REBOUND代码模拟行星轨道的Python脚本，并绘制结果
05-15
REBOUND-开源的多用途N体代码 如何使用REBOUND-快速介绍 您可以从C或Python调用REBOUND。 您要使用哪种编程语言取决于您的喜好和特定的应用程序。 简而言之：如果您只是想将一些粒子（例如行星系统）与高阶积分器IAS15或新的辛积分器WHFast进行积分，请使用Python版本。 如果要运行具有数百万个粒子的大型仿真，请使用奇异的积分器，OpenGL可视化效果或使用分布式树代码，然后使用C版本。 REBOUND的所有计算上昂贵的部分都是用C编写的。因此，即使您使用Python版本，也将获得非常快速的代码。 要安装Python版本，只需在终端中键入以下命令： pip install rebound 要了解有关如何将REBOUND与Python结合使用的更多信息，请参阅上的iPython / Jupyter教程。 要安装C版本，只需将以下命令复制并粘贴到您的终端中
js 引力小球代码
星云
02-28 195
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
JavaScript的运动——模拟重力场
桃花扇的博客
02-29 495
代码功能：模拟小球掉落的场景 考虑问题：碰撞边界后反弹的处理，碰撞后动能损耗的处理，清除定时器的条件 html代码 <div></div> css代码 div { width: 100px; height: 100px; position: absolute; top: 0; left: 0; backgrou...
JS模拟自由落体活动
lyqhn2012的专栏
04-24 949
为了能看到效果，这里放缓了速度body{ height: 100%; position: absolute; } .circle{ width: 50px; height: 50px; background: red; border-radius: 50%; position: absolute; top: 0px; }<div cla
【前端】弹球特效（重力模拟）
最新发布
Byyyi耀的博客
07-16 304
弹球特效
Javascript漂流记（下）__js运动篇
AquamanTrident的博客
06-09 430
一、匀速运动 function startMove(dom, destination){ clearInterval(timer); var iSpeed = destination - dom.offsetLeft > 0 ? 5 : -5; timer = setInterval(function...
JSPlumb.js 绘制关系拓扑图（力导向布局算法简单实现）
liulingdi的博客
10-30 7461
JSPlumb.js 绘制关系拓扑图（力导向布局算法简单实现） d3 echarts 都可以画关系拓扑图（有环），但是总觉得不是自己想要的，改起来也很麻烦，所以可以用JSPlumb 自己绘制自己的关系拓扑图，拓扑图 = 绘图 + 自动布局算法。jsplumb 可以实现绘自己的结点，而自动布局则可以采用 力导向布局算法。 这里参考的是 https://www.jianshu.com/p/d3c64a...
用JavaScript实现的一些计算公式
派的无理性
09-10 4919
 学习JavaScript编程，设计各种算法公式。 各类JavaScript算法公式的最新更新。 分类 目录 摘要   科学教育 天文学/太阳系 万有引力公式   科学教育 代数 递归方法，计算圆周率   科学教育 代数/行列式 计算行列式   科学教育 解析几何 计算两点之间距离   ...
两个天体之间的引力如何计算
04-04
两个天体之间的引力可以使用万有引力定律来计算。这个定律表明，两个物体之间的引力与它们的质量和它们之间的距离的平方成正比例，与引力作用方向相反。公式如下： F = G * (m1 * m2) / r^2 其中，F表示两个物体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值