Author: Jiannan Shi

This is a special podcast among the podcast that I have listened to. The construction of the podcast is unique because there isn’t a host telling stories in the third voice, but weaves the stories with interviews, phone calls, and realistic field recordings (possibly) to build the scenes and plots as what a novel or a film would do.

In terms of the sound effect, the ambient sound constructed the entire acoustic environment, which makes every scene so realistic that I was totally immersed in it. The transitions are naturally following the ongoing progress of the plot. For example, I was impressed that at 7:45, following the interviewer’s question “Do you want to tell me what happened?” comes to a “sheew” voice with “doo-doo” phone call sound, which brought me to a flashback. After the phone call, the audio turned back to the conversation of explaining what had happened. This is a really effective moment that I captured in the podcast. I realized that the audio storytelling doesn’t have to be a third-voice host telling the audience so and so; it can be a combination of several scenes as what literary works could do.

Meanwhile, the characteristic as an audio podcast also stands out that some signal music is essential in structuring the podcast. Both at the beginning and the end there’s a contingent solemn and stirring piano sound, and it notifies the audience where the beginning and the end lies.

This is an amazing podcast, and refreshes my understanding of audio storytelling!

Title: Let’s Help Sima Guang!

Link: http://imanas.shanghai.nyu.edu/~js9686/Interactive-Comics/index.html

Process:

In the beginning, Val and I were too ambitious about what we could do, and we have even imagined how easy the code could be when we were designing the storyboard. However, when it comes to the actual coding part, I was shocked that I’d encounter so many problems.

Inspired from traditional Chinese story Sima Guang Smashes the Vat, I propose that it is a good idea to make that linear story into an interactive one. The audience may choose different options at different scenarios, and each choice will lead to different destination of the comics. This is the storyboard that we designed for our project:

After discussion, we want to include the interactive elements in the following way:

1. scroll the window to progress the plot;
2. click the button to make choices;
3. drag the stone to smash the vat;
4. a short animation about the vat that is being smashed.

Our expectations on the assets:

1. utilizing the theories learned in Understanding Comics to exaggerate emotions, and to prolong time span when necessary;
2. modify the existing comics, drag elements that we need to plot them in a new way;
3. draw scenes that we deem are necessary.

Then, I started arranging the first several scenes including coding and drawing assets.

I exploited and modified some of the images to my purpose of describing things. Examples are as followed:

to

+

into 

 into

Problems and solution:

1. syntax errors
2. The confirm alert pops up before the opacity of the image turns to 1. I realized that the reason why it happens is that I only calculated how much pixels I need to trigger the confirm, but I ignored the fact that the size of the window may change, and pixels varies from size to size. To solve this, I changed the pixel numbers into the difference value with regards to the HTML element height and width.

How did I get the element value?

With the help from Leon, Miki, and Dave, I used the syntax getBoundingClientRect(); to get all the data shown in the rectangular of the element.

Takeaway:

1. When checking bugs, punctuations are equally important as the overall logic of the code.
2. When trying to utilize pixel values to do things, always consider that people may have different computers, browsers, window size, and amplification rate of the screen.

References used in this project:

1. source of the original linear comics. https://ac.qq.com/ComicView/index/id/533807/cid/4?fromPrev=1
2. change the opacity while scrolling the page. http://ima.nyu.sh/documentation/2018/10/13/week-6-interactive-web-comics-sylvia-lee-chen/
3. detect whether the scroll position is at the bottom of the page or not. https://techstacker.com/posts/gGyGTHysrPuuJnNBk/vanilla-javascript-detect-when-user-scrolled-to-the-bottom
4. drag the stone and drop it onto the vat. https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
5. how to add button on top of an image. https://www.w3schools.com/howto/howto_css_button_on_image.asp

working link

http://imanas.shanghai.nyu.edu/~js9686/Interactive-Comics/index.html 

URL: http://imanas.shanghai.nyu.edu/~js9686/w04-exercise-JS-Conditionals/index.html

Date: March 7 2019

Description:

Two problems aroused here:

if (clicking == 1){      ************** } else if (clicking == 2){      ************** } else if (clicking == 3) {      ************** }else{      clicking = 0; }

a. I innitially used clicking = 1/2/3, but it failed: single = is for assigning, and double == is for comparing.

b. I changed the = into ==, but the number, according to consolog, goes “1, 2, 3, 4,  1, 2, 3, 4.” There is an extra “4.” I the realised that I shouldn’t use “else” at the last section because once it run into “else,” the clicking number has already reached “4.”