模拟引力环境下的运动轨迹

#Math 2010-08-28

话说这篇文章的起源还得从1643年1月4日谈起。这一天，一位引领人类认知世界的巨人诞生了，他就是艾萨克·牛顿（Isaac Newton）。
扯远了，就近一点：2010年1月4日，为了纪念牛顿，google设计了一个Google Doodles
看这里：今日google纪念logo,典型的物理运动实现
进口审核剪切版：

<input type="button" value="demo" onclick="demo()" /> <img id="fall" src="http://www.google.com/logos/newton09-apple.png" style="position:absolute;left:200px;top:46px"/> <script type="text/javascript"> function demo(){ var h=1,k=-0.5,f=document.getElementById('fall'), i=setInterval(function(){ if(f){ var y=parseInt(f.style.top) + h; if(y<210) {h+=2} else{ h*=(h>1)?k:0 } f.style.top=y+'px'; } if(h==0){clearInterval(i);h=1;} },25); } </script>

随后，我便模拟了一个重力环境下的抛物线运动：

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>模拟重力环境下的抛物运动（假使1px==1mm）</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} p{margin:2px;font-size:12px;} label{display:inline-block;width:80px;text-align:right;} input{width:80px;} .wrap{position:relative;width:800px;height:500px;margin:5px;border:1px solid #ccc;} #fall{width:20px;font-size:0;height:20px;background:orange;position:absolute;top:0;left:0;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> </head> <body> <p><label>横向初速度：</label><input id="Vx" type="text" value="3" />px/ms</p> <p><label>纵向初速度：</label><input id="Vy" type="text" value="0" />px/ms</p> <p><label>重力加速度：</label><input id="a" type="text" value="0.0098" />px/平方ms</p> <p>（如果这个加速度是一个随时间变化的值，就能达到其他非匀加速运动的效果了。）</p> <p><label>单位时间：</label><input id="t" type="text" value="10" />（记录运动的时间间隔） <p><button type="button" onclick="demo()">演示</button></p> <div class="wrap"> <div id="fall">o</div> </div> </body> <script type="text/javascript"> var $id=function(o) { return document.getElementById(o) || o; } var demo=function() { var x=$id('Vx').value, y=$id('Vy').value, a=$id('a').value, t=$id('t').value; shoot(x,y,a,t); } var shoot=function(x,y,a,t) { var f=document.getElementById('fall'); var Vx=parseInt(x), Vy=parseInt(y), g=a, t=parseInt(t), h=0,l=0,Sx=0,Sy=0; var i=setInterval(function(){ if(f){ Sx+=Vx*t; l=Sx; Vy+=g*t; h+=Vy*t; if(h>480) { h=480; clearInterval(i); } if(l>780) { l=780; clearInterval(i); } f.style.left=l+'px'; f.style.top=h+'px'; } },t); } </script> </html>

模拟采用的公式

Function: 对于运动瞬间
V=V0+aT;
S=S0+VT;
T：运动的时间间隔，是固定值。
这个公式有别于那种运动模拟中常用的补间动画公式（tween算法）。
补间动画是需要事先确定总路程，和总时间的，
而我们模拟的运动轨迹没有事先计算，因为我们运动中间或许还有一些变数，比如撞击，主动改变方向（键盘控制）等等，所以我觉得这个物理公式更能模拟出真实的各种运动。

直至本月前两天，某同事向我展示了这个：
重力版google(浏览首选chrome,safari,次选opera,firefox,若是ie9以下请无视)
膜拜啊。js且不论，css3已经大量使用了。我还只局限用用阴影，圆角呢。

不才，也做一个关于落体，撞击，摩擦的简单模拟。以表膜拜。

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>模拟引力环境下的撞击、摩擦、落体运动</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} p{margin:2px;font-size:12px;} label{display:inline-block;width:80px;text-align:right;} input{width:80px;} #fall{width:20px;font-size:0;height:20px;background:orange;position:absolute;top:50px;left:400px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> </head> <body> <p><label>横向初速度：</label><input id="Vx" type="text" value="3" />px/ms</p> <p><label>纵向初速度：</label><input id="Vy" type="text" value="0" />px/ms</p> <p><label>重力加速度：</label><input id="a" type="text" value="0.01" />px/平方ms</p> <p><label>单位时间：</label><input id="t" type="text" value="10" />（记录运动的时间间隔） <p>(摩擦，碰撞的消耗并没有按公式进行计算，纯属于杜撰，是不符合规律的，仅仅是模拟。)</p> <p><button type="button" onclick="demo()">演示</button> <button type="button" onclick="$id('fall').style.cssText = 'top:50px;left:400px;'">重置(可拖动放置)</button></p> <div id="fall" onmousedown='drag(this,event)'>o</div> </body> <script type="text/javascript"> var $id=function(o) { return document.getElementById(o) || o; } var demo=function() { var x=$id('Vx').value, y=$id('Vy').value, a=$id('a').value, t=$id('t').value; shoot(x,y,a,t); } var shoot=function(x,y,a,t) { if(i) {alert(1);clearInterval(i)}; var f=document.getElementById('fall'); var Vx=parseFloat(x), Vy=parseFloat(y), g=parseFloat(a), h=f.offsetTop, Sx=f.offsetLeft, l=0, t=parseInt(t); var i=setInterval(function(){ if(f){ Sx+=Vx*t; l=Sx; Vy+=g*t; h+=Vy*t; if(h>=document.documentElement.offsetHeight-f.offsetHeight) { //底部 h=document.documentElement.offsetHeight-f.offsetHeight; Vx=(Math.abs(Vx)-0.005 < 0) ? 0 : Vx/Math.abs(Vx) * (Math.abs(Vx)-0.005) //摩擦消耗x速度 Vy=(Math.abs(Vy)-0.1 < 0) ? 0 : -(Math.abs(Vy)-0.1); //撞击消耗y速度 if(Math.abs(Vy)==0 && Math.abs(Vx)==0 ) {clearInterval(i);} //x,y速度为0时，clear } if(l<0 || l>document.documentElement.offsetWidth-f.offsetWidth) { //左右两侧 Sx=(l<0) ? 0 : document.documentElement.offsetWidth-f.offsetWidth; Vx=(Math.abs(Vx)-0.1 < 0) ? 0 : -Vx/Math.abs(Vx) * (Math.abs(Vx)-0.1) //撞击消耗x速度 } f.style.left=l+'px'; f.style.top=h+'px'; } },t); }; var drag=function(o,e){ //拖曳位置，与运动模拟无关 var e = e ? e : window.event; if(!window.event) {e.preventDefault();} var tX=o.offsetLeft, tY=o.offsetTop, dx=e.clientX, dy=e.clientY; document.onmousemove=function(e){ var e = e ? e : window.event; o.style.left=tX+e.clientX-dx+"px"; o.style.top=tY+e.clientY-dy+"px"; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } </script> </html>