Final Update for Final Project: Once Upon a Huh? 2 -Finished!


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:

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.

Progress Report

To view previous updates, click on the following links:


Interactive Walkthrough

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.


  • Timer
    • 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 /

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.

Download Gif Lion King Throw | PNG & GIF BASE

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!

I have lost count which Update this is | Once Upon a Huh? 2


It is Week 12 and aaaahhh

I don’t really have a lot of things to update this week! Basically what I did was to tidy and clean up the code of my HTML, and adding the narrative inside as previously organized. I also tried to tidy the aesthetics up, such as for the headers to make it more visually neat because it is a lengthy piece after all.

For this week, the final week, I will be drawing the art for the pictures I will be using for my options in Chapter 2: The Ball, referring to the dress designs Cinderella has to pick, and seeing if I can add any additional widget interactions to spice the texts up a little, such as CSS Shake. I will also be converting the final piece into a temporary URL so that everyone can read the story on their own time and target.

CSS Shake:

That’s all!

Once Upon A Huh? 2 | Update #4


Disney Princesses Sloth GIF - DisneyPrincesses Sloth Princess - Discover &  Share GIFs

I feel like a sloth because I did not manage to accomplish super a lot. But I really did try….

So just want to update for this week!

I tried realllllly hard to fix the timer issue I had on my code… but I still could not. I think I did make a little bit of progress, which is finally making the second timer appear at where it is supposed to be! The problem came in when the timer does not move even though I have referenced so much to the code Prof. provided me with and also by changing so many elements on my javascript and html files that I am about to go mad. In the end, I decided to go with just one time-based element in my project.

I finished my story and the options that follows the narrative, though! 😀 I am happy. Week 11/12 will be tidying up the narrative and adding the narrative to the code to finish the project. I will also have to draw the images used in the project.

As my project is meant to be a Demo as to what an interactive choose-your-own-adventure story can be like, and also due to very tight time constraints, I decided to cut down on what I have initially proposed while retaining the concept of my work.

Chapter Breakdown:

Chapter 0: Prologue

Normal Storyline; it is just an introduction.

Chapter 1: The Ball

There is a choose-your-option section here, but there is only 1 option for each choice. This is to subvert expectations, where I make it seem like there is only one choice per option, which will be different later on.

Chapter 2: The Dress

Over here, there is a choose-your-option section too, but the selection is a picture for each option. Each picture will lead to 3 possible narratives that can continue from the chosen option. This is different from the first one, where the reader only has 1 narrative to derive from each option.

Chapter 3: The Rebellion

Here, there is a choose-your-option section with 3 narratives tied to each option. However, the options are text, not an image.

Chapter 4: The Day

Over here, there is choose-your-option section but with a timer. If the reader does not decide within 20 seconds, a fourth option will be triggered. Over here, the point is to express how there is a timer, so I only put 2 possible narratives for each option.

Chapter 5: Epilogue

Finally, the last part! Over here, I decided to tease the reader. Because they don’t really get to decide how the narrative flows in the middle sections of the story, I am giving the reader a final chance to truly “decide” the ending of the story based on their own choice of judgment. However, it is ironic and a shame, because the last decision they truly have control over, is not really very significant to the ending of the story… only entertaining.


That’s all for this week! I will not be posting the narrative so teehee.

Once Upon A Huh? 2 | Update #3


Fairy Godmother Cinderella GIF - FairyGodmother Cinderella Magic - Discover  & Share GIFs


I didn’t do a lot

But I have been struggling quite a bit with the coding even though I know it is supposed to be easier than whatever I have currently done but I guess I just ain’t smart enough yet-

But here is Update #3 nevertheless! Or was it #2?

For this week, I made the following changes to my original Midterm project code:

  1. Change the background from plain white to Gradient Pastel Pink to Grey, which happens upon scroll.
  2. Change the music to the fluffy music I have intended to use.
  3. Amended some of the alignment for the text.
  4. Change Feather icon to disappear after clicking instead of remaining, since I changed the story to a full page scroll rather than a click-to-advance-to-next-section-while-hiding-previous-section method.
  5. Bolded the options, to make it more obvious that you are supposed to click on it.
  6. Make a timer appear upon revelation of the options for the urgent choices, failure of which to do so will advance a fourth option instead.


