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.

Exploratory Generative Study | Once Upon A Huh?


Once Upon A Huh?

Chosen Medium:

Text, HTML + CSS + JS coding (Web Project)



Open-sourced parody Fairy Tale storytelling through random options chosen by the reader. The story will be click-to-advance, but it is solely based on text on a web browser, the next section of the story to be revealed only when the reader chooses their option. Each option will lead to a different segment of the story.


The reader will determine the outcome of the story based on the random and vague choices made during the process of the storytelling. (hence being sort of choose-your-own-adventure),



Snow White decided to accept the old lady’s offer to buy an apple. She has to choose an apple.

  • The red and ripe one
  • The one that has a slight yellow tinge to it
  • The one with a worm crawling out of it

[Reader selects option 3]

Just when Snow White picks the apple with the worm crawling out of it up, there was a sudden shriek—unexpectedly from the worm who seemed to have a personality.

Snow White jumped in shock, fumbling with the apple. She frowned at the old lady.

“What did you do that for!” She scowled, her dark brows furrowing in displeasure. “I bought an apple from you and all you do is scream at me? Here you can take it back,” she chucked the apple at the old lady’s face and hurried to push the lady out of the doorway of the little cottage she shared with the seven dwarves.

The old lady protested in muffled gibberish, hoping she could explain that the scream certainly did not come from her, but Snow White was not having any of it.

“Take your stupid apples and go away, I don’t want to see your face ever again,” she snapped, slamming the door shut on the confused old lady.


Reference/ Inspiration:

Doki Doki Literature Club

Doki Doki Literature Club Review - Gamereactor

Yuri's death scene (ddlc) doki doki literature club - YouTube

Your choices don’t matter; they will give you an unexpected surprise anyway.

Somewhere Else, Another You

Tusitala Interactive: Somewhere Else, Another You - TusitalaTusitala

Tusitala Interactive: Somewhere Else, Another You - TusitalaTusitala

Make your own decisions but the story is still not within your control anyway.


How is it a Generative Art:

The reader decides the course of the story based on total randomness with no hint about what could possibly happen next. The next part of the story is hence completely random, and will possibly surprise the reader. Choosing a decision in a story might give you the illusion that you are controlling your own fate and deciding how the narrative goes, but in the end you realize that you are still left in the unknown, with lots of unanswered questions and unfulfilled expectations. While it is calculated which decisions will lead to which answers, but as the participant you will never know which decisions will lead to which answers.

Reading 2: Amplifying The Uncanny | Response


Amplifying the Uncanny

by Terence Broad, Frederic Fol Leymarie, Mick Grierson

Pushing the limits of Perfection:

The relationship between Generative Art and the uncanny is their ability to create something unexpected from a given set of data, and then generating further distortion at greater emphasis; kind of like evolution. In deepfakes, “machines [are] optimised to make representations that are more realistic, they also generate information on whether or not a generated image is fake.” However, the cool part of this is that even though these machines can be so precise, they can end up unexpectedly making the generated image less precise; it becomes distorted because the machine is constantly improving and sharpening the accuracy of any “out of place” element on an art piece or photo. As the machine does not have human limitations imposed on it, it does not know when to stop. This unpredictability of how far the machine can push the limits of distortion can be seen as a form of generative art.

Evolution into Unpredictability through “Over-learning”:

In the text, “Machine Learning” is also introduced, where it “generates patterns in data… to predict future data or other outcomes of interest”, with the mindset of “solving” a pre-defined objective. In the text, Mackenzie also reminds us that machine learning is about the knowledge-practice and not knowledge-consciousness. In other words, it is the repeated process of the same thing over and over again by the machine which provides greater accuracy and precision of a desired outcome (as they have no brain to think and be conscious about the details they are producing). This is a form of growing, compared to the usual programming and coding of specific instructions for machines to execute. I think that this is significant in explaining how vast generative art can be; when a machine “grows”, it does so by self-improvement through previous data created but when there is no “stop button”, it becomes unpredictable and beyond our physical calculations since it is also endless. The unpredictable results become an art form that we could not have foreseen.

The Elimination of “Zombie Art” through the Unknown:

However, it is mentioned that there is public perception that GAN generated artwork is also considered “zombie art”. It is said that there is a reliance on deep neural networks to produce neverending variations based on one sample of information fed into the system, but this system of construction is not meaningful. Even though it can seem mesmerising at first, it can eventually become monotonous after a while because viewers will start to feel overwhelmed by the “sublime of algorithmic productivity”. I agree with this standpoint because we have such short attention span. When something is too repetitive, we can “predict” what is generally going to happen next and end up not chasing the information further; since it is no longer an “unknown” that we are curious about. As people are usually lazy and will not want to do meaningless things which is why we leave it to the machines instead. However, if the growth is something that is unpredictable, it will not be meaningless and instead be intriguing. However, we are then left in puzzlement with regards to how to make something precise (since most digital artworks with auto-generation relies on pre-calculated equations) and yet not monotone.

What is the Fine Line for Humanity?:

