<!--uniform circular motion demo! ()cleoold-->

<title>匀速圆周运动demo by cos</title>

<meta name="description" content="匀速圆周运动demo">

<meta name="keywords" content="匀速圆周运动 椭圆运动 demo 物理" />

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="theme-color" content="#3d3d3d">

<meta name="renderer" content="webkit">

<meta content="telephone=no" name="format-detection">

<link rel="stylesheet" href="./css/min.css" type="text/css" />

<link rel="icon" href="./ahp.png" sizes="32x32">

<script type="text/javascript">

if (/*@cc_on!@*/false || !!document.documentMode) document.write('Internet Explorer 可能不兼容此程序. 建议您更换浏览器来浏览.');

<header>

<h1>圆周运动 by cos</h1>

</header>

<a href="./index.html" class="switch-lang">English</a>

<article class="grand-container">

<div class="shared-info-container">

<span>容器尺寸 </span><input type="text" class="container-width" autocomplete="off" readonly />

</div>

<div id="info-container-1" class="info-container">

<div class="obj-titles">

<div class="switch-obj-prev switch-obj"> &lt;&lt;&lt; </div>

<h3>物块一</h3>

<div class="switch-obj-next switch-obj"> &gt;&gt;&gt; </div>

</div>

<div class="box-label"><span>X轴坐标</span></div>

<input type="text" class="box-x" autocomplete="off" placeholder="leave this be :-)" readonly />

<div class="box-label"><span>Y轴坐标</span></div>

<input type="text" class="box-y" autocomplete="off" placeholder="leave this be :-)" readonly />

<div class="box-label"><span>物块颜色</span></div>

<input type="text" class="set-color" autocomplete="off" />

<div class="box-label"><span>物块直径(px)</span></div>

<input type="text" class="set-size" autocomplete="off" />

<div class="box-label"><span>轨道X半轴(px)</span></div>

<input type="text" class="set-semi-X-axis" autocomplete="off" />

<div class="box-label"><span>Rx Δ(px/s)</span></div>

<input type="text" class="set-semi-X-axis-change" autocomplete="off" />

<div class="box-label"><span>轨道Y半轴(px)</span></div>

<input type="text" class="set-semi-Y-axis" autocomplete="off" />

<div class="box-label"><span>Ry Δ(px/s)</span></div>

<input type="text" class="set-semi-Y-axis-change" autocomplete="off" />

<div class="box-label"><span>轨道周期(s)</span></div>

<input type="text" class="set-period" autocomplete="off" />

<div class="box-label"><span>T Δ(s/s)</span></div>

<input type="text" class="set-period-change" autocomplete="off" />

<div class="box-label"><span>轨道偏移角(deg)</span></div>

<input type="text" class="set-angle" autocomplete="off" />

<div class="box-label"><span>α Δ(deg/s)</span></div>

<input type="text" class="set-angle-change" autocomplete="off" />

<div class="box-label"><span>围绕...旋转</span></div>

<select name class="set-rotate-around">

<option value="origin">原点</option>

<option value="focus">焦点</option>

</select>

<div class="buttons">

<input type="button" class="set-attr-go" value="Go!" />

<input type="button" class="set-attr-reset" value="重置" />

</div>

</div>

<div id="container">

<div id="moving-obj-trajectory-1" class="moving-obj-trajectory"></div>

<div id="origin"></div>

<div id="moving-obj-1" class="moving-obj"></div>

</div>

<div class="projections">

<div id="moving-obj-prj-1" class="moving-obj-prj"></div>

</div>

<div class="obj-manage">

<input type="button" class="objs-oneclick-go" value="确定所有" />

<input type="button" class="objs-oneclick-reset" value="重置所有" />

<br />

<input type="button" class="append-objs" value="增加" />

<input type="button" class="delete-objs" value="移除" />

</div>

<div class="description">

<p>

<span class="bold">提示：</span>这个 app 展示了一个围绕着原点旋转的球. 首先您要设置球的颜色：可以是 yellow,

blue, violet 甚至是 rgba(255,255,255,0.5). 然后再在“物块直径”里设置它的尺寸（5 到 30）. 周期描述一个球旋转一周所需要的时间，单位是秒.

X半轴和Y半轴对应着长短半轴，这个设定的最大值由您的窗口大小决定. 注意当两个值相同的时候，物块会做匀速圆周运动. <span class="bold">不过不要担心

</span>，这些值都已经自动填好了，所以您可以直接点击“确定”.

<br /><span class="bold">提示2：</span>负的周期值可以产生一个逆时针旋转.

<br /><span class="bold">提示3：</span>您可以通过拖动小球来改变它的初始位置！

</p>

<p>

<br /><span class="bold">对于椭圆运动：</span>将围绕设置为“原点”可以居中小球的轨道. 您可以将它设置为“焦点”从而使小球围绕着焦点的一个旋转，

这样看着更加真实. 注意这个选项在圆形轨道下不起作用.

</p>

<p>

您可以通过差值来在每秒钟线性地改变周期/半轴长/旋转角. 比如设置X半轴差为 10 可以让小球的X半轴每秒增加 10px（直到它撞到设定好的边界——2 倍的容器宽）

这让小球看起来越来越扁. 您可以尝试其他区域来看看会发生什么. 当然，此时小球就不再做匀速运动了.

</p>

<p>

<span class="bold">小球的轨迹</span>用一个以 t（时间）为参数的参数方程来描述：

<span class="equation">x(t) = Rx(t)⋅cos(𝜔(t)⋅t-𝜑) = Rx(t)⋅cos(2π/T(t)⋅t-𝜑)</span>

<span class="equation">y(t) = Ry(t)⋅sin(𝜔(t)⋅t-𝜑) = Ry(t)⋅sin(2π/T(t)⋅t-𝜑)</span>

加上小球所在容器的修正. 其中 Rx 或 Ry 为X半轴或Y半轴且 Rx(t) = Rx₀+t⋅ΔRx, Ry(t) = Ry₀+t⋅ΔRy, T 为周期且 T(t) = T₀+t⋅ΔT, 𝜑 是初相.

</p>

<p>

使用旋转矩阵作用到它可以旋转小球的轨迹，其中 α(t) = α₀+t⋅Δα 为偏移角：

<span class="equation">rotated[x, y](t) = [x(t)⋅cosα-y(t)⋅sinα, x(t)⋅sinα+y(t)⋅cosα]</span>

</p>

您可以生成多个这样的小球来实现炫目的效果.

</div>

<div class="samples-display">

<h5>点击查看/隐藏样例</h5>

</div>

<hr />

<div class="shared-info-container-bo">

<span>刷新率：</span><span>25</span>

<input type="button" class="fps-decrease" value="-减少" />

<input type="button" class="fps-increase" value="+增加" />

<br /><br />

如果显示卡顿您可以 <input type="button" class="cancel-bg-change" value="暂停背景变化" />

<br /><br />

或者开启 <input type="button" class="cancel-bg-change-and-enable-star" value="星空背景" />

</div>

</article>

<footer>

<br />

(c) 2019 cleooldsaty. <a href="https://github.com/cleoold/uniform_circular_motion" target="_blank">Github</a>

</footer>

<script type="text/javascript" src="./js/min.js"></script>