However, I faced quite a few issues that I have no idea how to fix…

  1. I made my timer and options fade away after an option is chosen, or after the fourth option appears. However, I realized this made the rest of the options and timers disappear completely, probably because of the id or class I have called in my code. Still not sure how to resolve this though… I don’t want to have to make a separate javascript timer for each timer I use because I’m pretty sure there’s an easier way to do it…
  2. For the gradient scroll, I hope for the grey to happen only at the ending parts but because I don’t know the exact length of my story, I can’t do that. But I am quite happy with the current gradient because when you scroll up, the gradient stays.
  3. I haven’t put in a third option.
  4. I am only 1/3 through my narrative but I think things will be faster once I nail down the coding.
  5. Still having some alignment issues between each interactive element with regards to the spacing. I know it has something to do with the display: none or display: block but it didn’t seem to work but I hope I can fix it soon….

And sooo I will be continuing to work on my project. 🙂 Hopefully I can fix all the coding issues by next week (W11), and then finish the narrative by the following week (W12) and have the finished website by Week 13.



Mood right now:

Exploding Disney Princesses - Album on Imgur


Final Project Progress Update #2 | Once Upon a Huh?


Generative Art Final Project Progress Update #2

Once Upon a Huh?

“In narrative, we take experience and configure it in a conventional and comprehensible form. This is what gives narrative its communicative power; it is what makes narrative a powerful tool of persuasion and, therefore, a potential transformative device for the disempowered.”

– Steven L. Winter

Concept Update:

I was doing my History homework for an unrestricted elective and was reading up on the Scopes Trial before coming across this quote. Of course, in the reading, it was in reference to the controversy of freedom of speech during the time where science and religion was in battle, but I thought that it did strengthen my own conceptual terms for this project.

Previously, my goals for this project was to generate confusion, subvert expectations, and to allow the reader to realize that a narrative can ultimately be useless because we cannot control it. However, I would like to add on to that.

Conceptually, I would like to disable the reader by enabling them. I mentioned this through Lisa’s quote that it is cruel that people don’t get to choose between two immoral choices, but it is more than that. I guess to me, a narrative where people are disempowered to make their own choices, in other words, being powerless in altering the narrative of the story on their own terms, is one that strengthens the narrative. This is because by removing the power to control the plot (even though under the illusion that the readers have full control), it increases the power of narratives as a communicative tool multiplied.

The reader has to understand and flow with a story they did not expect. For that to happen, the narrative has to be strong enough to withstand people’s inability to understand and discern the possible outcomes. I think overall thinking this way for my project will boost its narrative power and hence the strength of the generative art.

Tinkering Update:

Moving on to my work for this week, I have thought about and researched on multiple ways I can enhance my project. They are as follows:

  1. Having a timer; at certain urgent choices, there can be a countdown timer to signify the choice has to be made within that duration. Failure to do so will result in a “Fourth option”. This fourth option will theoretically come in the form of a new instance but I have not explored whether I will be stuck with that.


How to Create an Animated Countdown Timer With HTML, CSS and JavaScript

2. Implanting images as possible results from options.

3. Have my background change from a fluffy, pastel colour to grey by the end of the story to symbolize that my narrative is ultimately one in the grey area since we cannot control whether the results will be positive or negative. Also, because of my change in narrative to a possibly slightly more serious note at the end, it will remind us that fairy tales are not necessarily fairy tales for everyone even if they are to us as an individual. This is elaborated more in point 5.


4. I will be writing the story in First POV to enhance personalisation. At least, that was what I thought, but it wouldn’t sound very Fairy Tale-like anymore. So I’m sticking to third POV.

5. I want to take in the suggestion for me to align my story to real life culture. Hence, I will be using a hybrid story line instead. This means that at the start, the story will be fluffy and funny. However, as the story progresses, it might get darker, and reveal parallels to true societal issues but only subtly. The reader can choose to read the story on surface level and enjoy it as a simple parody fairy tale, or they could think deeper about the issues brought up like a reminder to our dastard society.

6. I will be removing the section fade outs for each story segment to generative a long story instead so that the reader can go back to revisit the previous parts of the story. The story will end up as just one long scroll eventually.

I will be looking through bootstrap, greensocks, w3, codepen, csstricks and other possible outlets for these add-ons.


That is all for my update this week and I’m broke af-

GUESS WHAT JASMINE??????? I STOLE THIS BREAD! HAHAHAHA - Cheezburger - Funny Memes | Funny Pictures

Final Project | Once Upon A Huh? | Update #1


Final Project: Once Upon A Huh?