I think that it is also interesting that the authors of this text explored what it meant to be at unease due to uncanniness; they defined it as the state where the fine line is just crossed between what is living and what is machine. When something does not resemble human to a large extreme, it is easy to regard it as fake and objective, but when something lies in between, we start to become confused about the identity and origin of the object and become uncertain about how we should classify the subject. It is familiar, yet unfamiliar and expected, yet unexpected. In the text, the Uncanny Valley is also mentioned, where “increasing human likeness increases feelings of familiarity up to a point, before suddenly decreasing”. As a robot’s similarity to human form increases, it is proportional to the unsettling feeling we will feel until the similarity becomes so much it is determined to be fake.

What Is the Uncanny Valley? - IEEE Spectrum

The Uncanny Valley

This makes me ponder about the threshold of human consciousness and comfort. It feels like we seek comfort from things that looks “average” or “just right” and anything too extreme on either ends of the spectrum is deemed unacceptable to our comfort zone. Is this possibly also why people are uncomfortable staring at physically handicapped people or people with eating disorders for a long period of time; because they fall outside the threshold of “normal” and what is “expected”? Can we then conclude that in generative art, things become art when they fall outside the threshold of what our expectations are? Does this mean that since different people have different expectations as we are all individuals, our perception of what is considered generative art is then altered according to that logic?

In the end, is Generative Art a matter of perception, and could it be calculated yet intriguing (not monotonous)?


Closed systems: Generative Art and Software Abstraction by Marius Watz | Reflection Essay



Closed systems: Generative Art and Software Abstraction

by Marius Watz

While generative art is usually associated with pixels, it is not a compulsory criterion. It is also not necessary to be interactive, even though it is commonly open sourced. The most important factor of Generative art is its unpredictability, and its system of “growing” from given information.

Watz states that “Forms produced by generative systems often take on a complex nature, exploiting principles of emergence to produce structures that could not be made by human hands.” I agree with this statement; to me, the beauty of generative art is how precise, random and unpredictable it can be, and this is usually associated with numbers. This is very different from creating something from scratch, such as with clay or paintings. There is a lot more calculation and precision work involved. Then again, it should not be misunderstood that generative art can only come in the form of digital work.

Watz also mentions that it is difficult to simulate organic behaviour through computation, yet at the same time it helps in the virtual simulation due to the computer’s ability to generate and replicate the same sequence of code over and over again in an array without manual input. In this sense I think this is interesting because while it sounds like generative art is a double-edged sword with irony to top it off; it can be so precise but unnatural if you are not precise enough.

To add on, without the existence of computation, people would not even be open to the idea of generative art, as it is too tedious to execute while incorporating subtle changes to signify the growth of the art piece.

A common conception brought up is how the birth of generative art signifies the death of interactive art, as it in a way dampens the experience of open sourced art because the art can generate by itself when it is computational.

However, I feel that this conception is a misunderstanding because generative art is not necessarily digital, and even if it is digital it can also be open sourced. There are just many different types of generative art that is not limited to automated digitalization.

Ultimately generative art, while being heavily linked to software and digitalization, it is not about what the computer can do. Generative art is more about how real-time and self-contained art is still a form of art even if it is digital. Digitalization does not represent a loss in art; it is an addition to the scope and variety of how art can be portrayed. We should ultimately not see art done with software as an evil but as a different art form.

Generative Art Example: Smoke Water Fire 2016


Smoke Water Fire (2016)

by Mark J. Stock

Smoke Water Fire is a digital video that represents a virtual simulation of fluid flow. This piece can also be viewed in VR. It is rendered in 360-3D format, and rendered using Radiance,  synthetic lighting simulation software. This artwork highlights the dynamics of fluid flow and its universality. With no name plastered on the visual simulation and its changes, it gives us freedom to decide how we perceive fluid flow in this virtual simulation. The conventional perception is stripped, and we are given the autonomy to understand how fluidity actually works- through dynamic, ever-changing flow.

This artwork is interesting to me because it plays around with the perception of depth, as well as generative and degenerative elements in its digital simulation. It is a generative piece because we cannot really predict where the next change of motion of the “fluid” will take place at. Simply by subtracting or adding elements to its code, a fairly accurate depiction of fluid flow can be created and I think this is pretty cool. Just because we are dealing with numbers and code does not mean that we cannot create an actual visual representation of something very real and natural to us. Additionally, I think that it is interesting that that is an irony that an accurate depiction of something so natural is done using something so calculated (albeit random).

I feel that it relates to my own creative interests because I am someone who likes to deal with surprises and unpredictability when it comes to creation. I also like telling stories. I know they contradict each other because stories usually follow a linear storyline whereas unpredictability does not exactly fall into that line of thought. However, having an unpredictable motion that gels a whole story together in the most unexpected but pleasant way is something I like to work with, which I also feel is present in this work. In a way, this art work can be depicted as the story of fluid; where it tells us the journey of how a fluid develops and moves through its existence.


Final Project Summary: Anemone//Empowered



