AT LONG LAST, my final project is finished!
Presenting to you my Interactive Storytelling x Generative Art Project –
Once Upon a Huh? 2
link to playable version: https://jxxycke.github.io
This link is also mobile friendly, but it is desktop optimized! (To activate shake hover effects for mobile, simply press on the elements in the story and hold for a bit; the css shake effects etc will activate!)
<Once Upon a Huh? 2> is a reprise of the first version I did during my Midterm project, <Once Upon a Huh?>. It is a parody of a Fairy Tale story fashioned around the idea of subverting the readers’ expectations. On first glance, it seems like a normal interactive storytelling piece, where there is an element of choose-your-own-adventure. As the reader, you get to make your own choices as to how the story goes, and finally decide how the ending would be like… supposedly.
However, if the reader reads on or repeat the story, they would realize that the choices they made actually makes little impact how the ending would be like. The choices are quite vague in what endings they might incur, and what the reader expects from the options they chose after thinking seriously and cautiously about may serve to disappoint them instead.
The idea of creating a project which plays around with the feelings of my readers in a storytelling context is to enhance the effect of Surprise, which is the theme given for this project.
Surprise is all about the unexpected qualities that does not fit in the expected structure, but with a bit more positivity such as wonder and astonishment.
When the reader is constantly thrown with unexpected surprises, one after another, it messes with their decision-making process and when they start to doubt their own choices, it leaves the reader no choice but to keep getting surprised without being able to control the story. To add on to this experience, I mess with the way the options are portrayed so that they might end up clicking the wrong option. I also ensured that there are 3 options and not 2 in each decision-making segment, to give the illusion that there is a “default”; where there is a fake basis of comparison to affect decision-making.
The whole idea of decision-making in a choose-your-own-adventure story is to make the readers feel that they are empowered with the responsibility to create a good story. There is now more stake at hand. A bad and nonsensical story would be their fault. Readers will be curious about how the story turns out based on their own autonomy.
However, when we refer back to surprise, the reason why it works is because there is no leader. There is no fixed direction into what people might define as correct, which will eventually plunge everything into chaos because there is no synchrony in thought process since everyone thinks differently. Hence, subverting expectations in my story means that it is removing the leader from being able to create the story based on their story. In this case, the leader is the reader. I do this by removing the autonomy of making decisions.
All in all, my conceptual aim is to tease the audience. I want to deceive them playfully, subverting the conventional approaches of designing and consuming a narrative, not just an interactive one. I want to tell them that in generative art it is useless to think that everything will simply “work your way”. The traditional narrative is now obsolete. You have to grow with the narrative to finish the story with a satisfied smile on your face. When you are constantly bombarded with what you do not expect, it makes life less boring because life is no longer mundane.
I do not intend to publish the first version of this interactive storytelling experience. I am going to leave the readers wondering where on earth is part 1, just to tease them further.
My interactive story this time around is a parody of Cinderella. Previously, it was the Little Red Riding Hood for the first edition.
<Once Upon a Huh? 2> consists of 6 chapters as follows:
The story follows the plot of Cinderella being enslaved by her family, just like the original story. However, she is more rebellious in this version, where she literally fights her way to the Ball, not because she wants to meet Prince Charming, but because she wants to meet the Multimillionaire Investment Tycoon, Mr. Smith, so that she can get a job and finally leave her disaster of a stepfamily.
To view previous updates, click on the following links:
This story is done using HTML, CSS and JQuery. There are decision-making segments throughout the story, which will reveal the next part of the story when an option is chosen. For all the choices, there are three options each.
Chapter 0 is just an introduction into how the story is like.
Chapter 1 starts with a normal story, and one decision making segment. The decision making segment has only one result to each option chosen. This is because I want the reader to expect that this is an ordinary interactive storytelling site with the most basic decision-making tools.
Chapter 2 and 3 breaks further into the story, this time with three alternate narratives for each option chosen. The alternatives are randomized by the code and one plot line will be picked out of the three in the array, just like a lucky draw. The idea of this arrangement is to tease the reader if they revisit the story- at the start, the story seems just like the same story they have been reading, but when they get to the second segment, it is not the same story they read. Chapter 2 makes use of images as the options, while Chapter 3 makes use of text.
Chapter 4 is the same as Chapter 2 and 3, except that there are only 2 alternate narratives for each option chosen. This is because the main interactive point of this segment of the narrative is the Timer. The reader has only 20 seconds to make a decision about the options. If they do not pick an option within the 20 seconds, a Fourth option will be triggered instead.
Chapter 5, the last chapter, is the final tease for the reader. There is only one narrative for each option, just like at the start. Over here, the reader gets to define the ending of the story like they originally expected, even after the roller coaster of confusion in the front chapters. This is ironically the only true ending they can “decide”, and it is mockingly sad because it is a very significant decision to make.
Interactives used and Why:
- CSS Shake
- This was used for the buttons, titles and options. This is to make the text less static.
- This was used for the options in Chapter 4: The Day.
- Scroll back to Top
- Since the story is very long, this is used to bump the story back to the top, so that the reader can reread the story again to see if there is anything they left out/ observe the background.
- Animated Buttons on Hover
- This is for the “Continue” buttons. The animated effect is more eye-catching for the reason to know that they are supposed to click on it!
- Gradient Background on Scroll
- This is for the background colour, where the colour is gradient from pastel pink to grey. The reason why I chose this colour scheme is because I want to strengthen the argument behind subverting expectations. The story is supposed to be ordinary, fluffy and innocent, just like a 5 year-old little girl’s pastel pink bedroom with unicorns and clouds. Hence, the story starts off with pastel pink.
- However, the story gets more weird, inconsistent, and unexpected as you read it. This is especially so since subtle hints of real life social issues are being dropped in the story, such as social ladder, corporate corruption, violence, and lust. This brings the story to a Grey area, which will leave the reader wondering at the end if this is supposed to be a story meant for kids. Hence, the background of the story transits to grey. If the reader takes the time to scroll up and down again, the gradient will be strikingly obvious.
Song: Daystar – Fluffy / https://youtu.be/ZMl1bf9bj2c
Copyright: 샛별 Daystar
The reason why I chose this music is similar to why I chose the pastel pink colour scheme for the background of the story. I want to insinuate that the story is peaceful, fluffy and innocent, so that readers will assume that it is a happy story all the way. There will be a jarring difference between the actual mood of the story and the mood being portrayed through the music as the narrative becomes more unexpected and less kid-friendly. I hope that this difference, sort of “gap-moe” will enhance the surprise element of my project.
So this is it! This is my project. I cannot publish the entire code here and the other progress photos because this post is already way too long, so do visit my other updates through the hyperlinks in this post! Thank you so much for sticking with me!