DARVA – Der Event-Assistent

DARVA ist ein süßer animierter Roboter, der uns bei Veranstaltungen unterstützt, indem er mit Leuten chattet, damit wir uns nicht zu oft wiederholen müssen.

Übersicht

• Einführungs- und Showcase-Video
• Analoger Roboter
• Digitalisierter Roboter
• Virtueller Assistent
• Himbeer-Pi 4
• DARVA

Einführungs- und Showcase-Video

DARVA ist ein süßer animierter Roboter, der uns bei Veranstaltungen unterstützt, indem er mit Leuten chattet, damit wir uns nicht zu oft wiederholen müssen.

Wissenswertes:DARVA ist die Abkürzung für „D entzündet A analog R Obot V irtuelle A Assistent”.

Analoger Roboter

Der erste Schritt besteht darin, einen analogen Roboter oder was auch immer Sie animieren möchten, aus Filz zu erstellen. Ich habe einen Roboter skizziert und Teile aus Papier gemacht. Nachdem ich mit dem Gesamtbild zufrieden war, habe ich alles aus Filz geschnitten.

Tipp:Machen Sie Fotos von den intakten Filzstücken, bevor Sie mit dem Schneiden beginnen, Sie können diese als Hintergrund für Ihre Animationen verwenden!

Okay, nun zum zeitaufwendigsten Teil:dem Nähen! Ich habe an allen Kanten genäht, um DARVA das handgemachte Aussehen und Gefühl zu verleihen. Einige Teile sind mit einer doppelten Filzschicht versehen, um sie etwas widerstandsfähiger zu machen. Stellen Sie sicher, dass Sie alle Teile, die Sie animieren möchten, getrennt halten, um Ihr Leben später einfacher zu machen!

Digitalisierter Roboter

Es ist Zeit, das analoge Ding, das Sie gerade erstellt haben, zu digitalisieren! Verteilen Sie alle Teile auf einem unverwechselbaren Hintergrund, da dies das Aufteilen in Teile erleichtert. Es ist am besten, ein Bild mit allen Elementen aufzunehmen, damit der Maßstab der Teile gleich bleibt.

Tipp:Drehen Sie alle Teile so, wie Sie sie in der Animation anordnen würden, da dies den Beleuchtungswinkel über alle Teile gleich hält und in der endgültigen Version wirklich alles zusammenfügt.

Laden Sie das Bild in eine Bildbearbeitungssoftware Ihrer Wahl und schneiden Sie alle Teile aus. Speichern Sie sie einzeln mit transparentem Hintergrund in einem Dateiformat, das Transparenz unterstützt, wie PNG.

Zum Ausschneiden der Teile habe ich das Schnellauswahlwerkzeug in Photoshop verwendet. Die Ergebnisse waren tatsächlich besser als ich erwartet hatte und ich musste nur in einer Handvoll Bilder Dinge manuell löschen.

Jetzt haben Sie ein digitalisiertes analoges Ding, das animiert werden kann!

Virtueller Assistent

Um DARVA zum Leben zu erwecken, habe ich eine Webseite mit HTML-Canvas &JavaScript erstellt, da dies auf jeder Plattform funktioniert. Durch das Herunterladen aller Bibliotheken funktioniert es auch offline, was wichtig ist, da Ereignisse notorisch schlecht darin sind, eine zuverlässige Internetverbindung bereitzustellen…

Kurzum:Mit dem HTML-Canvas-Element können Sie mit JavaScript Grafiken wie Bilder, Formen und Texte zu einer Webseite hinzufügen. Um diesen Vorgang zu vereinfachen und flüssige Animationen hinzuzufügen, habe ich die Bibliotheken Create.js und Tween.js verwendet, die Sie hier finden.

Der Code wird im Anhang hinzugefügt und macht Folgendes:

• Laden Sie die Bilder
• Skaliere und drehe sie
• Vergeben Sie eine X- und Y-Koordinate auf der Seite
• Animiere alle Dinge

Einige der Animationen haben ein bisschen Zufall hinzugefügt, um DARVA lebensechter zu machen. Nun, natürlich so lebensecht wie ein Roboter sein kann. Die Anzeige dreht sich beispielsweise in eine zufällige Position und die Augen blicken zufällig für eine zufällige Zeitspanne nach links oder rechts.

Andere Animationen sind kalkulierter, wie der Text in der Sprechblase, der sich alle 5 Sekunden ändert.

Schließlich werden einige Animationen durch Klicken oder Berühren von Teilen des Bildschirms aktiviert, in diesem Fall DARVAs Kopf und Bauch.

Raspberry Pi 4

Lassen Sie uns schließlich DARVA auf dem Raspberry Pi 4 ausführen! Wieso den? Gut, warum nicht? Es ist großartig, dass etwas so Kleines mit solchen Animationen umgehen kann!

Zur Darstellung von DARVA haben wir einen Touchscreen im Hochformat verwendet. Während man die Bildschirmdrehung auf dem Raspberry Pi einfach einstellen kann, funktionierte der Touchscreen immer noch in umgekehrter Richtung… Nach vielem Ausprobieren haben wir uns entschieden, den Pi im Querformat laufen zu lassen und einfach alle Animationen zu drehen.

Es war ein Albtraum, alle Bilder zu drehen und neu zu positionieren und die Animationen zu wiederholen. Daher ist es am besten, diesen Teil herauszufinden, bevor Sie mit der Programmierung beginnen.

Abgesehen davon hatte das Ausführen der Webseite in Chromium am Anfang einige trippige Effekte. Als alles erledigt war, haben wir es noch einmal versucht und irgendwie war das Problem gelöst??? Die Magie des Programmierens..?

Während die Animationen in Chromium am flüssigsten sind, funktioniert es auch in Firefox gut, es ist nur etwas langsamer.

DARVA

Tadaaa! Da haben wir ihn, DARVA, einen süßen kleinen animierten Roboter, der uns bei Events helfen wird!

Quelle:DARVA – Der Event-Assistent