Animation of a Trigonometric Polynomial
 
This should work with recent desktop versions of Chrome or Firefox. It was coded using Vanilla JS and MathJax.
 
The orange dot is the complex value of $\color{orange}{f(t)}$ where the real parameter $\color{blue}t$ is shown as a blue dot in the lower right corner. The coefficients $\color{red}{c_k}$ are initially all set to zero. Click on one of their names on the left to make it active. Click into the gray square to change the active coefficient or press z to reset the coefficient to zero. Press r to reset all coefficients to zero. Press t to toggle visibility of the circles.
 
The animation works in the following way: $\color{red}{c_0}$ is the center of the $\color{red}{c_1}$ circle. The $\color{red}{c_{-1}}$ circle rotates around the $\color{red}{c_1}$ circle, the $\color{red}{c_{2}}$ circle rotates around the $\color{red}{c_{-1}}$ circle, the $\color{red}{c_{-2}}$ circle rotates around the $\color{red}{c_{2}}$ circle, and so on, i.e. the order is $0,1,-1,2,-2,3,-3$.
 

 
Copyright (c) 2018, Prof. Dr. Edmund Weitz. Impressum, Datenschutzerklärung.
$\color{gray}{\displaystyle \color{orange}{f(t)}=\sum_{k=-3}^3\color{red}{c_k}\mathrm{e}^{\mathrm{i}k\color{blue}{t}}}$