Анимированный атом

В коде представлены функции, которые возвращают набор точек круга и эллипса(ellipse(...) circle(...) и функция rotate(...) для вращения фигуры. Для того, чтобы вывести фигуры на <canvas> используется функция drawLines(...), которая рисует линии по кооридинатам.

Как рисуется атом? Рисуются три элипса(траектории электронов), три круга(электрона) и ядро атома аналогично из кругов. Функция main() закрашивает все поле одним цветом и рисует атом согласно центру, размеру и углу поворота. Кнопки меняют переменные(центр, размер или угол поворота) и вызвают функцию main().

Как устроено движение электронов? Траектория электронов представляет собой эллипс, который задается массивом. Электрон рисуется на одной точке массива, этот индекс находиться в переменной electronPosition. В функции animate() electronPosition увеличивается, тем самым электрон рисуется на следующей позиции. Скорость движения электронов можно изменить если менять переменную speed.