Project 1 Final Iteration | Once Upon A Huh?

Standard

Once Upon A Huh?

A Generative Fairy Tale Parody

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

For presentation:

https://focused-archimedes-c3d8a0.netlify.app/

(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 https://app.netlify.com/drop 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.

 

Comments:

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?

Standard

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?

Standard

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">
<head>
<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>
</head>
<body class="once-upon-a-huh">
<main>
<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"/>
</div>
</div>
</div>
</div>
</section>
<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>
<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"/>
</div>
</div>
</div>
</section>
<section class="options-1 hide">
<div class="container">
<div class="row">
<div class="col-2">
<div class="spinner-grow" role="status"></div>
</div>
<div class="col-10">
<p>
<!-- <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>
</p>
</div>
<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"/>
</div>
</div>
</div>
</section>
<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>
<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"/>
</div>
</div>
</div>
</section>
</main>
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 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>
</body>
</html>

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?

Standard

Once Upon A Huh?

Chosen Medium:

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

 

Concept:

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.

Idea:

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),

 

Example:

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

https://ddlc.moe/

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

https://somewhere-else.tusitalabooks.com/

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

Standard

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)?