The Anemone Flower symbolizes protection against evil and ill wishes. The approach of a rain storm when the petals close up. Forsaken or forgotten love and affection. Anticipation and excitement for something in the future.


“Empowering women who have suffered abuse, proving that they are strong because they survived, and they are still alive.”

EMPOWERED; empowering the abused, the scarred and the ones in pain. Telling them that it is okay to be scarred, for their wounds are beautiful; those are the proof of survival, their maturity, and their growth. To tell them that they do not need to hide in shame, for they have been brave for fighting back and living to tell the tale. Blood running through them, every step they take; “You have not killed me, for blood still courses through me like a never ending river,” “For I am still alive.”

Description & Functions:

Anemone is a full white bodysuit with flowers made out of organza adorning areas of the bodies where injuries are at as though flowers are growing out of their wounds, symbolizing growth and recovery.

The original idea comprises an red LED “Blood Vessel” that would be ignited through the whole body with every step of empowerment the wearer takes.

At the same time, the shawl draped on the right shoulder will move up as though acting like a defensive armor with every step taken as well, proving that these scarred women are warriors.


White Shoulder Armor Drape: Heated & Manipulated White Organza (Warrior)

White Lycra Bodysuit (Slightly Shiny) (Skin)

White Organza + Synthetic Fabric Flowers (Beauty)

Barefooted exhibition (Earth)

White face paint like a war mask (Fight)



One-sided shoulder drape which moves up and down via one Servo Motor (Armor)

LED Strip (3m) entwined around whole body, light flashes when wearer takes a step. (Veins)

(To be triggered by switch button if needed)


Initial Sketch:


Spektre — Sam Creeger

Spektre by Sam Creeger



Creating the Servo Motor Arm:


I made use of the same backbone I used for Morrie last semester; I used an electric plastic called MONTERA from IKEA and taped it to the wing of my servo motor.


I used an old hairband I had since years ago, and glue-gunned my flowers onto the band. I would have added more if I had more flowers! I silver-taped the hairband afterwards.

Circuits and Switches and Hell:

I initially used a 4-legged switch, but eventually used a multi-core wire attached to a bigger switch so that my user will have an easy time clicking the switch.

Creating Organza Flowers:


Step 1: Cut the organza fabric from old curtains in 10x10cm.


Step 3: Fold them and sew the tip together.

Sewing the flowers together!:

Heating up Organza as Experimentation:

These are just normal organza fabrics, but after heating them up with a calligraphic heat gun it becomes wrinkly and very durable and my sister hated it. It was a very fun experiment.

Piecing everything together!:



What went wrong:

MY SERVO MOTOR BROKE (You can actually see it not moving anymore in my trailer process video T.T)

I ran out of organza fabric of an off-white colour so I couldn’t add more flowers because covid-19.

My mom’s ancient sewing machine’s needle broke and there was no spare needle so I had to hand sew everything halfway through….

Overall I could have done better. 🙁


Final Product:



Future Aspiration for the Fashion Show:

As the supposed Artistic Director along with Fizah, I really wanted to make the Fashion Runway a bomb if not for the covid-19… But I hope that my experience with stageworks and coordination given my past roles in CAC will help me to make all the show works more entertaining, unique and out of the world compared to the past shows in the previous semesters. TO BE VERY HONEST I’m quite sad about not being able to do the green screen show Jake mentioned, but I hope that we will be able to pull off both an online IGTV experience and an offline runway in the future. I think overall experimenting with a new way of presenting a fashion show is what I want to be able to explore with the class! I think I will be more involved with the planning and arranging part of things (aka admin) because I’m more well-versed with that.

I just majorly hope I don’t screw up anything. Oops. Ultimately everyone should have fun and enjoy the experience alongside their proud works heheh. If I could help make a fashion show like that possible, I would be satisfied.

Final Presentation: Smart Friend: Ava


View Final Slides Here.


Your Personal Heartcare Companion

Smart Friend: AVA is an ironic commentary about how the friends you beg answers from for your psychological issues do not necessarily have all the answers.

Do you really need those answers, or did you only want to vent?


FYP Proposal Pitch (Presentation)



<Pandemic> is a Virtual Reality Interactive Storytelling project utilizing the Oculus Rift VR Headset. It seeks to tell a story through VR environment, depicting the projected landscape of a post-pandemic world that has gone too far off into the deep end. This VR environment will be designed via Adobe photoshop and Adobe Illustrator and will be rendered in Unreal Engine 4.

<Pandemic> will utilize a Grayscale style of storytelling with charcoal/ brush stroke art style. It will be done in a graphic novel setting, where characters will fidget in their stations, their communication depicted through comic-styled speech bubbles that will not disappear. The player can interact with certain objects to unlock different scenes of the story and can travel around the area to find out more about a pandemic-ridden world. The world will be featured in Singapore, where various locations of Singapore will be depicted at their pandemic-ridden states. E.g. Marina Bay Sands, where tourists usually frequent, and Sentosa, where it has amusement parks and hotels that are usually filled with people.