Uniform circular motion demo

Tips: 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. However, 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.
Hint: A negative period gives a counterclockwise motion, try it out!
Hint2: you can actually drag the ball to set its initial position!

For elliptic motions: 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.

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.

The principle of this is depicted by a parametric equation with t (time) as variable: x(t) = Rx(t)⋅cos(𝜔(t)⋅t-𝜑) = Rx(t)⋅cos(2π/T(t)⋅t-𝜑) y(t) = Ry(t)⋅sin(𝜔(t)⋅t-𝜑) = Ry(t)⋅sin(2π/T(t)⋅t-𝜑) 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.

By applying a rotation matrix onto this vector can cause the ball's trajectory to rotate: rotated[x, y](t) = [x(t)⋅cosα-y(t)⋅sinα, x(t)⋅sinα+y(t)⋅cosα] and α(t) = α₀+t⋅Δα is the rotation angle.