Project 1 Final Iteration | Once Upon A Huh?


Once Upon A Huh?

A Generative Fairy Tale Parody

Me as a Disney Princess - FunSubstance | Funny disney memes, Disney jokes, Disney funny

For presentation:

(P.S. You can use your mobile phone or tablet to look at it too! :))

(Link is only available for 24 hours starting 3am on 24/9/20. I used for this temporary web hosting.)

Just to recap, my project is about making a generative storytelling piece which gives the user the illusion of autonomy over controlling the storyline. However, it turns out to be all a lie, as the seemingly well selected options in the progressive storyline actually results in random answers selected for the user. Each refresh of the story will provide a different answer even if the user chooses the same options, as the array is mixed up like a good ol’ rojak.

How the Story goes:

This is the starting point of the storyline, where there is a supposedly grand font usually displayed in Fairy Tales. But the parody is in how there are random sketches mocking the grandeur of something as old and gold as a fairy tale. Click the feather to proceed.

The first part of the story appears. Click on the feather to proceed.

Now, we have 2 options you can choose from! Click on one of the options, and then proceed. (Ideally, I would make the feather appear only after the option was chosen but… owell. No time.)

When one of the options are selected, the chosen answer will be revealed (mind that this answer is actually randomly selected from a pile of other options), and the options will disappear. Click on the feather to continue the story.

The next part of the story will appear, and you click on the feather to proceed. This will carry on until the end of the story. The last feather will lead the reader back to the first page of the story site.

For examples of how the code works, refer to the previous post. There are only few edits on aesthetics and additions on the narratives, so this should be sufficient in understanding how my project works! For the ideation, refer here. For the first draft, refer here.

There are actually many things I want to improve on this iteration, and would have gone on with it if there was enough time. Unfortunately, 2 weeks was not really enough… but I’m going to suck my thumb and deal with it. I would like to improve on the interactivity of the story in terms of adding things such as bullet points and buttons to play with, and also fix my alignment issues. It would be nice if I could place the story on a temporary online platform so that more people can play with the story. As I am planning to work on the same project for my final project, I am aiming to broaden the scope and create a longer and better narrative for my Fairy Tale parody.

P.S. Music used has been credited accordingly! But I will want to use a more public domain-ish music for my final work along with greensock, codepen and boostrap interactive elements.



Include better cues to indicate a pressed button. (grey out, etc.)

Have more wholesome narrative where decisions are important.

Have better rationale: What’s the purpose for subverting expectations? Why do you want to do this? What’s the core message? How do you justify why the decisions made are not what the audience expects?

2 thoughts on “Project 1 Final Iteration | Once Upon A Huh?

  1. dejan.grba

    Well done Joey.

    All your observations in the concluding paragraph are correct.

    A simple but important feature of interaction you have missed is marking the linkable page elements (feather to move on, and the optional decisions). This is easily achieved with CSS by assigning different color or cursor change to the linkable elements.

    In class, we will discuss how to develop this further into the final generative artwork. Two quick ideas in that context:

    You can publish your work in progress on one of the many free web hosting services (de facto no time limit), then propagate the link through social media to monitor the audience’s reactions, and perhaps use some of them to refine the work.

    Also, you want your audience as broad as possible and primarily adult, so there should be some teasing elements in the online publication/propagation strategy as well as in the design and narrative (which you have already incorporated and are working on).

  2. dejan.grba

    Class notes recap

    You were smart to “run away” at the end of class because with what follows I would have probably kept you in the lab for the following 30 minutes, ha ha!

    My suggestion is to first work out and polish up the key technical/coding issues that we outlined together up until now, so you can continue experimenting without major tech issues. Of course, you will do the coding improvements as you progress.

    Design your strategy by looking at your work in a broader context which includes not only the narratives, presentational design/media and interaction but also the overall logic/motivation for your work and its public presentation. Specifically, it is the deception and the playful subversion of the conventional approaches to designing and consuming interactive narratives.

    Regarding sound, there could be several musical backgrounds, each matching the current narrative mood/position in the narrative. What could be the logic for selecting these backgrounds?

    Another important factor is the selection criterion or criteria for the progressing narrative steps. Right now it is pure randomness which in itself does not carry much meaning. How about introducing some spicy/humorous inputs which determine the branching decisions? For example, these inputs could be some continuously and unpredictably changing data from online sources, like the stock market indexes or specific stock prices, various types of weather data, pollution data, various GPS data sources, etc. The specific type of this source data may be more or less witty within the narrative context of your work.
    Here is an “ancient” media art example: John Klima’s ecosystm (cca. 2000), also here:

    Also think about the presentational campaign strategy and the gameplay elements which will motivate the player to repeat the game, giving them the chance to notice that the same decisions lead to somewhat different unfolding of the narrative, and to try to figure out why. Teasing is your key strategy here.

    Finally (at this point), you will want to include in your content some visuals which can change by the same criteria as your narrative.

Leave a Reply