DARVA - Помощник по мероприятиям

DARVA - милый анимированный робот, который будет помогать нам на мероприятиях, болтая с людьми, чтобы нам не приходилось слишком много повторяться.

Обзор

• Введение и демонстрационное видео
• Аналоговый робот
• Цифровой робот
• Виртуальный помощник
• Raspberry Pi 4
• ДАРВА

Введение и демонстрационное видео

DARVA - милый анимированный робот, который будет помогать нам на мероприятиях, болтая с людьми, чтобы нам не приходилось слишком много повторяться.

Интересный факт:DARVA - это аббревиатура от « D оцифрованный A аналоговый R obot V виртуальный A ssistant ».

Аналоговый робот

Первый шаг - создание аналогового робота или того, что вы хотите анимировать, из фетра. Я набросал робота и сделал детали из бумаги. Когда мне понравился общий вид, я вырезал все из фетра.

Совет:сфотографируйте неповрежденные кусочки фетра перед тем, как приступить к резке, вы можете использовать их в качестве фона для своей анимации!

Хорошо, теперь самое время, отнимающее у вас время:шитье! Я прошил по всем краям, чтобы придать DARVA внешний вид ручной работы. Некоторые детали представляют собой двойной слой войлока, чтобы сделать его более упругим. Обязательно храните все части, которые вы хотите анимировать, отдельно, это облегчит вам жизнь в дальнейшем!

Цифровой робот

Пора оцифровать аналоговую вещь, которую вы только что сделали! Разложите все части на отличительном фоне, так как так будет легче разрезать все на части. Лучше всего сделать один снимок со всеми элементами на нем, чтобы масштаб частей остался прежним.

Совет:поверните все части так, как вы бы организовали их в анимации, так как это позволит сохранить одинаковый угол освещения для всех частей и действительно объединит все вместе в финальной версии.

Загрузите изображение в программу для редактирования фотографий по вашему выбору и вырежьте все части. Сохраните их по отдельности с прозрачным фоном в формате файла, который поддерживает прозрачность, например PNG.

Чтобы вырезать части, я использовал инструмент быстрого выделения в Photoshop. Результаты оказались лучше, чем я ожидал, и мне нужно было вручную стереть только несколько изображений.

Теперь у вас есть оцифрованный аналоговый объект, который можно анимировать!

Виртуальный помощник

Чтобы воплотить DARVA в жизнь, я создал веб-страницу с холстом HTML и JavaScript, так как это будет работать на любой платформе. После загрузки всех библиотек он также будет работать в автономном режиме, что важно, потому что события, как известно, плохо обеспечивают надежное подключение к Интернету ...

Вкратце:с помощью элемента холста HTML вы можете добавлять на веб-страницу графику, такую ​​как изображения, фигуры и текст, используя JavaScript. Чтобы упростить этот процесс и добавить плавную анимацию, я использовал библиотеки Create.js и Tween.js, которые вы можете найти здесь.

Код добавлен во вложении и выполняет следующие функции:

• Загрузить изображения
• Масштабируйте и вращайте их.
• Назначьте координаты X и Y на странице
• Анимируйте все объекты

В некоторые анимации добавлено немного случайных элементов, чтобы сделать DARVA более реалистичным. Ну, конечно, настолько реалистичным, насколько может быть робот. Датчик поворачивается в случайное положение, например, и глаза случайным образом смотрят влево или вправо в течение случайного промежутка времени.

Другие анимации более расчетливы, например текст в речевом пузыре, который меняется каждые 5 секунд.

Наконец, некоторые анимации активируются при нажатии или касании частей экрана, в данном случае головы и живота DARVA.

Raspberry Pi 4

Наконец, давайте запустим DARVA на Raspberry Pi 4! Почему? А почему бы не? Как здорово, что такая маленькая вещь может обрабатывать такие виды анимации!

Для отображения DARVA мы использовали сенсорный экран в портретном режиме. Хотя вы можете легко настроить поворот экрана на Raspberry Pi, сенсорный экран по-прежнему работал в обратном направлении ... После многих проб и ошибок мы решили оставить Pi работающим в ландшафтном режиме и просто повернуть все анимации.

Поворачивать и перемещать все изображения и переделывать анимацию было кошмаром, поэтому лучше разобраться с этой частью, прежде чем начинать программировать.

Помимо этого, запуск веб-страницы в Chromium вначале имел некоторые странные эффекты. Когда все было сделано, мы попробовали еще раз и как-то проблема решилась ??? Магия программирования ..?

Хотя анимация самая плавная в Chromium, она также хорошо работает в Firefox, только немного медленнее.

ДАРВА

Тадааа! Вот он, ДАРВА, милый маленький анимированный робот, который поможет нам на мероприятиях!

Источник:DARVA - Помощник по организации мероприятий