Just to recap, I created a HTML-based storytelling project where the audience seem to have the autonomy to choose how they want the Fairy Tale to go, but in fact they are actually not in control of the scenarios that happen. In fact, no one can control how the story goes except for the system story embedded in my HTML code. Muahahaah.

Click here to view my Midterm submission.


Food for thought after Midterm Submission:

There should be better cues on how to indicate a pressed button. For e.g. greying out the image, etc.

The narrative could be structured where certain decisions are important to the plot.

Understand my rationale better for nonsense options; what is the purpose for subverting expectations? Why do this? What is the core message? How do you justify why the decisions made are not what the audience expects?

After thinking a lot about these questions and ways to fill up the loopholes that has previously existed in the Midterm project, I am planning to make some changes for the final project.


The changes I will be making are quite a few but the main ones I have figured out are:

  • Instead of having one array of random story parts for two options that will lead to the same narrative, I plan to have one array of random story parts for each option instead. This way, the answers will be more specific to the option that is selected. Each option will then lead to two different narratives. These two narratives will then continue on to the general narrative. I hope that this style of story will give a more personalised feel!
  • If it works, I plan to have three options instead of two options. This is because psychologically, it is harder to decide which is the better option when you do not have one option as the basis for comparison.
  • Based on Prof Dejan’s suggestions on considering the logic behind choosing the background and the music, I will be reconsidering the aesthetic of it.
  • I might be replacing images from the story with certain parts of the text to add more visuals to the story.


I have also done some research about choice decisions and nudges over the recess break.

I looked into Lisa Tessman’s (She’s a professor of philosophy at Binghamton University in New York State) rationale for making decisions. She states the following:

It is not always good to have the opportunity to make a choice. When we must decide to take one action rather than another; we also, ordinarily, become at least partly responsible for what we choose to do. Usually, this is appropriate; it’s what makes us the kinds of creatures who can be expected to abide by moral norms… Giving people a choice might sound like it’s always a good thing to do, but giving a choice between two forms of moral failure is cruel.

To my inference, this responsibility people are forced to take gives them more stake in the story they are tasked to produce. This will hopefully make people curious about how their story will turn out. She proceeds to say:

No one can rightly be blamed for failing to care adequately if it wasn’t possible for them to do so. But they may still take themselves to be required to do the impossible, and then judge themselves to have failed at this task. No one should be forced into this position. Not all situations that present these sorts of choices can be presented—there’s always the possibility of bad luck – but at least we shouldn’t knowingly bring them about.


Other than her discussion, I also looked up other sources of decision-making. There are basically 5 main types of decision making;

  1. Command Decisions, where decisions are made for the self,
  2. Delegated Decisions, where the decisions can be made by anyone, and the choices are inconsequential,
  3. Avoided decisions, where the outcome could be so severe that the choice should not be made,
  4. “No-brainer” decisions where the choice is so obvious that only one is reasonable, and lastly
  5. Collaborative decisions where the decision is made in consultation or agreement of others.

There are also 4 thought mechanisms that I might want to consider when creating my narrative;

  1. Rational
  2. Intuitive
  3. Recognition-based
  4. Combination

These are based off whether the decision made is conscious or unconscious, which I think is fun to play around with. I can provide decisions where people will think is a “no-brainer” to choose but has negative consequences, compared to decisions where it is less favourable but can bring more positive or funny consequences.

There are also choice architectures to consider;

  1. The number of choices presented
  2. The manner in which attributes are described
  3. The presence of a “default”

As previously mentioned, I would like to fool around with my audience. I can make negative options sound positive, and the positive options sound negative. It will be interesting to see which options the audience would rather pick. I will also be expanding my choices to 3 to create more confusion about which is the “better” choice. I think the overall confusion will make people think that their decisions matters a lot because they have to think a lot more about which decision is better for the story to proceed, which is kind of sadistic on my part, I have to admit. Because whatever decision they make in the end is not really important.


So… Nani is Surprise?

Lastly, I thought about the questions in the project brief.

What constitutes surprise? What determines its qualities?

I guess 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. It is like having an alien in the conventional society. However, being unable to fit is not necessarily a bad thing. It can very well serve as the spice to the bland soup. This is why I plan to have a story that will make people shocked but that they will probably go “ooooomgggg…. HAHAAHHAHA” after that. With regards to its qualities, I guess it is the wow factor that is important. Just like all generative art, there has to be a narrative which promotes entertainment with every step of the way, not just at the end. The attraction of surprise also lies in how the idea is “new”, hence spicing up our reality.

