(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?
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/
Your choices don’t matter; they will give you an unexpected surprise anyway.
Somewhere Else, Another You
https://somewhere-else.tusitalabooks.com/
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.
Interaction Design: DM2008 Programming for Interaction
Mid-term Project: Interaction through Processing
Project Title: Strobe Lane (Music Visualization via LED)
Description: A Music Visualization Program via LED Lights which can react to any music that is input into its database to obtain a mesmerizing and aesthetic effect.
How it works: First, I connected the circuit by using 3 LED lights and 1k Ohm Resistors to link the circuit to its breadboard. Then, I uploaded the StandardFirmata code onto the circuit via Arduino. Moving forward, I made use of the BeatWrite Software and adjusted some of the numbers and placed my music inside Processing, and ran the program with an Arduino-Processing Library and a Minim Library.
Moving forward: I will be attempting to attach more LEDs to the circuit while exploring more precise ranges for frequencies so that the light movement will be smoother.
Final Version:
What things created problems or challenges that needed to be solved:
The initial plan was to have a Music Visualizer via Processing only, but my computer was not compatible with sample codes from online because of (I suspect) microphone detection issues. On top of that, I was not familiar with using p5.js even with reference from the Coding Train. It was too high a hurdle for me at the moment. Hence, I decided to revert to a music visualizer via LED lights utilizing an Arduino instead, while having some visuals on the screen that could be detected based on the song input in its code.
For issues that were solved, explain how you solved them:
One of the problems I faced was that instead of the frequency, the lights were changing based on the tempo of the music instead, which created a very limited field to work with. As a result, instead of using beat.iskick, beat.issnare, and beat.ishat which are essentially the codes needed for music tempo to be detected, Corey guided me to use beat.isrange instead, which helped me to resolve the issue and allowed me to explore a whole different range of frequencies that could make the lights move more fluidly.
For issues that were not solved, you can talk about:
How you think the issues may be solved in the future:It was a downer that I couldn’t make use of a graphic sort of music visualizer, partially due to time constraint. However, exploration of p5.js would probably help me to solve the issue.
How you worked around the issue: I worked around the issue but making use of an Arduino setup instead of solely Processing.
What you tried fixing for the issue, modifying the strategy, etc.: I also made use of a visual that could react to the music in its setup rather than trying to use microphone detection for the lights to react to the music.
What you would do with the project if you had more time to develop it (if you wished to):
If I had more time to develop the project, I would try to modify the project by allowing the LED lights to dance along with a graphic visual instead of simply text.
What would you change about the project idea, now that you have spent time working on it:
Whatever I stated above. Also ideally, it could be the music visualizer that refused to work on my computer.
Source Code*:
*Requirements for code to be run:
Arduino circuit has to be connected.
StandardFirmata has to be uploaded into Arduino.
Song has to be loaded into Processing Code.
Minim Library has to be uploaded into Processing Code.
int ledPin1 = 12; // LED connected to digital pin 12 int ledPin2 = 10; // LED connected to digital pin 10 int ledPin3 = 8; // LED connected to digital pin 8 int ledPin4 = 6; // LED connected to digital pin 6 int ledPin5 = 4; // LED connected to digital pin 4 int ledPin6 = 2; // LED connected to digital pin 2
float dropSize, theSize, beatSize;
void setup() { size(512, 200, P3D);
minim = new Minim(this); arduino = new Arduino(this, Arduino.list()[2], 57600);
song = minim.loadFile(“song.mp3.mp3”, 2048); song.play();
beat = new BeatDetect(song.bufferSize(), song.sampleRate()); // set the sensitivity to 300 milliseconds // After a beat has been detected, the algorithm will wait for 300 milliseconds // before allowing another beat to be reported. You can use this to dampen the // algorithm if it is giving too many false-positives. The default value is 10, // which is essentially no damping. If you try to set the sensitivity to a negative value, // an error will be reported and it will be set to 10 instead. beat.setSensitivity(10); //100 dropSize = theSize = beatSize = 100; // make a new beat listener, so that we won’t miss any buffers for the analysis bl = new BeatListener(beat, song); textFont(createFont(“Times New Roman”, 100)); textAlign(CENTER);
void draw() { background(0); fill(255); // if(beat.isKick()) { if(beat.isRange(0, 3, 4)) { arduino.digitalWrite(ledPin1, Arduino.HIGH); // set the LED on dropSize = 200; } if(beat.isRange(3, 6, 4)) { arduino.digitalWrite(ledPin2, Arduino.HIGH); // set the LED on dropSize = 200; } //if(beat.isSnare()) { if(beat.isRange(6, 10, 4)) { arduino.digitalWrite(ledPin3, Arduino.HIGH); // set the LED on theSize = 200; } //if(beat.isHat()) { if(beat.isRange(10, 15, 4)) { arduino.digitalWrite(ledPin4, Arduino.HIGH); // set the LED on beatSize = 200; } if(beat.isRange(15, 21, 4)) { arduino.digitalWrite(ledPin5, Arduino.HIGH); // set the LED on dropSize = 200; } if(beat.isRange(21, 26, 4)) { arduino.digitalWrite(ledPin6, Arduino.HIGH); // set the LED on dropSize = 200;
} arduino.digitalWrite(ledPin1, Arduino.LOW); // set the LED off arduino.digitalWrite(ledPin2, Arduino.LOW); // set the LED off arduino.digitalWrite(ledPin3, Arduino.LOW); // set the LED off arduino.digitalWrite(ledPin4, Arduino.LOW); // set the LED off arduino.digitalWrite(ledPin5, Arduino.LOW); // set the LED off arduino.digitalWrite(ledPin6, Arduino.LOW); // set the LED off textSize(dropSize); text(“DROP”, width/4, height/2); textSize (dropSize); text (“DROP”, width/2, height/0.5); textSize(theSize); text(“THE”, width/2, height/2); textSize(theSize); text(“BEAT”, 3*width/4, height/2); dropSize = constrain(dropSize * 0.95, 100, 200); // 0.95, 16, 32 theSize = constrain(theSize * 0.95, 100, 200); beatSize = constrain(beatSize * 0.95, 100, 200); }
void stop() { // always close Minim audio classes when you are finished with them song.close(); // always stop Minim before exiting minim.stop(); // this closes the sketch super.stop(); }
History of design; a study of design based on its aesthetic qualities during different time periods. I believe that design started from way back in history, the moment people started creating items because only with a mindset about how things would and could turn out, would subjects be formed. With no definite time period indicating where someone out there started creating things- even God- we cannot determine when history of design begun.
This Zine Project has been a huge roller coaster for myself. I went through so much pain and torture because I chose a difficult location as my subject; St. John’s Island. Do not get me wrong, I adore the place to the moon and back, but it was just too special. I could identify a lot of things with St. John’s Island and it was just so magical the two times I went there, but to pinpoint something and make it into an abstract was considerable hard work for me. I spent weeks thinking and pondering about what I wanted to focus on, running different ideas through my brain.
AT THE BEGINNING:
When the Zine Locale brief was given, I couldn’t really think of a striking place in Singapore that interested me. I decided to explore my options off the coast of the Mainland and my options quickly arrived on the Southern Islands. I chose St. John’s Island because I knew it was just that unique. It was so different from all the other places I have been to in Singapore, and despite the high ferry cost, it was an island gem few visited. It was for adventurers, and for people who wanted to get away from the bustling city life.
The few things I identified at first were:
There were a lot of cats. 3 colonies of over 30 cats was really nothing I’ve ever seen on Mainland Singapore.
It was just like a Maldives. A mini one. The clear waters, beautifully coloured seas, clean rocks and soft sand simply said it all. There are even mangroves and heritage trees. An island of magic, definitely.
There is a Kampung on an island! Not one with farms and cows and chickens, but one where you fish for a daily meal. That was rare. Especially in concrete jungle Singapore.
There are abandoned houses around the island. Pretty eerie but cool.
Formal penal settlement, drug-rehabilitation centre, quarantine island for people coming from Mecca, mass execution grounds during WW2, Marine Research laboratory, former detention centre for illegal immigrants. Really, its history was the most striking element on the island. The island is rumoured to be haunted as well.
Holiday camp! There are so much activities that can be done on the island but with no security guard supervision. That means that if you die, you die.
It’s rich biodiversity of marine life.
There were too many things. Seriously.
At first, the direction of my project was at a totally different from my final one. I was dead stubborn about focusing my project on its history simply because it was so rich, and there was no place in Singapore with so many events occurring so crazily. However, I was rejected (crai) and decided to focus on its scenic instead. I made surveys with people I knew to ask them about what they thought about the island (https://docs.google.com/forms/d/11iX6LJYCWFe6jqpMG6GyMtnZMCnnFx2b5dPf1AFxwg8/edit), and recorded interviews with strangers on the island (https://www.youtube.com/watch?v=sISCwhbE54k). I took many photos, without an actual idea about the direction I was going into.
St. John’s Island | A Scenic Snapshot
St. John’s Island | A Scenic Snapshot 2.0
St. John’s Island | Cats
Soon, I decided that I should stop being so narrow-minded just because I adored history, and instead go for something more light-hearted.
Below is my ZINE I presentation:
ZINE I | Slides
AND THEN I BEGAN THE TOUGHER PART:
Now, I had to determine what was the one quality of the place I wanted to focus on. It had to be special and found in no other part of Singapore. The construction of ZINE II had to be abstract as well. I was stuck stiff for sure.
I ran through different inspirations and decided hey, why not let us go with the idea of how different St. John’s Island is from Mainland Singapore. I determined earlier that SJI was just like a Jack (or John?) of all trades; it had a little of everything special and was so good at its job. I read through the comments given by my friends and then chose to work on a storyline of two children who lived on Mainland Singapore and SJI respectively, who exchanged letters and scrapbooks and photos about their way of life in the two different places.
However, I hit a wall; I could not reconcile the two ideas properly because it may dangerously fall into the territory of talking about SJI in just about half of the Zine. Hence, I decided to make it like a scrapbook combining both children’s experiences together, utilizing photos from the island (a requirement).
Spread 1
Spread 2
However… it was turned down because it was not abstract enough. Sigh.
So I wrecked my brain and did a few mental backflips, staring at the list and rough idea sketch I made previously:
City vs St. John’s Island
Smell, touch, feeling, sight, sound.
NOISE + WORK AND STUDIES: Background: Smoke
Pollution
Angry
Blurry
Smoke
Dirt
Tire marks
Garbage
Life
Bright
Lights
Fatigue
Rough
Smelly
Stuffy
Sand
Books
Paperwork (In stacks)
Suffocation
Heavy
Dried out
Barren
Peace: Background: CLEAN CLOUDS
Quiet
Fresh Air
Clear Waters
Water
Grass
Sand
Fresh
Clear Rocks
Crystal (Clear)
Nature, Forestry
Soft, Cushy, fluffy
Lost in own world
Cosy
Breeze
Flowers
Pillows, clouds
Abundance of nature
Technology: Background: Road
Fast-paced
High-tech transport
Road markings
Train tracks
Tire Markings
Sharp, fiery
Fast
Hot
Wheels
Beeping
Hard to catch up
Kampung Life: Background: Sea
Slow-paced
Traditional transport
Cat fur (furry, fluffy, cosy mass)
Nature, plants
Breeze
Time stopped?
Melty (because relaxed)
Instant: Background: Marble Counter
Salads
Fast Food
Restaurants
Food Wrappers
7-11
Convenience Food
Fangs (sharp to the health)
Sizzling Plan
Dessert Tower
Chocolate dip, sweets, desserts
Natural and Slow: Background: Wooden Counter
Fishing
Seafood
Steamer
Fish
Fishing Rod
Plants (Healthy Food)
Leafy
Wooden Table and utensils
Cooking ingredients
Then, I decided that I talking about how I felt about the island. In other words, my 5 senses. Through my previous consultations, I was also told to explore mark-making. I also then realized that the reason why I had so much difficulty figuring out what I wanted to focus on was because my experience at the island was not one I could justify with both text and images. I decided to reconcile all these points and create a Zine about how a person would feel if they were at the island; how they smelled, touched, heard, saw and tasted the island. What if you lost all your 5 senses? How would you describe these feelings you had at the island?
Here are my inspirations:
LUC SZIVO: Zine cover An A4 publication about street and abstract landscapes through photography, illustration and mark making
(SQNCS) zine abstract black art texture collage ink dark design artwork paint
hiveminer.com
hiveminer.com
Here are my draft 1s:
The feedback that I got was that it was too literal (the text) so I should remove the words and replace it with words that followed the flow of how I wanted the audience to focus on my work. I also got feedback that my panel on “smell” did not really convey my idea. I also needed to put in more technical ideas. Hence, I had to rework my ideas.
Here is my final piece:
ANALYSIS:
The colour palette I have chosen is Black and White, because I decided that if someone had lost his or her senses, colours would not matter anymore. It was the sensations they felt which becomes most sensitive for them. I chose to create images spread into two pages, because I was talking about the environment of St. John’s Island; it would seem inappropriate to limit the space on an island where I could feel free and seemingly void of tension.
For the first and last page, I chose to use the SJI words on the island itself. Then, I inverted the sight of the city I caught from the island, to show that I was going to talk about the island from top to bottom.
Smell and Taste:
For me, SJI smelled and tasted very raw to me because of its untamed nature and freshness. However, it was also very smooth because of its lack of tension and interruptions (like pollution) in the air and combined together, they were very cohesive. Hence, you can see a dark and light tone contrast, which symbolize how the raw and smooth qualities have bonded into the grey tints in the image. I attempted to use the golden ratio to create an image that is comfortable to the eye. The spirals on the right page symbolizes the calming, controlled smell on the island; light yet different altogether. The sharper angles on the left page symbolized more of the musky yet sharp air I tasted on the island. The emphasis is placed on the right page (where the smell is), hence the weight of the image is on the right. This is because the smell of the island is the first thing I experienced upon stepping on shore, and remained one of the most significant throughout my stay. The image I used to create this pattern is that of one of the pathways by the sea, which I felt reconciled the rocks, the sea, the trees and the sky. It was the one place that had all these main elements I favoured from the island. The image I used is as shown below:
St. John’s Island | Pathway between the seas
Sight and Sound:
For sight and sound, the things you hear and see are usually just a pile of mess; either the vast seas, the abundant trees and grass, many rocks, etc. There is always a lot of everything, and all these elements when combined together gives us one impression of the island. However, when you take all these qualities apart and analyse them one by one, you are able to determine the magic from each one mark. I used layering of many trees to create this effect. On the left page, it seems that everything is layered quite intense and the tree branches help to establish that there is a lot of noise present. Then, slowly proceeding to the right page, the negative space increases and the branches clashes less now. There is more space to breathe. The total image create a sort of gradient from dark to light to establish how the dark sides are the noise and abundance of all the sounds and sights we see but as we take the elements we see and hear apart and focus on one thing, they become clear as day; very defined, and well-received. The texture is also rough, to represent how each sound and each thing we see has its own personality and detail about it.
Touch:
The feeling of touch I got from St. John’s Island was mixed. It was scrunchy because of the sand and grass and leaves. Rough, yet sort of easy to grab onto. That was main part I experienced on the island since I never went into the water. Hence, it is the focal point of my image on this spread, and it had the greatest opacity and noise. At the sides, the colours are much lighter, like in light grey and white. These textures are smoother as well, which represented the skies and waters; how they are clear and easy-flowing. The opacity is less, because they are lighter, and are sort of floating in the background compared to where I was standing on the grass and concrete path. It is downward sloping serving as a function to help the eyes flow better. In this picture, the gradient is almost non-existent because I wanted to show how the touch between different elements are very different and defined at the same time.
Overall this project was a long, tedious yet life-changing one for me because I was able to break out of my stubborn shell to explore so many different options for one of the first times. I was forced out of my comfort zone to take on new ideas I was not sure would work and could experience myself jumping up in the middle of the night at the thought of new ideas that could potentially work.
For our Art of Destruction project, our group decided to go with video as our art medium. We decided to put together different definitions of glitch to create a whole glitched video. First, we took random videos filming weird and every day scenes. Then, we edited the videos we took to make it unnatural; speeding up, slowing down, adding filters, etc. These were the first 2 glitches; one because it does not make sense, and two because it was not natural. Yet, a sense of continuity and a small curiosity about what random scene would come next was still retained. The final glitch occurs because as three people in a team, we have different editing styles and ideas with regards to how to glitch our videos and what scenes to take for our video. Hence, the lack of cohesiveness, the disturbances to the natural sequence of our videos and the randomness of the scenes which discourages understanding creates a destructive art piece; one that is illogical yet still a complete whole in the end. It is imperfect, but we recognize this imperfection and flawed art piece as a proper composition.
