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

<title>Circular and elliptic motion interactive</title>

<meta name="description" content="circular motion demo">

<meta name="keywords" content="circular elliptic motion physics 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">

<!--full css files

<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 is not supported well. You can change a browser if this page isn\'t displaying correctly.');

<header>

<h1><del>Uniform</del> circular motion demo</h1>

</header>

<a href="./index_cn.html" class="switch-lang">中</a>

<article class="grand-container">

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

<span>container width </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>Block one</h3>

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

</div>

<div class="box-label"><span>moving box X-axis</span></div>

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

<div class="box-label"><span>moving box Y-axis</span></div>

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

<div class="box-label"><span>color</span></div>

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

<div class="box-label"><span>size(px)</span></div>

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

<div class="box-label"><span>semi X axis(px)</span></div>

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

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

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

<div class="box-label"><span>semi Y axis(px)</span></div>

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

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

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

<div class="box-label"><span>period(sec)</span></div>

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

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

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

<div class="box-label"><span>rotate angle(deg)</span></div>

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

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

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

<div class="box-label"><span>rotate around</span></div>

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

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

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

</select>

<div class="buttons">

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

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

</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="One-click go!" />

<input type="button" class="objs-oneclick-reset" value="One-click reset" />

<br />

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

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

</div>

<div class="description">

<p>

<span class="bold">Tips: </span>In this demonstration, you see a ball rotating around the origin

(center) of the box. First set the color of the ball: it can be yellow,

blue, violet or rgba(255,255,255,0.5). Then, set its diameter, which ranges from 5 to 30, inside the

'size' box. The period is the time taken for the ball

to complete one complete circle and it should be in seconds. The semi-X-axis and semi-Y-axis is up to

the size of your

window. Note when semi-X equals to semi-Y, it will do a circular motion. <span class="bold">However,

</span>don't worry yet, these values are

automatically filled with default ones so you can just press the 'Go' button to see its motion! It will

be

a uniform circular motion.

<br /><span class="bold">Hint: </span>A negative period gives a counterclockwise motion, try it out!

<br /><span class="bold">Hint2: </span>you can actually drag the ball to set its initial position!

</p>

<p>

<br /><span class="bold">For elliptic motions: </span>setting the 'rotate around' to 'origin' will let

the ball's trajectory be centered. You can set it

to 'focus' so that it circulates around one of its focus, which is the more realistic case. Note this

option doesn't make a difference for circular trajectories.

</p>

<p>

You can vary the period, semi-X/Y or rotation linearly by setting the delta value. For example, by

setting Rx

delta

with 10, the ball's rotating semi-X-axis will increase

every second with an amount of 10px, until it hits our set boundary (2x the container length). Visually

it will be more and more flat.

You can try out other fields to see

what would happen. Of course, in this case the motion

is not longer a uniform motion.

</p>

<p>

<span class="bold">The principle of this </span> is depicted by a parametric equation with t (time) as

variable:

<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>

plus the offset correction of the box that contains the ball. Where Rx or Ry is semi-X-axis or

semi-Y-axis and Rx(t) = Rx₀+t⋅ΔRx, Ry(t) = Ry₀+t⋅ΔRy, T is

the period with T(t) = T₀+t⋅ΔT, and 𝜑 is the offset.

</p>

<p>

By applying a rotation matrix onto this vector can cause the ball's trajectory to rotate:

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

and α(t) = α₀+t⋅Δα is the rotation angle.

</p>

You can spawn multiple objects to make beautiful effects.

</div>

<div class="samples-display">

<h5>Click see/hide examples</h5>

</div>

<hr />

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

<span>frames per second: </span><span>25</span>

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

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

<br /><br />

If slow you can <input type="button" class="cancel-bg-change" value="pause background" />

<br /><br />

or enable <input type="button" class="cancel-bg-change-and-enable-star" value="star background" />

</div>

</article>

<footer>

<br />

Have fun. (c) 2019 cleooldsaty. Report bug: <a href="https://github.com/cleoold/uniform_circular_motion"

target="_blank">Github</a>

</footer>

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