How surprise figures in different contexts such as the arts, everyday life, technology, etc.? How does it figure in your own life & experience?

We see surprise is everywhere in daily life as well as entertainment. When we play games or watch shows, we are eager to look forward to what happens next, expecting it to surprise us in a good way. Since we cannot predict the future, we are also surprised by anything new that happens to us in our daily life. I guess this is why unique works are prized over the mundane, repetitive things that do not bring about good value or meaning. In a way we can also say that the little or big surprises that we experience daily are the little things we look forward to in life. With nothing new and intriguing, we don’t have hope for a more interesting life because we have already experienced everything.


So, why nonsense choices?

Prof. Dejan gave me a few questions as a comment to my midterm project, and I have considered them. He told me that my main point was to tease the audience, and that “It is the deception and the playful subversion of the conventional approaches to designing and consuming interactive narratives.” I agree with his interpretation of my project; I really want to be playful and fool the audience with my project. I think that it is fun. However, I strived to understand what I really wanted and came up with three main reasons why I want to make this project.

  1. I want to subvert expectations. I believe that this would provide me with the element of surprise when the reader realizes that their options do not necessarily give them the answers they expected.
  2. I want to create confusion. With more unpredictability in the storyline, just like real life, it gives the illusion that every decision is more important and must be analysed further because it is not in-your-face. It will surprise you at every corner of the way.
  3. Fun is increased when you don’t know what to expect. It is the idea of how “it never gets old.” Just like playing a game, it is fun when you discover new things in the game. That is the modus operandi of escape rooms and environmental storytelling games, or even horror games such as Outlast and Dark Souls. However, when things get too expected and monotonous, that is when people start to feel that the game is now boring and repetitive and quit. I would like to operate in the opposite mechanism of this repetitiveness.


The New Story Plot?

My general, temporary thoughts for the plot of the final project will not be focused on the little red riding hood anymore. Instead, I have turned to a rebel version of Cinderella where she:

  1. Does not like being demure even in front of her stepfamily
  2. Cusses and throws things around at her nasty stepsisters and could not give two farts
  3. Eventually, with the help of her animal friends, summons all the animals from Fairy Tale lore to thrash the ballroom of the ball dance she was supposedly not invited to- but man she was upset, so very upset.
  4. Makes her poor Fairy Godmother so very confused and upset at what is going on as she desperately tries to keep things under control, screaming “THIS WAS NOT SUPPOSED TO HAPPEN!”
  5. Held prince charming at gun point- and he seemed to like it.

I swear I am not high on sugar drops.


Song: Daystar – Fluffy /

For the music, I plan to use a non-copyright music from Daystar called “Fluffy” because it was simply so light and happy and cheerful and made me feel like everything was going to be okay. The reason for this genre of music is because I want to give the audience the illusion that the story was going to be happy and cheerful and standardized like all fairy tales that end with happily ever after…. And then take them on a roller coaster down nopesville into a story that does not seem to make sense as a sweet cotton candy. For the background, I might put an innocent, pink, and fluffy background that seem like the wallpaper of a 7 year-old girl’s bedroom. This is my way of subverting expectations, kind of like Doki Doki Literature Club I guess? DDLC has everything in pink and dating sim glory until they start committing suicide due to the glitch character. I think that is simply marvellous. Ravishing.


That’s all I have for now.

I grew up thinking I was a Disney Princess turns out I'm this lady meme - AhSeeit


Further comments:

Use timer for “urgent” decisions; not choosing an option will be an option as well that will lead to a default option being chosen for you, or an invisible fourth option to happen. (e.g. clock strikes 12… and then?)

Try comparing with real cultural and social issues in decision making.

Consider gradient background that fades from light blue to grey, because the project is about the grey lines.

Consider music that changes with each section.

Make sure that narrative will be seamless between options. Refer to ELIZA by Joseph Weizenbaum.

Make sure that options retain their meaning behind. E.g. If you do A expecting A to happen but in the end it’s actually B that happens.

Reading Assignment 3 | System Stories and Model Worlds: A critical approach to generative art by Mitchell Whitelaw


Text Selected: System Stories and Model Worlds: A critical approach to generative art by Mitchell Whitelaw


A Critical Approach to Generative Art

