DARVA – de evenementassistent

DARVA is een schattige geanimeerde robot die ons zal helpen bij evenementen, door met mensen te chatten, zodat we onszelf niet te veel hoeven te herhalen.

Overzicht

• Introductie- en showcasevideo
• Analoge robot
• Gedigitaliseerde robot
• Virtuele assistent
• Raspberry Pi 4
• DARVA

Introductie- en showcasevideo

DARVA is een schattige geanimeerde robot die ons zal helpen bij evenementen, door met mensen te chatten, zodat we onszelf niet te veel hoeven te herhalen.

Leuk weetje:DARVA is het acroniem van “D igitised A nalog R obot V irtual A standvastig”.

Analoge robot

De eerste stap is het maken van een analoge robot, of wat je maar wilt animeren, van vilt. Ik schetste een robot en maakte onderdelen van papier. Toen ik eenmaal tevreden was met het algehele uiterlijk, knipte ik alles uit vilt.

Tip:maak foto's van de intacte stukjes vilt voordat je gaat snijden, je kunt ze gebruiken als achtergrond voor je animaties!

Oké, nu over naar het meest tijdrovende deel:naaien! Ik heb langs alle randen gestikt om DARVA die handgemaakte look &feel te geven. Sommige delen zijn een dubbele laag vilt, om het wat veerkrachtiger te maken. Zorg ervoor dat je alle onderdelen die je wilt animeren gescheiden houdt, dat zal je leven later gemakkelijker maken!

Gedigitaliseerde robot

Tijd om het analoge ding dat je zojuist hebt gemaakt te digitaliseren! Spreid alle delen uit op een onderscheidende achtergrond, want dat maakt het gemakkelijker om alles in delen te snijden. Het is het beste om één foto te maken met alle elementen erin, zodat de schaal van de onderdelen hetzelfde blijft.

Tip:roteer alle onderdelen zoals je ze in de animatie zou organiseren, omdat dit de hoek van de verlichting over alle onderdelen hetzelfde houdt en alles in de definitieve versie echt samenbrengt.

Laad de afbeelding in de fotobewerkingssoftware van uw keuze en knip alle onderdelen uit. Sla ze afzonderlijk op met een transparante achtergrond in een bestandsindeling die transparantie ondersteunt, zoals PNG.

Om de onderdelen uit te knippen, heb ik de tool voor snelle selectie in Photoshop gebruikt. De resultaten waren eigenlijk beter dan ik had verwacht, en ik hoefde maar een handvol foto's handmatig te wissen.

Nu heb je een gedigitaliseerd analoog ding dat klaar is om geanimeerd te worden!

Virtuele assistent

Om DARVA tot leven te brengen, heb ik een webpagina gemaakt met HTML-canvas en JavaScript, omdat dit op elk platform werkt. Door alle bibliotheken te downloaden, werkt het ook offline, wat belangrijk is omdat evenementen notoir slecht zijn in het bieden van een betrouwbare internetverbinding...

Kortom:met het HTML canvas-element kun je met JavaScript afbeeldingen zoals afbeeldingen, vormen en teksten aan een webpagina toevoegen. Om dit proces gemakkelijker te maken en vloeiende animaties toe te voegen, heb ik de Create.js- en Tween.js-bibliotheken gebruikt die u hier kunt vinden.

De code is als bijlage toegevoegd en doet het volgende:

• Laad de afbeeldingen
• Schaal en roteer ze
• Wijs een X- en Y-coördinaat toe op de pagina
• Alle dingen animeren

Sommige animaties hebben een beetje willekeurig toegevoegd om DARVA levensechter te maken. Nou, zo levensecht als een robot kan zijn natuurlijk. De meter draait bijvoorbeeld naar een willekeurige positie en de ogen kijken willekeurig een willekeurige tijd naar links of rechts.

Andere animaties zijn meer berekend, zoals de tekst in de tekstballon die elke 5 seconden verandert.

Ten slotte worden sommige animaties geactiveerd door delen van het scherm aan te klikken of aan te raken, in dit geval het hoofd en de buik van DARVA.

Raspberry Pi 4

Laten we ten slotte DARVA op de Raspberry Pi 4 draaien! Waarom? Nou waarom niet? Het is geweldig dat zoiets kleins dit soort animaties aankan!

Om DARVA weer te geven gebruikten we een touchscreen in portretmodus. Hoewel je de schermrotatie op de Raspberry Pi gemakkelijk kunt instellen, werkte het touchscreen nog steeds omgekeerd... Na veel vallen en opstaan ​​hebben we besloten om de Pi in liggende modus te laten draaien en alle animaties te draaien.

Het was een nachtmerrie om alle afbeeldingen te draaien en opnieuw te positioneren en de animaties opnieuw uit te voeren, dus het is het beste om dit deel uit te zoeken voordat je begint met programmeren.

Afgezien daarvan had het uitvoeren van de webpagina in Chromium in het begin wat trippy-effecten. Toen alles klaar was, probeerden we het opnieuw en op de een of andere manier was het probleem opgelost ??? De magie van programmeren...?

Hoewel de animaties het soepelst zijn in Chromium, werkt het ook goed in Firefox, het is alleen een beetje langzamer.

DARVA

Tadaaa! Daar hebben we 'm, DARVA, een schattige kleine geanimeerde robot die ons zal helpen bij evenementen!

Bron:DARVA – The Event Assistant