Немного самоиронии :) Давайте посмотрим как сделать эту простую анимацию на p5.js. За основу взял пример Aim. 1. Создаём canvas, фоном которого будет картинка (можно конечно нарисовать все буквы с помощью p5.js, но я не стал заморачиваться). 2. Рисуем эллипсы и "подгоняем" под наше изображение. Рассчитываем угол между глазом и мышью. Ниже методы, которые я использовал: На этом всё. Забегайте в песочницу.
Немного самоиронии :)
Давайте посмотрим как сделать эту простую анимацию на p5.js.
За основу взял пример Aim.
1. Создаём canvas, фоном которого будет картинка (можно конечно нарисовать все буквы с помощью p5.js, но я не стал заморачиваться).
2. Рисуем эллипсы и "подгоняем" под наше изображение. Рассчитываем угол между глазом и мышью.
Методы p5.js
Ниже методы, которые я использовал:
- atan2 - вычисляет угол (используется для ориентации мыши)
- push - добавляет элемент в конец массива
- translate - координаты объекта
- rotate - поворот
- fill - заполнение цветом
- pop - завершает рисование
На этом всё.
Забегайте в песочницу.