Анимация "Созвездие"

Начнем с создания общего объекта созвездия Constellation и его основных переменных и методов.

Переменные:

• _this - ссылка на текущий контекст выполнения, для удобства в будущем;
• canvas - ссылка на элемент холста;
• context - контекст рисования на холсте;
• config - здесь будут настройки нашего созвездия.

Сразу определим две настройки: width и height - ширина и высота для холста равные ширине и высоте окна.

Методы:

• setCanvas - задает свойства холста;
• setContext - задает свойства контекста;
• init - инициализация созвездия, именно эта функция запускает всю анимацию, пока что там вызываются два предыдущих метода.

В методе setCanvas зададим ширину и высоту холста, указанные в настройках.

Теперь нужно все это дело запустить. Повесим обработчик на событие DOMContentLoaded - функцию, которая содержит создание экземпляра нашего объекта созвездия и вызов метода init.

Точки на холсте

Теперь нужно нарисовать на холсте звезды. Определим некоторые требования:

• хаотичное расположение точек на холсте;
• точки должны быть разного размера;
• количество точек должно зависеть от диагонали холста;

Приступим. В переменную настроек добавим:

• объект star с двумя свойствами: color и width, цвет точки и ее максимальный радиус;
• свойство length- количество точек: диагональ холста разделенная на 10;
• свойство stars- массив, содержащий все звезды.

Создадим новый объект Star внутри созвездия, что бы ему были доступны основные переменные.

Внутри объекта определяем расположение точки декартовыми координатами и указываем ее радиус- параметры x, y и radius соответственно, также определяем метод create, который нарисует точку на холсте.

Значение координаты x должно быть от 0 до значения ширины холста. Для хаотичного расположения звезд нам нужно выбрать случайную точку в этом отрезке, воспользуемся методом Math.random() (он возвращает число от 0 до 1) - умножим значение ширины на случайное число, возвращенное этим методом. То же самое проделываем с координатой y, используя высоту холста.

Максимально возможный радиус мы ранее указали в настройках, это свойство width во вложенном в настройки объекте star. Умножим это значение на результат работы метода Math.random().

С объектом точки закончили, вернемся к созвездию.

В методе setContext зададим цвет заливки фигур, свойство fillStyle контекста. Это будет цвет точек.

Напишем метод createStars, который будет создавать точки, в нем выполним следующие действия:

1. Очистим холст методом clearRect;
2. Создадим точки, количество которых определено с помощью цикла значением настройки length. На каждой итерации цикла создаем экземпляр объекта Star, добавляем его в массив stars (свойство объекта настроек) и вызываем метод create.

Для последующей анимации нам потребует запускать этот метод циклически. Поэтому сразу добавим метод loop, который в качестве параметра принимает функцию. Вызывает переданную функцию и с помощью метода requestAnimationFrame запускает вновь себя же, передавая в качестве параметра полученную функцию. Получается рекурсия. Почечему нужно использовать requestAnimationFrame: без него исполнение кода браузером остановится на данной рекурсии. Также стоит обратить внимание: внутри метод запускается из ранее созданной переменной _this.

В конец метода init допишем вызов цикла, и смотрим что получилось.

 Движение точек

В объект Star добавим два параметра vx и vy, они определяют скорость и направление движения точек. Принцип расчета такой:

• вычитаем из 0.5 результат Math.random() - получаем случайное число от -0.5 до 0.5 (отрицательное значение спровоцирует движение в противоположную сторону);
• для уменьшения скорости делим полученное значение на 5.

Пишем метод animate для реализации движения. В нем циклом проходим по массиву stars, определяем не достигла ли точка края холста, если достигла- меняем знак параметра vx или vy (в зависимости от стороны) на противоположный и увеличиваем значение координат x и y на vx и vy соответственно.

Вызываем метод animate в конце метода createStars из переменной _this.

Смотрим результат.

Анимация линий

Осталось нарисовать линии в области наведения курсора.

Добавим в настройки:

• объект line с двумя свойствами: color и width - цвет линий и их толщина;
• объект position с двумя свойствами: x и y - координаты курсора;
• свойство distance;
• свойство radius.

В методе setContext зададим цвет и толщину линий, свойства strokeStyle и lineWidth контекста.

Пишем метод line, который будет отвечать за рисование линий. В методе два вложенных цикла. Оба они проходят по каждой точке. Таким образом можно определить расстояние между каждой точкой. Если расстояние между точками по обеим координатам меньше указанного в настройке distance и расстояние от положения курсора до точки по обеим координатам меньше указанного в настройке radius, то рисуется линия от первой точки до второй.

Вызываем метод line в конце метода createStars из переменной _this.

Для обновления позиции курсора напишем метод bind, в котором создадим обработчик события mousemove на холсте. В обработчике определяем положение курсора относительно холста и полученные координаты пишем в ранее созданный объект настроек position. Вызываем метод bind в конце метода init.

Смотрим готовый результат.

Написать комментарий