Mitchell Whitelaw discusses the true attraction of Generative Art, and what it represents other than the technicality it is composed of. He suggests that there are two fundamental distinctions in software generative art; “Software formalism”, where it is prospective and exploratory, and “Software culturalism”, where it is local, situated, concrete and interventionist. Software formalism focuses on the “generativity of code, typically visually abstract, focuses on the processual relations of coding and aesthetic output” whereas software culturalism focuses on the “cultural text, critical, discursive and reflexive, deconstructing the “mind control” techniques of software”. In other words, Whitelaw separates generative art into the code meant to create the aesthetics of an art piece and the narrative behind that has deeper significance in terms of providing meaning to the art.

Whitelaw mentions that generative art is usually fundamentally created with complex systems, unlike the Paradigm of reduction which introduced abstraction to the visual arts. According to Lev Manovich, it oscillates between “order and disorder- always vulnerable ready to change with a single click of the user.” Over here, Whitelaw describes the inconsistency and unpredictability of generative art, compared to the pre-determined aesthetics of visual arts. I resonate with his claim that generative art can be a guess-and-check game, and that is what makes it so different and unique from the usual visual arts. It is an art that can only be fully appreciated by watching it grow during a set period. However, it makes me wonder if the art is considered to have died after the growth is completed.

Whitelaw mentions that “the systems, not their outputs or residues, are the core of the work”. The important thing of generative art is not the results of the art piece, but the process of the creation and the system that produces it. It is also brought up that code is the language-specific text that implements the abstract, formal structure that is called system. Even though code might seem very technical due to the numbers and calculations that are involved, but it is the formula that creates a system that gives birth to a whole world of unexpected possibilities through concrete collections of objects, relations, actions and processes. This is why the process itself is the generative art, not the end results.

Software generative art can be considered “agents” in an “environment”, where subjects in an artwork act as subjects that react with each other in a formally constructed “environment” which provided them the circumstance for reaction. The “environment” here refers to the systems that produces the outcome. In a way, we can also refer to these systems as a form of narration. This is because they structure the artwork, acting as a sort of umbrella framework which houses its growth. I enjoy Whitelaw’s interpretation of generative art as a story with a structure here because it gives greater depth and less complication in how software code works when we view it as a storybook. As an artist, this is important motivation.

TIERRA BY THOMAS RAY - ADA | Archive of Digital Art

Tierra by Thomas Ray

Therefore, I agree with Whitelaw when he states that “systems are literally texts, involving specific figurations, relations, decisions, values and ideologies”. If we see systems as storybooks, and storybooks comprises text, then we can say that the story in the storybooks are the specific figurations. Tom Ray’s Tierra system is brought in, where Ray’s biological and theological analogies are spelled out in the narration and the construction of the visualisation.

John Holland, Echo and agent-based models in biology – Biosystems Analytics

John Holland’s ECHO

Whitelaw also brings up a-life science, which is a concept brought up by Stefan Helmreich and Katherine Hayles. A reference he makes is to John Holland’s Echo, a platform for creating agent-based a-life simulations; Stefan Helmreich analyses it based on conversations with a programmer and inspection of the code; the observations come as much from the defined formal structures of the software, as they do from the discourse around those structures. A-life science is seen as a deconstructive approach, its systems being fundamentally narrative in their operation. They are the embodiment of subjectivity, gender, family and theology, decoded in part from the discourse around the software system. This is just like Whitelaw’s interpretation about how systems are like texts; we can read systems as stories. However, these stories are quite subtle, since the narration is embedded in the code that is hidden from public view. The “system story” translates or narrates the processual structure, ontology, entities and relations in a software system.

Building Blocks GIF - Building Blocks Minecraft - Discover & Share GIFs

Minecraft Building Blocks

Hence, results and final appearances mean nothing without the systems that created them. These systems tell us a story or narrative. Just like Brad Borevitz says, simulations are merely to abstract them and play with them according to the demands of an aesthetic production. The work is entirely shaped by the construction of its underlying system, its configuration of entities and relations. Generative art is essentially about creating a whole artificial world like Minecraft and showing people how it works. With Minecraft as reference, it is not the giant Swedish meatball nor the mansion you have built in the game that matters; it is the process of gathering materials and resources to build the meatball or mansion that is to be appreciated as generative art.

