Genie & The Magic Lamp
(Click HERE to preview the app)
HOW TO USE THE APP:
Once the user comes to the page, he can enter any question he has into the input field. Then, click on the Magic Lamp, the Genie’s answer would be displayed in the dialog box.
FUN QUESTIONS TO ASK THE GENIE FOR FUN RESULTS (DURING THE TESTING PROCESS):
- “Is Earth flat?”
- “Was 9/11 staged by the government?”
- “Is water wet?”
- “Is the government run by lizard people?”
- “Was conscription, despite its effectiveness, actually a good idea?”
- “Will the human cloning process be an ethical solution to many of the world’s social construct issues and problems in the near future instead of being the eventual demise of original biological humanity?”
- “Are cats better than dogs?”
AUDIENCE:
One main purpose of the app is to give affirmative and positive messages to the user, with a bit of humor as well. It’s designed for kids.
The app walk-through:
Genie & The Magic Lamp is basically a Magic 8 Ball. The only difference is that I wanted it to look like an actual wizard, not a ball.
My inspiration reaches to the movie, “Big” that I’ve watched a long time ago. There is a scene in the movie where the main character, a little boy, goes to the fortune telling machine designed after a wizard called Zoltar and makes a wish to be big. He wakes up the next day as an adult. Here’s the scene:
Somehow I thought it would be cool to create a “Make a Wish” app, something similar to that Zoltar machine, but then, I started to think about what kind of wish would the user be allowed to make? What will happen after they make a wish? Do they choose their wish from a list? Or maybe there should be only 3 wishes? I had so many questions and so little answers that I decided to do my initial idea of having a genie-like character answer random questions.
I could see the Genie coming out of the bottle as the user presses on the Magic Lamp. So I tried to create a GIF animation, but my attempt turned out to be a total failure! The background and this nice, shadowy effect around the character looked really bad. The animation itself – I’m not sure. A-okay. Maybe.
The format I was using isn’t very intuitive when making transparent backgrounds and the final effect was just a big mess.
I needed to separate the background in order to be able to export the illustration of the Genie as a GIF.
Another problem I stumbled upon, before I even started to think about coding, was the dialog bubble. In my initial design, I wanted to have a bubble that was a little bit transparent, but due to the format’s flaws, I wasn’t able to do that, even after trying multiple different options. Well, here came a good lesson for the future: the format is actually very primitive. And, because I was so stuck on making this animation for the sequence, I forgot that I could use .png files! So, my text bubble was saved as a .png and the day was saved. 🙂
Me clearing the background around Genie:
At this point I decided that I’m not going to bother with showing Genie’s full body, as the upper half of his body looked much more interesting. With the smaller body, the details were getting lost, especially when I put it against a richer background.
If it comes to coding, I had a little bit of a problem with the input box. The script worked and provided answers every time you clicked on the lamp. The problem was, it worked even when the input box wast empty. So here is where it took me a little bit to figure out how to bring an alert window whenever there’s no text in the input box, but the lamp was pressed.
If I had more time to work on this project, I think it would have been fun to program the banning of words you absolutely cannot use when asking the Genie a question. If you input that word in the input box, it would evoke a specific response, reaction, or warning from the Genie. The word could be as simple as a swear word, and the Genie’s response could be something like: “Now, watch your language there, mortal!“ or something like that to make it more fun.
Yeah. So that’s it.
REFERENCES:
http://www.ginifab.com/gift/magic_8_ball_sayings.html
http://evajaworowski.tumblr.com/
https://www.vecteezy.com/free-vector/aladdin
https://stackoverflow.com/questions/32471774/magic-8-ball-in-javascript
https://www.codecademy.com/en/forum_questions/52b42820548c35a5b0001b5d