DARVA – 이벤트 도우미

DARVA는 이벤트에서 우리를 도와주는 귀여운 애니메이션 로봇입니다. 사람들과 대화를 나누면 너무 많이 반복하지 않아도 됩니다.

개요

<울>

소개 및 쇼케이스 동영상

아날로그 로봇

디지털 로봇

가상 비서

라즈베리 파이 4

다르바

소개 및 쇼케이스 비디오

DARVA는 이벤트에서 우리를 도와주는 귀여운 애니메이션 로봇입니다. 사람들과 대화를 나누면 너무 많이 반복하지 않아도 됩니다.

재미있는 사실:DARVA는 “D 디지털화됨 A 아날로그 R 오봇 V 가상의 A 보조”.

아날로그 로봇

첫 번째 단계는 아날로그 로봇을 만드는 것입니다. 로봇을 스케치하고 종이로 부품을 만들었습니다. 전체적인 모양에 만족하면 펠트에서 모든 것을 잘라냈습니다.

팁:절단을 시작하기 전에 펠트의 손상되지 않은 부분을 사진으로 찍어 애니메이션의 배경으로 사용할 수 있습니다!

자, 이제 가장 시간이 많이 걸리는 부분인 재봉으로 넘어가겠습니다! DARVA에 핸드메이드 룩앤필을 주기 위해 모든 가장자리를 스티칭했습니다. 일부 부품은 펠트의 이중층으로 되어 있어 좀 더 탄력적입니다. 애니메이션을 적용할 모든 부분을 분리하여 나중에 더 쉽게 사용할 수 있도록 하십시오!

디지털화된 로봇

방금 만든 아날로그를 디지털화할 시간입니다! 모든 부분을 독특한 배경에 펼치면 모든 것을 부분으로 더 쉽게 자를 수 있습니다. 모든 요소가 포함된 한 장의 사진을 찍는 것이 가장 좋으므로 부품의 크기가 동일하게 유지됩니다.

팁:애니메이션에서 구성하는 방식으로 모든 부품을 회전합니다. 이렇게 하면 모든 부품에서 조명 각도가 동일하게 유지되고 최종 버전에서 실제로 모두 함께 당겨지기 때문입니다.

선택한 사진 편집 소프트웨어에 사진을 로드하고 모든 부분을 잘라냅니다. PNG와 같이 투명도를 지원하는 파일 형식의 투명한 배경과 함께 개별적으로 저장합니다.

부분을 ​​잘라내기 위해 Photoshop의 빠른 선택 도구를 사용했습니다. 결과는 실제로 예상보다 좋았고 몇 장의 사진에서 수동으로 지울 수 밖에 없었습니다.

이제 애니메이션화할 준비가 된 디지털화된 아날로그가 있습니다!

가상 도우미

DARVA에 생명을 불어넣기 위해 HTML 캔버스와 JavaScript를 사용하여 모든 플랫폼에서 작동하는 웹페이지를 만들었습니다. 모든 라이브러리를 다운로드하면 오프라인에서도 작동합니다. 이는 이벤트가 안정적인 인터넷 연결을 제공하는 데 악명 높기 때문에 중요합니다...

간단히 말해서 HTML 캔버스 요소를 사용하면 JavaScript를 사용하여 웹 페이지에 그림, 모양 및 텍스트와 같은 그래픽을 추가할 수 있습니다. 이 프로세스를 더 쉽게 만들고 부드러운 애니메이션을 추가하기 위해 여기에서 찾을 수 있는 Create.js 및 Tween.js 라이브러리를 사용했습니다.

코드가 첨부 파일에 추가되고 다음을 수행합니다.

<울>

이미지 로드

크기 조정 및 회전

페이지에 X 및 Y 좌표 할당

모든 것을 애니메이션화

일부 애니메이션에는 DARVA를 보다 생생하게 만들기 위해 약간의 무작위가 추가되었습니다. 물론 로봇처럼 실물처럼 보일 수 있습니다. 예를 들어 게이지가 임의의 위치로 회전하고 눈은 임의의 시간 동안 무작위로 왼쪽 또는 오른쪽을 봅니다.

다른 애니메이션은 5초마다 바뀌는 말풍선의 텍스트와 같이 더 많이 계산됩니다.

마지막으로 일부 애니메이션은 화면의 일부(이 경우 DARVA의 머리와 배)를 클릭하거나 터치하여 활성화됩니다.

라즈베리 파이 4

마지막으로 Raspberry Pi 4에서 DARVA를 실행해 보겠습니다! 왜요? 글쎄, 왜 안되지? 아주 작은 것이 이러한 종류의 애니메이션을 처리할 수 있다는 것이 굉장합니다!

DARVA를 표시하기 위해 세로 모드에서 터치스크린을 사용했습니다. Raspberry Pi에서 화면 회전을 쉽게 설정할 수 있지만 터치스크린은 여전히 ​​역방향으로 작동했습니다. 많은 시행착오 끝에 Pi를 가로 모드로 유지하고 모든 애니메이션을 회전하기로 결정했습니다.

모든 이미지를 회전 및 재배치하고 애니메이션을 다시 실행하는 것은 악몽이었으므로 프로그래밍을 시작하기 전에 이 부분을 파악하는 것이 가장 좋습니다.

그 외에 Chromium에서 웹 페이지를 실행하면 처음에는 약간의 트리피 효과가 있었습니다. 모든 것이 완료되면 다시 시도했고 어떻게 든 문제가 해결되었습니다 ??? 프로그래밍의 마법..?

애니메이션은 Chromium에서 가장 매끄럽지만 Firefox에서도 잘 작동하지만 약간 느립니다.

다르바

타다아아! 이벤트에서 우리를 도와줄 작고 귀여운 애니메이션 로봇 DARVA가 있습니다!

출처:DARVA – 이벤트 도우미