Whitelaw proceeds to talk about combinatorics or the playing out of permutations to make generative art, which is the opposite of Generative art’s complex systems. This is the questioning of the shape of the system, the question of interpreting, or responding to the configuration of entities and relationship in the code. The results from these are visually complex, but the underlying system is quite simple. These forms and patterns generated were deterministic, in the sense that they were sure to provide a certain sort of result. However, they were impossible to predict exactly despite having fixed systems. This unpredictability is what gives rise to more stories.

Casey Reas | { Software } Structures (2004) | Artsy

Casey Reas’ Software {Structures}

An example of this is Casey Reas’ Software {Structures}: Reas’ #002 and #003, Tarbell’s #003A and #003B, and Ngan’s #003B. In this project the artist’s focus was reflexive and processual: considering the “natural language” specification of a structure, and its varied implementation. Removed from that context, however, we are faced once again with the shape of the system, and the question of interpreting, or responding to that configuration of entities and relations. The model worlds in these instances are pure machines, clockwork constellations.

Physical simulation is then brought in the text to compare against software art, where the systems were usually digital in effect. Physical simulations were pragmatic and effective, creating complex, dynamic interactions between elements at low computational cost. For physical simulations, there is immediate physical resonance, inherently narrative and metaphorical. Mark Napier and Scott Snibbe’s works in the CODeDOC project were brought in for comparison. This is to prove that generative art does not necessarily succeed only in the digital realm; it is also important in the physical sphere as long as there is a process and interaction between different elements of the art piece.

Further in chapter 3 of the text, Whitelaw talks about how results are “organic” and “cellular”, because entities get to “experience” and “choose” which way to go at intersections. This is a symbolism of progression of a narrative. Generative art makes use of multi-agent systems, where entities are explicitly defined and visualised to encode an ontology, a structure of entities and relations, which must be read as the core of the work. These entities have static properties and behaviour over time, which means that history is often absent. “History” will only exist when these entities are introduced to each other to create a catalyst which will elicit the gears of a system to move. In a sense, these can be termed as agent-based systems, where it presents specific attributes and modes of being and relationships between individuals, groups, and the environment.

On this kind of dependent system, where agents meet the environment to run the system, power relations never emerge because there is no “leader” in the system. I think that this is key in generative art because the idea of unpredictability and randomness is that we cannot figure out what will happen, hence having no “leader” is important. There should not be a leading feature that signals the next happenstance, or it will ruin the whole idea of generative art being a work that is special because of how it happens.

Chapter 4 talks about generative software art, as Whitelaw explains, as a potential platform for telling system stories that are more sophisticated, critical, or experimental. It has potential to provide a visual of the systems we live in. In this case, there is no agents-meet-agents story. There is a disconnection between agent and the environment, where agents interact with each other but have no functional impact on their world. These agents lose their individuality when they intersect with each other. In other words, the agents do not have links to each other until they are able to interact with each other, which will spur on a catalyst for the system to go into operation, which is why interaction is more important than the by-product or the pre-product of the experimental art. is a database for Casey REAS

Casey Reas’ Microimage is a database for Casey REAS

Casey Reas’ Tissue

Whitelaw brings up Casey Reas’ works in Tissue, Microimage, Articulate, TI and Cells. Tissue and Microimage in particular begin to develop the homogenous swarm, creating distinct “species” of agent with distinctive (but again fixed) relationships. The added complexity of the interaction within the system is revealed in the images, as tangled clouds resolve into dark loops and braids. This is the case where agents themselves are individual until they meet each other, where in this case begin to become tangled clouds that creates a new aesthetic for the artwork.

Ichitaro Masuda’s Haohao

Ichitaro Masuda’s Haohao has multiple species of agent, differentiated in size and colour, and attracted to and repelled from each other to varying (randomised) degrees. There is no agent-meets-agent story. When the forces of attraction and repulsion meets equilibrium, the agents form clusters of give or more which might orbit other groups and might change unpredictably if disrupted by an invading agent.

Towards Artificial Societies

Mauro Annunziato’s Artificial Societies

Mauro Annunziato’s Artificial Societies drawings is the final example of agents interacting with each other but have no functional impact on their world. Their character arises from a simple feature of his system in which agents’ paths are drawn into the environment, and where agents also “die” once they interact with each other. Equipped with a simple genetic/ evolutionary mechanism, the agents progressively divide their environment into isolated “habitats”, each applying a particular selection pressure to the agents within it.

