The podcast, Serial employs specific use of sounds and music to draw the listener into the story. At the very beginning of the podcast, the intro music for the podcast is somewhat suspenseful and mysterious in nature, setting the stage for the frustrating feeling the listener can feel throughout the podcast due to never really knowing the answer to who killed Hae Min Lee. The recorder call from the prison in the intro further cements the seriousness of the story, with Adnan serving time for the murder he says he did not commit. The music that is played in the intro is also played repeatedly throughout the podcast in the background, particularly when the reporter is narrating the facts of what happened to Hae, or when she is narrating some dramatic/suspenseful section.
The other audio aspect that stood out to me was the audio of past recordings from police interviews, court proceedings, etc. These audio pieces are powerful because they bring you back to the time and place of the initial investigation (which happened many years before the podcast was created). This make the whole mystery seem more current and relevant to the listener, which I think helps to hold your interest and creates further interest in the updates on the case. This is very relevant, as since the podcasts release, Adnan has taken multiple actions to try to get a new trial, and was eventually successful.
In his TED talk, Kirby Ferguson discusses the contradiction between current copyright/patent law and the reality of how all creative projects/outcomes are based on previous, existing work. While many companies such as apple, have patents on certain technological features (for example swipe to open, multi-touch features), these concepts were certainly not invented by these companies, so to claim complete creative control on these things seems wrong.
“Good artists copy, great artists steal.” While the concept of copying or stealing other artists work is on some level dishonorable and unfair, it can not be denied that this approach helps drive the advancement of creativity and useful products. The question in my mind, is what is the best way to regulate this is a way that creativity and progress are not inhibited, but at the same time people and/or companies are being fairly recognized for their own work. This is a difficult question, and is the main cause for the contradiction between copyright rules and creative advancement.
For our comic project, we decided to have an interactive story where the user navigates as the main character through a new, unfamiliar environment. The story is a metaphor for feeling misunderstood, and this misunderstanding plays out in the main character’s interactions with others where other people do not understand the main character. The concept is that although it may be difficult, the more the character interacts with people and the world around him, the more understanding is gained. Throughout the comic, the user will make decisions about whether or not to interact with others. Depending on the decisions, there will be a couple of different outcomes. The more the user interacts with others, the more colorful and realistic the world becomes, while the less they interact, the more black and white and comic-y the world stays.
Process:
Our process started by conceptualizing our comic idea and how we would convey the metaphor in a doable way. We then worked with photoshop to manipulate some images until we found a “filter” that we liked to stylize the comic photos. Once this was decided, we began coding our general page layout, which consists of a scroll function with the page split into 5 sections with a full-screen image identifying each section. We then proceeded to work on using js to add other interactive elements to our comic, html to input content, and css to style it all.
The project works by starting off on an “about” page, which gives a context for the metaphor of the comic. It then uses js to have a button link to the index.html page, which is our main story start page. This page is black and white and in our “cartoon” style. As you scroll through the first 4 sections of the index.html page, you read changing narration text at the top of the screen. This narration text contextualizes the new environment, and leads up to the 5th section of the html page, which involves your first possible interaction with another character. On this last section, the narration prompts you to either ask for directional help from a man, or continue trying to find the way on your own. If you click “start a conversation” button, a conversation div appears which starts off with a greeting from the stranger when you click a button, and then allows you (the user/main character) to respond by typing into a text box and clicking continue. To signify mis-understanding, we coded the “result” text from the user-typed input to show “gibberish” text. After a 1 second delay, the response from the other character comes back exclaiming their inability to understand. You try to say something again, but get the same confused response to your gibberish. After the second response, the user is prompted to click the button again to move on to work and end the interaction, taking you to the “page3” html page. Alternatively, if you click “continue wandering,” the button links to a new html page, “page2,” which continues the story at the character’s first day of work.
On the “page3” html page after your first interaction on the index.html page, the user starts the main character’s first day at work. The user will notice that the comic images are now more realistic and slightly less black and white than before, due to the decision on the index page to interact with the man. At the second section of the “page3,” the user is again given a choice whether or not to interact with their coworkers. choosing to interact by clicking “Ask for Advice” makes the next section more colorful, and allows you to interact by chatting in a similar way to before, however this time after two confused interactions of gibberish, the character’s coworker understand them at the third interaction. In our code, we achieved this by using if, else if statements and only calling on our gibberish function for the first 2 interactions, before having the ‘result’ variable spit out “userInput” instead of gibberish to indicate that there was an understanding achieved. Alternatively, clicking on “Try to solve on your own” on this page makes the next section more black and white and cartoon-y, indicating that you have decided not to interact. In the third section, the main character is invited to karaoke with his coworkers and can decide (again through the click of a button), whether or not to go. Clicking “Go home after work and end your day” button takes you to html page4 which tells the user that you didn’t interact enough and so are ending the day and can restart the comic. Clicking “Spend time with your coworkers” on the other hand, leads to the next section which is outside a karaoke bar, with the image being in nearly full color to indicate the user’s willingness to interact with others. On the fourth section, you can click “enter karaoke bar,” which changes the picture of that section to people signing inside a karaoke bar in full color. You are then prompted to scroll down to the 5th section, which is in full color and links you back to the about page to restart the comic.
Alternatively, if you choose not to interact on the index.html page, you are taken to page 2, which has the exact same storyline as page3, except you begin the page in black and white with the cartoon-y effect and the color and realism change is less drastic since you didn’t interact on the first page. The “ending” to this page is either the same “page4” if you click “go home…” on page 3, or it is the same karaoke scene if you decide to go to karaoke, however the world is in less color for this reality, since you didn’t interact as much as you could. have. In the same way, the fifth section (in less color than on page3) links you back to the about page to restart.
Difficulties:
The most difficult part of our project, in my opinion, was the code to create our interactive chat div. Aside from it just being challenging code with many concepts we haven’t learned in much detail, we also struggled to figure out how to integrate both gibberish and the actual userInput results into one conversation. Thanks to Harry’s and Konrad’s hard work (Thanks so much Konrad for your help!), we were able to get the basis of the chat code figured out. And with Cici’s suggestion, figured out that it would be best to in general call the spitOut function (the function that spit out gibberish) for our index.html page, since that was the page with all gibberish responses, and then we could just call “userInput” at the point where we wanted the other characters to understand the user. We used conditional if/else statements to specify this by saying that if a counter for the number of responses was less than a certain value, we called the gibberish spitOut function, and if it was greater than that number, we called the “userInput” value. This code ended up looking like this:
Post-mortem/Takeaways:
Our final project differs drastically from our initial concept of having a Pokemon comic. That being said, our goal was to make our comic fairly interaction-heavy, which I think we achieved. Not only do we have scrolling elements and button elements, but we also used javascript to create and interactive conversation div where the user can type in their responses to the other characters. We also used js to have buttons link to other pages, as well as have button clicks change img src and the visibility of divs. All of these aspects make our comic very interactive, and I think keep it engaging.
Conclusion:
Overall, I am very happy with how our comic turned out. We made it very interactive, and I think conveyed fairly well the metaphor of our comic. I learned a lot through this comic project, including many new javascript functions such how to set up a scrolling function, how to employ button functions have alter multiple things on a button click, how to use conditional statements with a counter for our chat div, and much more. I like the concept of an interactive comics, because it allowed us to create multiple endings to our story, as well as show throughout the story (through changes to realism of the photos and the colorfulness of them) the importance of mutual understanding through continued interactions, even if this is the difficult decision. If I was to continue working on this project, I would perhaps explore a different/continuing narrative tract to explore other, more interesting avenues of the story besides just a single day in the character’s life.
Photo-examples of comic:
About Page explaining the concept of the comicExample of the interactive conversation on page3An interaction option on page3.
Three alternative endings depending on choices made throughout the comic:
This ending appears if you don’t interact on the index.html page, but then do interact some on page2This ending appears if you decide to interact a majority of the time.This ending appears if you don’t interact much and decide to not interact with your coworkers after work.
Link to current webpage: imanas.shanghai.nyu.edu/~hm1704/NYU_Shanghai_Clothing_Drive/index.html
Update:
At this point, we have a mostly completed website and poster for our project. On the website, we included information on clothing donation centers in Shanghai with information on the centers, their address, hours, accepted items, and links to their website. We also have a page on Sustainability Information, including Garment Lifecycle, Ethical and Environmental Concerns, and What People Can Do. Our Information page shows our poster. Once the donation center is finalized, we will hang our poster around the school to advertise the end-of-the year drive. We are still working with Student Government to finalize the drive date and donation center details. If changes to these details are made later, our website and poster are easily updatable.
In their text, Gullingsrud and Perkins discuss the five attributes that define the cradle to cradle certification. The five attributes are, Material Health, Material Reutilisation, Water Stewardship, Renewable Energy and Carbon Management, and Social Fairness. I think these attributes are good measures for cradle to cradle sustainability, because they address multiple aspects of sustainability, including ethical material production/usage and sustainable resource usage. I found the Fashion Positive section particularly interesting, because it outlines how these 5 attributes can be employed by companies and designers to create positive methodological advancements for a cradle-to-cradle approach. The authors outline how sustainability should be a way to do “more good” instead of “less bad.” I appreciate this perspective, because even in my own life, I find the shear magnitude of the environmental impacts of the fashion industry to be somewhat overwhelming, and it can be difficult to know what areas to focus on. The author’s break-down of a cradle to cradle approach through positive design methods is an encouraging solution to an extremely large problem.
