Visual Project Summary - The Debbie Button
This project was to create a button based on a user that we were assigned in class. The button created must "delight" the user when they use it. In order to complete this project, I had to interview a student in the class in order to find out what delights them in life. Using this information I created a button that I felt would complete this task.
Clicking the cat makes it jump onto the piano. The piano key is pressed by the cat and the sound of the first note of the song takes place. The paw prints move and the first letter of Debbie's old last name appears on China.
|
Clicking on the cat once it returns to it's original spot continues to add letters to her old last name until it is spelled out completely. The notes of her favourite Final Fantasy song also continue along with the paw prints.
|
At the end everything is reset and ready to be used again!
Concept and Development Sketches
As with most projects, an understanding of the user that you are creating it for is extremely useful, there I started with interviewing my "client" Debbie. I found out what delights her and found out a little bit more about her.
Secondly, I created 10 rough sketches of ideas for the button that would describe Debbie and delight her. I tried to get a variety of ideas quickly based on the information I collected during the interview. The next day I started creating some storyboards in order to follow through on some of my rough sketches. I decided on storyboarding as it is helpful to see how the idea can be followed through. |
I even sketched out the keys on my piano in order to get an idea of how I was going to record the piano key sounds. This was helpful as before I started the project I didn't know how to play the piano.
Implemented Software Application
Source Code [2MB]
Runnable Executable[800KB]
Instructions:
To run the .exe click Runnable Executable and download the Project0EXE.zip file.
After downloading open the debug folder and click on the .exe file.
To access the source code click on Source Code and download the CPSC581Project0.zip file.
After downloading you can access the source code via Visual Studio.
Runnable Executable[800KB]
Instructions:
To run the .exe click Runnable Executable and download the Project0EXE.zip file.
After downloading open the debug folder and click on the .exe file.
To access the source code click on Source Code and download the CPSC581Project0.zip file.
After downloading you can access the source code via Visual Studio.
Video of Final System
Please see the description of this video for the updated credits as I made two mistakes when creating this video.
Credits for this Project:
* Piano sounds: Created by me (Lisa Hynes)
* Piano Tutorial I followed from: https://www.youtube.com/watch?v=2J37jWazLaY
* China outline from: https://commons.wikimedia.org/wiki/File:China-outline_03.png
* *I drew over the outline of this picture and created the end result in photoshop.
* *I created the china flag in photoshop
* Philippines Outline from: https://en.wikipedia.org/wiki/File:Philippine_climate_map.png
* *I drew over the outline of this picture and created the end result in photoshop.
* *I created the philippines flag in photoshop
* Pusheen the cat (Regular and jumping) from : https://commons.wikimedia.org/wiki/File:Pusheen_.gif
* * I drew the image freehand after looking at this one. I remixed it so that the attributes
* I wanted were included.
* *The original Pusheen the cat was created by Claire Belton and Andrew Duff
* Paw Prints: Created by me (Lisa Hynes)
* Piano Keys: Created by me (Lisa Hynes)
* Piano Tutorial I followed from: https://www.youtube.com/watch?v=2J37jWazLaY
* China outline from: https://commons.wikimedia.org/wiki/File:China-outline_03.png
* *I drew over the outline of this picture and created the end result in photoshop.
* *I created the china flag in photoshop
* Philippines Outline from: https://en.wikipedia.org/wiki/File:Philippine_climate_map.png
* *I drew over the outline of this picture and created the end result in photoshop.
* *I created the philippines flag in photoshop
* Pusheen the cat (Regular and jumping) from : https://commons.wikimedia.org/wiki/File:Pusheen_.gif
* * I drew the image freehand after looking at this one. I remixed it so that the attributes
* I wanted were included.
* *The original Pusheen the cat was created by Claire Belton and Andrew Duff
* Paw Prints: Created by me (Lisa Hynes)
* Piano Keys: Created by me (Lisa Hynes)