Ultimately, Whitelaw wants us to understand that an environment is not the blank space we usually visualise, which can only bear meaning once there are subjects defining what the space is for. Environment in generative art is instead something that encompasses a system’s history to create results. The environment in this sense, is the system of the code.

Finally, we can decompose a system and analyse the modes of being and relation that it encodes in a generative art system. However, we have little say in how the encodings play out and how they function during the operation. Whitelaw terms this as “computational sublime”, where it is an emergent generativity; it generates art as it emerges. Moving back to the previous concept of a-life, it does not provide increasingly accurate simulations of an authorised “life”, but instead provides experimental and reflexive performances of possible lives.

Axis - Interactive Art by Golan Levin and Collaborators

Axis – Interactive Art by Golan Levin and Collaborators

The important thing about generative art is its structures and properties. These factors are the things that can be tinkered with to change a system and the way it operates, hence leading to the creation of different worlds. Generative art or abstract software art is a potential alternative of stories, and also toying with complex, dynamic systems to generate new model worlds. An example is Golan Levin’s Axis applet, which abstracts political rhetoric into a database-driven combinatoric. It draws its algorithms from the same source, extrapolating, diverting or visualising rhetorical entity and relation structures. This is the proof that we should reconsider the difference between critical, reflexive cultural software art, versus the utilitarian, un-reflexive, result-oriented generative art.

Overall, I really like the idea Whitelaw establishes in his research, where software code is seen as narrative, and where the process matters more than the results. I am someone who really love reading and creating stories, and I think looking at the technicality of software coding is really draining at times. It is mathematical, dry, and formulative. It does not appeal to me as an artist because of the precision it requires. However, when we look at the code as a narrative that gives birth to endless unexpected derivatives, it does not seem as strict and static anymore. An artwork is shrouded with an air of mystery and curiosity, even if it is technical.

Furthermore, it relates to my final project because of the unpredictability of the event, despite being coded beforehand. As my project is about having unpredictable follow-up stories from options chosen by the reader to proceed the story, I think it gels very well with the idea that the code is a text that forms a narrative. In my case, there is a parallel between the software code I am using (HTML) and the story I am crafting. They are both narratives; one is a technical story that decides how the algorithm of the story will appear, and the other an actual unpredictable storyline. Ultimately, I feel strongly for the condition that narratives are the basis of generative art, where it crafts the essence of the artwork for public appreciation. It is not like normal arts where the results are what matters, be it a graphic design or a film. Generative art in interactive media is probably one of the only mediums where the process is the art piece.

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?

Generative Art First Iteration | Progress Report 2 | Once Upon a Huh?


Week 2 has better progress!

I managed to fix up some of the errors I have faced after chugging a whole cup of homemade starbucks coffee.

Errors I managed to fix:

  • Having 2 clickable options that will fade after the person interacting has clicked one of the options. Originally, I planned to have 3 options but due to time constraint, I shall stick to just 2 options, just like Bandersnatch by Black Mirror.

Over here, there are two examples of how the options might appear. The reader just has to click on one of the options.

  • Having the paragraph that is the option selected by the reader to appear below where the options originally was. Turns out that this was just a dumb mistake where I forgot to separate the divisions in my code…

For the first instance, clicking on any one of the options will lead to the selected narrative being displayed, while the options that were provided would disappear. Secretly, the two options actually draw their answers from the same random array so clicking either of the options actually don’t really matter…. you will still end up with a random answer from the rojak of options available behind these options.

For the second instance, it is just like the first instance. The options will eventually disappear leading to the story continuing without options shown. However, in order to prevent the reader from clicking on the options in the wrong order, the displayed format will not be used. Instead, the next options page will be displayed on another page rather than on the same page.

Here is the amended code for the random sentence generator for javascript.

Here is the amended HTML code for the appearance of the options.

Here is the amended javascript code for the appearance of the options.


Overall I am very happy with my progress for this week! This means that I have the less code-tedious things to finish for this week and I will be ready for Week 7.

Things I have left to do:

  • Aesthetics
  • Narration/ Storyline/ Options


Time to cri.

Project 1: Generative Study First Iteration | Once Upon a Huh?


Just to recap, I am making a generative storytelling project via HTML, CSS and JS Coding. The story progresses randomly despite the reader seemingly picking options to progress the story, giving them an illusion of autonomy or fate. This story will be centered around a parody of Fairy Tales.

For week 1, I basically crafted the structure of the HTML code with placeholder images and texts. I did not clean up the aesthetics of the site yet, as the time spent this week was mainly 30% exploring code, 10% writing code, and 60% debugging.

