I am a Rabbit?
Link to my project: https://pyaemyataung.github.io/CCLab/project-b/index.html
Project Description
In My Dream constitutes an interactive narrative endeavor centered around a personal dream experience, wherein the protagonist transforms into a rabbit, descending into a hole and subsequently submerging into the depths of the ocean. Beyond its narrative dimension, this project not only engages in storytelling but also imparts informative insights into the underlying reasons behind the phenomenon of dreaming.
Abstract
The project, “In My Dream,” weaves an short narrative portraying my dream experience embodying a rabbit’s journey. Simultaneously, it aims to enlighten its intended audience, primarily children, about the underlying reasons behind our dreams. The experience unfolds across six distinct segments: the first five craft the narrative while the final segment reveals fascinating insights about dreaming. Each story section is brought to life through engaging animated sketches, empowering users to navigate via arrow buttons and interactive clicks, minimizing textual overload by utilizing audio narration.
The narrative begins with a girl wondering about her imminent dream. Users actively participate by initiating her sleep through a simple click on the sketch. As the story progresses, the girl transforms into a rabbit, traversing through a hole, plunging into the ocean water, and culminating with the rabbit’s realization of its human identity in a massive underwater mirror. The connections between these sequences are revealed solely through user interaction, creating an immersive unraveling of the story.
Sketch 1: Putting the girl into sleep
Sketch 3: Endlessly falling down
Sketch 4: “I can breathe in water!”
Sketch 5: Realization of its human identity
Process: Design and Composition
My design and idea is inspired by the project, “I am a Snail”, created by Rui Qi. The story within the project is exquisitely narrated through meaningful interactive sketches and proper audio; on the other hand, the project also targets children as the audience. I decided to focus my story on dream and sleep since topic related to dream have always intrigued me since I was a kid, and fortunately I learned a few interesting facts about it last semester from the psychology class.
As my target audience are children, I chose to display my story mostly through the animations and sketches, while selecting a child AI narrator. The sketches were mainly composed through p5 and the images I drew in my iPad.
Images I drew for sketch 1 and 2 background
Sketch 2: “I am a rabbit? Let’s check out the hole!”
In my final result, the rabbit in every sketch is coded using a class in p5 sketch. But before approaching this result, I initially started the project by drawing the rabbit and tried to animate it as an image. This plan was rejected after I started my third sketch, when I faced the problem of complication in changing and adjusting the image and its size whenever I wanted it to. Therefore, I ended up coding the rabbit.
To make the story telling process more fun and aesthetic, I tried my best to add animation in every sketch: in the first sketch, the light turns off and the girl closes her eyes; in the second sketch, the clouds repeatedly float and move in the sky; in the third sketch, the fast shooting lines indicate that the rabbit is falling; in the fourth and fifth sketch, there are bubbles that appear from the bottom and slowly flow upward. After designing the visuals and the animations, I focused on drafting my website. I wrote down the script for each plot of the story and decided to keep the dialogue and description of sketch 1, sketch 3, and the final “fun fact” sketch, because the canvas size of these sketches are small and the remaining ones are wide enough to fit in the screen alone without leaving too many spaces.
website draft
The hardest designing part of this project has to be the interactions since I have to consider the following questions: How to place the user into the main role that unravels each part of the story? How can I make the interactions meaningful? Does the interaction make sense for this specific event of the story? Though I do not end up successfully making all the interaction of every sketch to be meaningful, I am satisfied with the interactions in second and fifth sketch. The user first click on the screen to listen to the character and follow what it says(all the instructions for the user are written on the top corner of the sketch). In the second sketch, the rabbit requests to check out the hole, so then, the user will click the left or right button to make the rabbit hop towards the hole. In the fifth sketch, the rabbit is curious about the huge mirror that appears in the water, and once again, the user will move the rabbit using the arrow button. When the rabbit gets close enough to the mirror, the reflection of a girl will appear and the rabbit will be surprised and speaks more.
Interaction in second sketch
Interaction in the fifth sketch
Process: Technical
My project started simply and mainly coding the sketch of the rabbit into class and putting the background images I drew into each sketch of p5. The process of using the image was smooth with simple steps of uploading images to p5, naming the variables, setting them into the preload function, and calling them in the location we want. Then, depending on the sketch, I added different functions(methods) within the class like display(){} and hop(){} in the second sketch. I used similar methods for the animations and drawings in other sketches, with additional usage of arrays for the iteration of lines in the third sketch, and the bubbles for the fourth and fifth sketches. I do not face much problem in coding the interactions and animation. All of them are quite simple with only changes in x and y positions; except for the rabbit hopping in the second sketch, and the rabbit following the mouse(easing) in the fourth sketch. I initially made the rabbit to shift straight to the hole when the right arrow is pressed , however, I am not satisfied with the visual. So, I asked help from Prof. Marcela, and I learned that we can make the rabbit hop through subtracting the y position (this.y in here) with sin(this.x*a really small number) function times another number(that determines the height of the hop). Hopping is similar to the pattern of sin wave so everything worked well(much thanks to Prof. Marcela!!). For the rabbit to follow the mouse in the fourth sketch, I search up the method and example of easing in the official web of p5 and use it as a reference. Here, I created two variables dy= mouseY-this.y and dx= mouseX-this.x, then, I applied it to the x and y position of the rabbit: this.x+= dx*0.05; this.y+= dy*0.05. By doing so, the rabbit will following the mouse position in the water while it does not follow weirdly close to the mouse like a cursor. Besides these challenges, the last problem I had in p5 sketch is the use of sound. At first I only put sound().play directly into the condition I wanted the sound to play. The sound turned out to be a very annoying and robotic one. Fortunately, after scrolling through my class notes, I remembered that we have to use boolean in order to only play the sound for once.
I did not spend much time on designing the webpage since I aim for a simple format and design. The only problem I faced relating to the website is generating a clickable link. I followed every steps correctly in making the link, however I was still stuck in the “404 Not Found” result for more than an hour. It turns out that there was a space behind my project-b folder name. So, the problem was solved in one minute when I figured out the cause.
If I have more time, or have the chance to do the project all over again, I would like to explore more variety of sound effects and a more proper way of coding the sound so that it will definitely play every time I click on the sketch. Moreover, I would like to expand the story and add what kinds of morning activity the little girl did before her sleep(to explain why she dreamt about being a rabbit and falling into a hole).
Code of the class Rabbit in sketch 2:
class Rabbit{
constructor(x,y){
this.x= x;
this.y= y;
this.s= 70;
// this.h =
}
display(){
push();
translate(this.x, this.y);
fill(0);
noStroke();
//rabbit
fill(225);
circle(-7,45, this.s);//body
fill(220);
ellipse(20, 30, 30, 18);//paw
fill(235);
circle(-40, 60,30);//tail
fill(215);
ellipse(10, 78, 40, 20);//feet
ellipse(0, -40, 20, 50);//left ear
fill(225);
ellipse(-10,-40, 25, 50);// right ear
circle(0,0, 52);//head
fill(240, 119, 110);
circle(25, -5, 8);//nose
fill(0);
circle(5,-10, 12);//eye
pop();
}
hop(){
if(keyIsPressed==true){
if(keyCode==RIGHT_ARROW || keyCode==DOWN_ARROW){
this.x= this.x+10;
this.y=this.y+30*(sin(this.x*0.06));
if(this.y>=560 && this.x<950){
hop.play();
}
}
if(keyCode==LEFT_ARROW && this.x>20){
this.x= this.x-10;
this.y=this.y-10*(sin(this.x*0.06));
}
if(this.x>=950){
if(this.y<1000){
this.y+=200;
this.x=1060;
}
}
}
}
reset(){
if(keyIsPressed==true){
if(keyCode==ENTER){
this.x=280;
this.y=530;
}
}
}
fall(){
if(this.x>938 && this.x<950){
if(fall.isPlaying()==false){
fall.play();
}else{
fall.pause();
}
}
}
}
Reflection and Future Development
The final result of my project is a demonstration of my idea in the project proposal with depth development through applying the suggestions from my classmates, and friends during the user testing. My project proposal offers the idea of animated sketches with a paragraph of description(of the story or the sketch) beside each sketch. Later, I changed my thought after putting myself into the shoe of the children. Children are more interested in cartoons with sound effects than big chunks of words. Therefore, I did not follow my proposal for that part. The remaining parts are the same until the user testing, where I received many useful suggestions. A few of the suggestions that I incorporated in my projects are adding the hopping sound effect, adding an interaction (easing) in my fourth sketch, adding instructions on the sketch, and adding a light switch in my first sketch.
In conclusion, I am satisfied with my project in the perspectives of smooth transitions between each storyline, the aesthetic, and the short story itself(It is my favorite dream!). I think these parts work really well. On the other hand, I think more meaningful interactions can be included in the third sketch where the rabbit is falling and the fourth sketch where the rabbit is floating and breathing in the water. For example, the sign of rabbit breathing in the water is not evidently presented in the sketch. Overall, I learned a lot from this project that I can implement further in the future, not just about the coding techniques or designing the website, but also to have the thought to think from the perspective of the target audience while expressing my own ideas!
Credits and References
Prof. Marcela: Helped me to make the rabbit hop in sketch 2! Part of the code:
Inspiration:
“I am a Snail”, by Ruiqi (link: https://ricci-liu.github.io/CCLab/ProjectB/)
Easing in Sketch 4:
https://p5js.org/examples/input-easing.html
AI voiceover: Murf AI
https://murf.ai/?pscd=get.murf.ai&ps_partner_key=a2hvYXRyYW44Njg2&fbclid=IwAR0Pq7neoYUv6nguy0WwRbF8Y4jFOBaJb9haORFc1hAxzabG7L5yiXsMpAI&ps_xid=ZGZ7Kuca1Nzku5&gsxid=ZGZ7Kuca1Nzku5&gspk=a2hvYXRyYW44Njg2&gclid=EAIaIQobChMI8K_Wm5yBgwMVM_FMAh1KlApIEAAYASAAEgKxdfD_BwE