THE GREAT YODINI

Concept

We each started out this project by exploring the available API list while keeping track of the one's we found interesting. After looking at the collected list of API's we started brainstorming what we could do that satisfied the prompt of using API's in a "non-intended" way. We were rather enraptured by the quirky "Fun Translation API" which translated webpages and text into "Yoda-like-sentences". From there we built up the concept of having Baby Yoda be a tarot card reader, but instead of replicating a bon-fide tarot reading we were subsituting it with a random movie quote API. Baby yoda will translate the movie quotes into a yoda-like sentence and it will be conveyed as if it is a very compelling tarot reading.

My Role as Asset Illustrator and JavaScript

For this project, I created the majority of the featured illustrations of the project minus the front of tarot cards which we grabbed from the internet. When I was designing our tarot reader Baby Yoda, aka the Great and Powerful Yodini, I was trying to convey this sort of dark mysterious aura that is typical for any tarot/palm readings in the initial landing screen. I paid a lot of attention to the visual graphics, using Adobe Illustrator and exporting them as Scalable Vector Graphics so the details are retained throughout the web. For the javascript portion, I added GSAP to our project and used it to create smooth flipping animations for the tarot cards. The way it works is that initially all cards start off facing down and when they rotate 180 degrees while shifting to the right around 300 pixels the tarot card image would change from the back of the card design to a random front facing tarot card. Then since we wanted Yodini to have a different dialogue for each card explaining it's meaning, Shasuna (member overseeing the layout and structure) and I worked together to make that happen. Overall, I really like how the final product came to be, it has such a cute and lighthearted atmosphere to it and makes me proud of all the work the team and I did.

External Links

See the magic behind the Great Yodini! (Github Repo)

Project 2 Figma Documentation

Kylah Blog Post

Shasuna Blog Post