THE IRENE
Description |
My client is Irene. She is described as clumsy, random, oblivious and funny. Her favorite character is Hakase from the anime Nichijou in the comedy genre, and in her spare time she likes reading and playing the alto saxophone. She tends to get clumsier when there are more objects on the ground, but in a new environment she is less oblivious.
In this project, I incorporated Irene's traits and hobbies into her favorite character Hakase. |
The Process
In the first 5 minutes of talking to Irene, I gathered that she abolutely LOVES anime, and loves working with her hands (sewing and making plushies) . Initially I thought our button had the ability delight and help the user, and so I started thinking of ways in which a button can help her in her everyday life. These are my initial ideas:
The ideas of having a button to order missing sewing supplies, create a plushie or a design of a plushie, or making a backpack 50% lighter on demand appealed to me because they would be solving real life problems. Little did I know that we had to actually make the button a reality by coding it in WPF (Windows Presentation Foundation) ! After discovering this I went back to Irene to gather more information about her.
After asking numerous questions to Irene, I have gathered that she is described by other people as oblivious, naive/innocent, funny, ditsy and clumsy, random and smart. Her hobbies include reading, gaming, poetry, story writing, history reading, alto saxophone playing and learning songs by ear to written notes. Her favorite memory dates back to junior high, favorite place is a quiet spot in the library, and she is less oblivious in new environments but more likely to be clumsy if the environment is messy. With this information I start to sketch. |
Some of the storyboards and ideas I have sketched are as follows:
After some sketches, I decided to step back and think about the implementation of the button. Some of my ideas were interesting, but ambitious to implement given the time constraint. i was seriously considering the idea of iterating through multiple anime characters and having the button do animations (jump), but my critique group advised me to do one or the other because there would not be enough time to implement everything.
With this in mind I zeroed in on these qualities/hobbies: oblivious, funny, clumsy, random, reading and alto saxophone playing. I chose these because I felt it was important to make these personalities obvious in the interaction with the button (saxophone playing, as you will see in a bit), and given the time constraint (1 week) would be the quickest to implement.
I decided to pick Hakase as the main button to represent Irene's love for this character. In order to make Irene's personality shine through, Hakase will be Irene's representative in this project. One click will represent calling Hakase's attention, two clicks will ask Hakase to play a song for us via saxophone. In this case, she will play "Careless Whisper" by George Michael because I thought it will play to her funny personality. After an initial click, every 3 seconds she will do something different, either: face left, right, back, jump, or fall. I feel this plays to her random personality because you can't call these actions on demand, and you can't expect to know what action comes next.
At this point i still have not hit 3 of the qualities i have zeroed in on, and I went to Kevin (our Teaching Advisor for this course, CPSC 581) for more feedback. He mentions to consider the context of the environment the button is in. With this the right click was born - it allows to toggle between environments (the library, Irene's favorite spot - also means she likes reading- and the jungle). In the library, Hakase has a 30% chance of facing you when called, and a 10% chance of tripping (being clumsy). In the jungle, Hakase has a significantly higher chance of falling, and in this new environment she is less oblivious so is more likely to face you.
With a final revision of this storyboard I proceeded to implement my button.
With this in mind I zeroed in on these qualities/hobbies: oblivious, funny, clumsy, random, reading and alto saxophone playing. I chose these because I felt it was important to make these personalities obvious in the interaction with the button (saxophone playing, as you will see in a bit), and given the time constraint (1 week) would be the quickest to implement.
I decided to pick Hakase as the main button to represent Irene's love for this character. In order to make Irene's personality shine through, Hakase will be Irene's representative in this project. One click will represent calling Hakase's attention, two clicks will ask Hakase to play a song for us via saxophone. In this case, she will play "Careless Whisper" by George Michael because I thought it will play to her funny personality. After an initial click, every 3 seconds she will do something different, either: face left, right, back, jump, or fall. I feel this plays to her random personality because you can't call these actions on demand, and you can't expect to know what action comes next.
At this point i still have not hit 3 of the qualities i have zeroed in on, and I went to Kevin (our Teaching Advisor for this course, CPSC 581) for more feedback. He mentions to consider the context of the environment the button is in. With this the right click was born - it allows to toggle between environments (the library, Irene's favorite spot - also means she likes reading- and the jungle). In the library, Hakase has a 30% chance of facing you when called, and a 10% chance of tripping (being clumsy). In the jungle, Hakase has a significantly higher chance of falling, and in this new environment she is less oblivious so is more likely to face you.
With a final revision of this storyboard I proceeded to implement my button.
Final Revision: The Mashup
Implementation
From my final revision sketch, which is an amalgamation of the alto-saxophone sketch above and other sketches I made, I initially planned to do the following:
However as I was coding this, it was not so easy to implement a long press on the mouse event, as it would identify it as 1 click as well. Not to mention its a bit hard to find audio snippets of uncontrollable laughter that fit Irene's voice. I scrapped this part entirely and focused on the randomness of the character.
I ran into difficulties with implementing three clicks as well. For the Mouse Down event, there isn't a quick and easy way to trigger an action when 3 clicks are done, if you plan to have an action for one click or two clicks as well. If you click three times, the other actions will trigger alongside it.
Instead of doing 3 clicks for playing the saxophone I changed it to toggle when a right click is done.
At this point the button felt very static (stayed in one place only), so I added the capability of dragging the button as per Kevin's code (see acknowledgements section below).
Overall it was fairly straightforward translating the storyboard to code!
- one click makes Hakase turn to face you (sometimes)
- long press makes Hakase laugh uncontrollably
- two clicks will make Hakase do something random (jump)
- after some time the environment will change
- three clicks for playing the saxophone
However as I was coding this, it was not so easy to implement a long press on the mouse event, as it would identify it as 1 click as well. Not to mention its a bit hard to find audio snippets of uncontrollable laughter that fit Irene's voice. I scrapped this part entirely and focused on the randomness of the character.
I ran into difficulties with implementing three clicks as well. For the Mouse Down event, there isn't a quick and easy way to trigger an action when 3 clicks are done, if you plan to have an action for one click or two clicks as well. If you click three times, the other actions will trigger alongside it.
Instead of doing 3 clicks for playing the saxophone I changed it to toggle when a right click is done.
At this point the button felt very static (stayed in one place only), so I added the capability of dragging the button as per Kevin's code (see acknowledgements section below).
Overall it was fairly straightforward translating the storyboard to code!
In the library:
In the forest:
User has the ability to drag Hakase around. Notice the change in positions of each image.
Additional notes:
Every 3 seconds she will either turn left, right, back, jump or fall down, this plays to her random behavior.
Every 3 seconds she will either turn left, right, back, jump or fall down, this plays to her random behavior.
Limitations:
One thing I wish I would have done is to put more emotion into the character. Every time she falls down, the emotion on her face stays the same.
One thing I wish I would have done is to put more emotion into the character. Every time she falls down, the emotion on her face stays the same.
Video
Download
Instructions for running source code:
- Make sure Visual Studio (2015 or above) is installed on your machine.
- Download last stable release. Download and unzip.
- Navigate to Hakase > Hakase.sln and open up the solution in Visual Studio.
- Press F5 to compile and run application.
Instructions for running the executable:
- Make sure you have a machine that operates on Windows.
- Download and unzip this.
- Navigate to Debug > Hakase (the application)
- Double click the application to run.