This is the HTML Code I have so far:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<!-- Primary Meta Tags -->
<title>Tusitala Interactive: Somewhere Else, Another You</title>
<meta content="Once Upon a Huh?" name="title">
<meta content="A Choose-Your-Own-Path Fairy Tale" name="description">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Toggle -->
<link rel="stylesheet" href="assets/bootstrap4-toggle/css/bootstrap4-toggle.css">
<!-- CSS and JS -->
<link rel="stylesheet" href="css/style.css">
<script src="js/randomgenerator.js"></script>
<body class="once-upon-a-huh">
<section class="intro m-0 p-0">
<div class="container" style="min-height: 100vh">
<div class="row align-items-center" style="min-height: 100vh">
<div class="col-12 text-center mx-auto">
<h1> ONCE UPON A <span class="textItalics" style="font-style: italic;">HUH?</span></h1>
<div class="col-12 text-center">
<img id="part-0-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<section class="part-1 hide">
<div class="container">
<div class="row">
<div class="col-12">
<p style="padding-left: 10vw; padding-right: 10vw;">Once Upon A Time...</p>
<div class="col-12 text-center">
<img id="part-1-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<section class="options-1 hide">
<div class="container">
<div class="row">
<div class="col-2">
<div class="spinner-grow" role="status"></div>
<div class="col-10">
<!-- <a class="clickableText" href="../link2">Option 2</a> -->
<!-- <div id="paragraphDisplay"></div><a class="clickableText"="newPara()">Option 1</a> -->
<div id="paragraphDisplay"></div><a class="clickableText" onclick="newPara()">Choose an apple</a>
<div class="col-12 text-center">
<img id="options-1-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<section class="part-2 hide">
<div class="container">
<div class="row">
<div class="col-12">
<p style="padding-left: 10vw; padding-right: 10vw;">The little pig was sleeping.</p>
<div class="col-12 text-center">
<img id="part-2-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<!-- Bootstrap -->
<script src=""></script>
<script src="" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap Toggle -->
<script src="assets/bootstrap4-toggle/js/bootstrap4-toggle.min.js"></script>
<!-- Custom JS -->
<script src="js/once-upon-a-huh.js"></script>

I won’t be showing the Javascript and CSS Code because it’s going to flood the whole post. I only realized how long the HTML one is when I posted it but I’m not going to delete it.

Some Screenshots of what I have so far:

This is the first screen. The reader clicks on the feather to proceed to the story.

As of now my story only comprises “Once Upon A Time…” because I am a lousy author with no imagination but this is supposed to consist the first part of the story. You click the feather to proceed to the next part.

This is the next part. You click on the option to reveal the randomly generated next part of the story. Please ignore the wayward bullet point, it’s trying to find its mom.

After clicking on “Choose an apple” you can reveal a random next-part-of-the-story.

Clicking on the “Choose an apple” button again will change the sentence generated to another random one within the array, but this is what I don’t want.

I don’t know how to debug it or even change the position of the text appearing. Still working on it. My code doesn’t like me.

After clicking on the feather on the previous page, you will be led to the next part of the story. It is the same as before.

This is how the .js array works for the random generator but I am still working on it.

The things I managed to get working:

  • Creating a single HTML document where sections are revealed based on the reader’s interaction with buttons.
  • Inserting a random sentence generator that changes based on the array of random variables from javascript when a “button” is clicked.

The things I cry about:

  • Tidying up the aesthetics.
  • Having 3 clickable options that will disappear after one is selected, revealing the next part of the story chosen.
  • Making the paragraph appear from only 1 option with the other options being deactivated.
  • Coming up with the possible narrations/ stories.

As you can see I have more things I failed at/ haven’t accomplished compared to what I have managed to accomplish. I am ready to go home to cry now.

I am still crying for my lack of skills because I can’t seem to fix my issues but if I cannot solve the issue where I have 3 clickable options that will disappear after the new part of the story is revealed and also deactivating the other options, I will stick to making the option buttons disappear after the randomly generated story is revealed = so there is only one options but with a random array of options that could be generated.

With this project due in Week 7 (Sep 24), this means that I have about 2 more weeks to finish everything. It is now Week 5, and Week 6 will be used to complete the narratives I want to use and to fix the code itself. Week 7 will be used to finish the coding for all the narratives I have in mind, and to tidy up the aesthetics.