Анимированный атом
В коде представлены функции, которые возвращают набор точек круга и эллипса(ellipse(...) circle(...) и функция rotate(...) для вращения фигуры. Для того, чтобы вывести фигуры на <canvas>
используется функция drawLines(...), которая рисует линии по кооридинатам.
Как рисуется атом? Рисуются три элипса(траектории электронов), три круга(электрона) и ядро атома аналогично из кругов. Функция main() закрашивает все поле одним цветом и рисует атом согласно центру, размеру и углу поворота. Кнопки меняют переменные(центр, размер или угол поворота) и вызвают функцию main().
Как устроено движение электронов? Траектория электронов представляет собой эллипс, который задается массивом. Электрон рисуется на одной точке массива, этот индекс находиться в переменной electronPosition
. В функции animate()
electronPosition
увеличивается, тем самым электрон рисуется на следующей позиции. Скорость движения электронов можно изменить если менять переменную speed
.