Week 7: Response to Molotov Man – Sylvia Lee (Chen)

This article shows how easily a work can be appropriated and misinterpreted. Garnett was searching pictures online and making an art that copies the original to some extent, and even when he was exhibiting it in a museum, did not credit or ask for permission. Later he find out that the original photo has a different story from the another adaptation he saw. Meiselas herself mentions how his “practice of decontextualizing… is precisely the opposite of my own hopes as a photographer to contextualize an image”.  Such practice is very common right now, with the appropriation and spreading of those are made so easy with internet. This is clear when Garnett explains how there already was so many copies online beyond his knowledge and control. Although such haphazard spread of a creation without any credit is something that is not seen as legal by current copyright laws, the questions Garnett poses touches on the gray area of copyrights: how are owners of what, and how much?

Meiselas’ narration shows that although to what extent we want to control the copies and restrict the adaptations is not clear, letting it be decided on the way is not so effective. The decontextualization and misrepresentation of the original can evoke new ideas, but also harm the original meaning, and furthermore, harm the involved individuals.

Week 7: Response to Ecstasy of Influence – Sylvia Lee (Chen)

In this article, Lethem brings the never-ending question of how far is plagiarism and how much are we allowed. Although the answer to the question seems quite simple, the actual usage is not so. As Lethem questions, what if a reader does not get the allusion and thinks it’s the writer’s own words? Modern and contemporary art rely heavily on appropriation and adaptation, how you credit the original (or don’t) more unclear for cinematography and photography. Every time a new form of art emerges, adaptation of it is unclear, which means that before rules for using others’ creation is set, the works are carelessly taken and used. Even with established rules, the rules are always changing that “each time Mickey Mouse is about to fall into the public domain, the mouse’s copyright term is extended”.

His remark on copyright particularly interested me. He pointed out that copyright is “taken as a law”, both morally and inherently but this is not the case. Instead, “it is an ongoing social negotiation”. Just like much of any law we have now, it is an arbitrary criterion that people now have agreed upon, subject to change as our situations differ. Therefore, there is never something as crediting it ‘the right way’. However, framing the word as “usemonopoly” has its own problem that “copyright” does not have. While the word “copyright” calls in the action of copying under responsibility, “usemonopoly” blames the creator for owning his or her creation. The creator should not be the one held responsible for other people wanting to copy his or her creation. The fact that some creators, like himself, is willing to lend their creation for the beauty of second use does not mean that every creator has to be forced to be generous to adaptation of their work.

Although some might disagree to current system of copyrights, as Lethem stated, it is a norm that current society agreed upon. Just like Lethem, who criticized the system, has listed everything he borrowed from at the end of the article, until this system takes a new form we are subject to oblige by it.

Week 6: Audio Response – Sylvia Lee (Chen)

For Homecoming, until the later ten minutes, I did not get the storyline at all, which was very hard to concentrate. I agrees to Eli’s interview that not knowing the plot can make the listener curious but for an audio which does not have a visual distraction, such confusion can easily make the listener give up. Although after getting a sense of the storyline such structure makes sense, I still feel like there needs to be minimum visual distraction or an intriguing factor that makes the listener keep listening. The parts where the sounds are clearly from a restaurant, or use of phone call conversations were very suitable to this type of expression.

 

Week 6: Interactive Web Comics – Sylvia Lee (Chen)

http://imanas.shanghai.nyu.edu/~gl1593/Codes/

partner: Theresa Lin

original story: http://archive.ncsa.illinois.edu/prajlich/forster.html

1. Inspiration / Idea

We chose to change “The Machine Stops” by E.M. Forster which we read for this class. Not only we liked the story itself, but also the visual descriptions of the story were very vivid, which we thought was a good source for us to turn into a visual comic.

During the process of planning, we found that there are lots of audio descriptions too. There was also a separation between the machine world the characters live in and the natural world which is dealt in a distance through second-hand experience of Kuno’s narration or outside of the window.

2. Role division

For the drawings, my partner Theresa drew everything by a tablet  (Wonderful job!) and I helped with a little bit of Photoshop. But for the codes, we did not divide our roles that much.

3. Initial plan

We initially had a big plan, like every project does. We wanted to tell the story of Vashti’s decision to go visit Kuno, and her reaction to nature she shows in the airship. However, while working on part 1, which ends at Vashti facing the tunnel for the airship, we realized that working only on part 1 would take up most of the time we have. We were also planning to have a part where the reader drags the picture horizontally, while the panel containing the picture just stays. This was a bit above our ability, so we replaced it with a gif of stars.

4. Process

1) Positioning of each image

We first basically positioned the assets on to the web page, making sure to use only percentage or vw (view width) and vh (view height) to place or resize the images so that the images would look the same in any window size.

2) Fade-in

We wanted each panel to fade in when the reader scrolls down to that panel. So we got the scroll position

var width = document.documentElement.scrollLeft;
var height = document.documentElement.scrollTop;

At first, we calculated each panel by its pixel point in the page, so that the page would fade in the image when the reader reaches a certain pixel. However, we found out that the pixel position of each panel is different in different window sizes. So with the help of Konrad, we got the position of the each div (using offsetTop) and set the code to fade in when the reader scrolls to the start of the div. We also created an array that gets the id of each div and finds the position of the div:

// variables for fade in
var eachDiv = [“threeInRow”, “onChair”, …, “tunnelButton”, “tunnel”];

// fade in each panel
for (num = 0; num < eachDiv.length; num++) {
     var eachDivv = document.getElementById(eachDiv[num]);
     if (height > (eachDivv.offsetTop – 200)) {
            eachDivv.style.opacity = 1;
      } else {
            eachDivv.style.opacity = 0.1;
     }
}

Here, I learned that the variable name of the variable cannot call for an array such as eachDiv[num], because it does not take the array format as an variable. So we changed it to eachDivv instead.

For fading in, we also had transition in css to make it smoother:

#images > div {
    opacity: 0.1;
    transition: opacity 0.3s linear;
}

3) Turning lights off

In the story, Vashti turns the light of the room off by pressing the isolation button. We wanted to include the reader by letting them turn the light off. We made the image a button and gave it a function of changing the background color:

function LightsOff() {
    document.body.style.backgroundColor = “black”;
}

For the light to turn on again when her call with Kuno is over, we again used the scroll position. We have an else function for when the reader decides to scroll up, the part where Vashti is calling Kuno is again turned into black :

var lightsOn = document.getElementById(“callOver”);
if (height > (lightsOn.offsetTop + lightsOn.offsetHeight -200)) {
document.body.style.backgroundColor = “white”;
} else if ((height > isolate.offsetTop+200) && (height < (eyes.offsetTop – 400))) {
document.body.style.backgroundColor = “black”;
}

4) Image change

We also swapped some images by scroll position. The parts we changed is when Kuno’s face appears on the plate, when Vashti is opening her eyes and picking up the book of the Machine.

//swap holding plate
var holdingPlate = document.getElementById(“holdingPlate”);
if (height > (holdingPlate.offsetTop – 100)) {
    document.getElementById(“holdingPlate”).src=
    “images/comic_pt1_6_swap.png”;
} else {
     document.getElementById(“holdingPlate”).src= “images/comic_pt1_6.png”;
}

The image goes back to the original one if the reader scrolls back up. This effect aims to give the reader a sense of animation by making the images move. But this function sometimes does not work as well if the reader scrolls down too fast.

5) Stars gif

The part where Kuno describes the stars is the only place in the comic where there is colors. Everywhere else, which is machine world, is black and white. We wanted to make the distinction between the actual nature and the imitation of nature by machines.

The dialogue about the stars are on the gif, which was possible by making the gif position relative and the dialogue boxes position absolute. Each dialogue box appears when you click on the gif, this part is done by using jQuery.

// show dialogue by clicking in the star gif
$(“#gif”).click(function() {
     $(“div:hidden:first”).fadeIn(“slow”);
});

6) Lights back on

Before the lights are back on, Vishati is alone in the dark, holding the plate. It is described that this is the part when she doesn’t hear any voices, and is struck with loneliness before she turns off the isolation button and goes back to life where assistance by machine keeps her busy. So we wanted the reader to feel the similar loneliness by making her really small on the big page. We even made the insides of her empty (basically everything but the lines are nonexisting ) so that the sense of emptiness inside her is shown.

7) The tunnel

We made the tunnel button for the tunnel, so that if the reader clicks on the button, the question of taking the adventure is popped up. The reader can choose either yes or no. If no is chosen, the reader is directed back to when Vishati opens her eyes after the call. If yes is chosen, the tunnel image appears with wind sounds. For this, the tunnel image is display: none in css.

//go to certain position of YES or No button is clicked
function backToCall() {
    window.scrollTo(0,eyes.offsetTop);
}

function toTunnel() {
    document.getElementById(“tunnel”).style.display = “block”;
    window.scrollTo(0,tunnel.offsetTop+25);
}

8) Mute button

We have the background sound for the whole comic, which is the hum of the machine. The mute button originally worked, but during the process of editing the code, it is no longer working. The original function was to play the hum when the page is loaded and the reader can choose to turn it off by clicking on the button, which will display the muted image.

 

// the background hum
var muteButton = document.getElementById(“muteButton”);
var humSound = document.getElementById(“humSound”);
humSound.controls=false;
humSound.autoplay=true;

muteButton.addEventListener(‘click’,muteOrUnmute, false);
humSound.volume= 0.5;

function muteOrUnmute(){
   if(humSound.muted == true){
        humSound.muted = false;
        muteButton.style.backgroundImage = ‘url(soundImg/unmute.png)’;
    }else{
       humSound.muted = true;
      muteButton.style.backgroundImage = ‘url(soundImg/mute.png)’;
    }
}

5. Possible improvements

First, because we have the assets for the second part, continuing the comic to the part we originally planned would be one of the improvements I really want to make.

The mute button was working before, so fixing the malfunction would be an easy improvement. The loop for the background hum is not working as well, so fixing the background hum to work as we planned would be the goal.

Moreover, when I viewed the comic by mobile websites, the fade in timing was not same as seen on a computer page. Fixing the comic to be both computer and mobile friendly.

Overall, I think we got most of the functions that we wanted to work, so I am quite satisfied with the result. It was very enjoyable to see the story to come alive on screen, especially exactly as we imagined.

--------------------------------------html ----------------------------------------------

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>The Machine Stops</title>
  <!--using audio-->
  <embed autoplay="true" src="sounds/hum.mp3" loop="true" hidden="true"></embed>
  <link rel="stylesheet" href="css/styleNext.css">
  <!--Google fonts used-->
  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Belleza" rel="stylesheet">
</head>

<body onscroll="scrollPosition()">
  <p id="showScrollPosition"></p>

  <!--audio-->
  <audio id="humSound" controls>
    <source src="sounds/hum.mp3" type="audio/mp3">
    </audio>
    <audio id="bell" src="sounds/bell.mp3" type="audio/mp3">  </audio>
    <audio id="tunnelSound" src="sounds/tunnel.mp3" type="audio/mp3">  </audio>

    <!--button for machine hum-->
    <button type="button" id="muteButton"></button>

    <!--This is the title-->
    <div class="header">
      <p id="title">The Machine Stops</p>
      <p id="author">By E.M.Forster</p>
      <p id="weMadeThis">Transformed to Interactive Web Comic by Sylvia Lee and Theresa Lin</p>
    </div>

    <div id="images">

      <!--three images in row-->
      <div id="threeInRow">
        <div> <!--wall-->
          <img src="images/comic_pt1_1.png"  width="95%">
        </div>
        <div>  <!--chair-->
          <img src="images/comic_pt1_2.png"  width="95%">
        </div>
        <div> <!--lamp-->
          <img src="images/comic_pt1_3.png" width="95%">
        </div>
      </div>

      <!--one image per row-->

      <div id=onChair>  <!--Vishati on chair-->
        <img src="images/comic_pt1_4.jpg" width="60%"  style="margin-left:20%;">
      </div>

      <div id="isolate" class="overlap">
        <p class="blink_me" id="clickForLights"> Click!</p>
        <div onclick="LightsOff()" id="isolationButton">
          <!--isolation button-->
          <img src="images/comic_pt1_5.png" style="margin: 100px 0 100px 20%">
        </div>
        <div>
          <p id="dingSound">ding!</p>
        </div>
      </div>

      <!--dialogue right before the plates-->
      <div id="talkBeforePlates">
        <p>I suppose I must see who it is</p>
      </div>

      <div id="plates">  <!--holding plate-->
        <img id="holdingPlate" src="images/comic_pt1_6.png" width="60%" style="margin-left:20%;">
        <div id="I_want">
          <p>I want to see you not through the Machine, I want to speak to you not through the wearisome Machine.</p>
        </div>
        <div id="But_I">
          <p>But I can see you! What more do you want?</p>
        </div>
      </div>

      <!--stars gif-->
      <div id="gif">
        <img src="images/stars.gif">
        <p class="blink_me" id="clickGif" style="color: white;">Click!</p>
        <!--dialogue-->
        <div id="box1">
          <p id="do">Do you not know four big stars that form an oblong, and three stars close together in the middle of the oblong, and hanging from these stars, three other stars?</p>
        </div>
        <div id="box2">
          <p id="no">No, I do not. I dislike the stars. But did they give you an idea? How interesting; tell me.</p>
        </div>
        <div id="box3">
          <p id="I_had">I had an idea that they were like a man.</p>
        </div>
        <div id="box4">
          <p id="the_four">The four big stars are the man"s shoulders and his knees.The three stars in the middle are like the belts that men wore once, and the three stars hanging are like a sword. </p>
        </div>
        <div id="box5">
          <p id="sword">A sword?</p>
        </div>
        <div id="box6">
          <p id="men">Men carried swords about with them, to kill animals and other men.</p>
        </div>
        <div id="box7">
          <p id="it">"It does not strike me as a very good idea, but it is certainly original. When did it come to you first?</p>
        </div>
      </div>

      <!--dialogues after the gif-->
      <div id="callOverTalk">
        <div id="inAirship">
          <p >In the air-ship-----the truth is I want to see them not from the air-ship, but from the surface of the earth</p>
        </div>
        <div id="come">
          <p>Mother, you must come, if only to explain to me what is the harm of visiting the surface of the earth.</p>
        </div>
        <div id="the_surface">
          <p>The surface of the earth is only dust and mud, no advantage.</p>
        </div>
        <div id="kuno">
          <p>Kuno!</p>
        </div>
      </div>

      <div id="callOver" width="80%"> <!--this file is jpg-->
        <img src="images/comic_pt1_7_hold.png" width="35%" style="margin-left:32.5%">
      </div>

      <div id="eyes">  <!--eyes closed-->
        <img id="eyesClosed" src="images/comic_pt1_9.jpg" width="70%" style="margin:50px 0 100px 13%">
      </div>

      <div id="books">  <!--only book-->
        <img id=onlyBook src="images/comic_pt1_7.jpg" width="50%" style="margin-left:23%;">
      </div>

      <div id="kissBook"> <!--kissing book-->
        <img src="images/comic_pt1_13.jpg" width="60%" style="margin-left:20%;">
        <div id="o_machine">
          <p>O Machine!</p>
        </div>
      </div>

      <div id="departureTime"> <!--world departure time-->
        <img src="images/comic_pt1_14.jpg" width="80%" style="margin-left:10%;">
      </div>

      <div id="tunnelButton" style="margin-bottom: 10%">  <!--tunnel button-->
        <img onclick="askQuestion()" src="images/comic_pt1_11.jpg" width="30%" style="margin:100px 35%;">
        <p class="blink_me" id="bye" style="margin-top: -12%" >Click!</p>
        <!--this appears when the reader clicks tunnel button-->
        <div id="questionChoice" style="margin-top:-5%">
          <p id="ask" style="opacity:0.0">Would you travel to see Kuno?</p>
          <div id="alignButtons" style="opacity:0.0">
            <button class="buttons"  onclick="toTunnel()">Yes</button>
            <button class="buttons" onclick="backToCall()">No</button>
          </div>
        </div>
      </div>

      <div id="tunnel">  <!--tunnel-->
        <img src="images/comic_pt1_12.jpg" width="78%" style="margin-left:11%;">
      </div>
    </div>

  </body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/scriptNext.js" type="text/javascript"></script>

  </html>


----------------------------------css-----------------------------
html, body {
  /* box-sizing: border-box; */
}

/*anything that needs a font*/
#questionChoice, #bye, .buttons, #clickGif, #clickForLights{
  font-family: "Bell MT";
}

#do,#no,#I_had,#the_four,#sword,#men,#it,#inAirship,#come,#the_surface, #kuno, #talkBeforePlates, #I_want, #But_I, #o_machine {
  font-family: 'Belleza', sans-serif;
  font-size: 1.18vw;
}

/*let's fade in*/
#images > div {
  opacity: 0.1;
  transition: opacity 0.3s linear;
}

.header {
  text-align: center;
  margin: 10vw 5vw;
  padding: 5vw;
  font-family: Cinzel;
}

#title {
  font-size: 6vw;
}

#author {
  font-size: 2vw;
  margin-top: -3vw;
}

#weMadeThis {
  font-family: "Courier";
  font-size: 1.2vw;
  margin-top: 9vw;
  font-style: italic;
}

#images {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#images > div {
  margin: 8vw 0;
}

#threeInRow {
  display:flex;
  flex-direction: row;
  width: 100%;
  flex-wrap:nowrap;
  /* margin: 5vw 9vw 20vw 10vw */
}

.overlap {
  display: flex;
  /* flex-direction: row; */
  justify-content: center;
  align-items: center;
}

#isolationButton > img {
  width: 30vw;
}

#clickForLights {
  margin-right: -5vw;
}

#dingSound {
  /* width: 8vw; */
  font-family: "Courier";
  font-size: 1.5vw;
  margin: -1vw 0 0 0;
}

/*dialogues around the plates*/
#talkBeforePlates, #But_I, #I_want {
  width: 12vw;
  background-color: white;
  border-color: black;
  border-style: solid;
  border-width: 0.2vw;
}

#talkBeforePlates {
  width: 17vw;
  height: 10vw;
}
#talkBeforePlates > p {
  padding: 1vw;
  margin-top: 3vw;
}

#I_want {
  margin: -60vh 0 0 73vw;
}
#I_want > p {
  padding: 1vw;
}

#But_I {
  margin: 15vh 0 0 10vw;
  width: 13vw;
}
#But_I > p {
  padding: 0.7vw;
}


/* dialogues in star.gif scene*/
#gif{
  position: relative;
}

#gif > img {
  border: 11px solid black;
  padding: 0;
  width: 98vw;
  height: 94vh;
}

#clickGif {
  position: absolute;
  top: 1vw;
  left: 48vw;
}

/*dialogue boxes inside the gif*/
#box1,#box2,#box3,#box4,#box5,#box6,#box7 {
  position: absolute;
  width: 12vw;
  background-color: white;
  border-color: black;
  border-style: solid;
  border-width: 0.3vw;
  float:right;
  display: none;
}

/*boxes on top*/
#box1,#box3,#box5,#box7{ top: 1vw;}
/*boxes on bottom*/
#box2,#box4,#box6{ top: 32vw;}
#box1{ left: 1.1vw;}
#box2{ left: 14vw;}
#box3{ left: 29vw;}
#box4{ left: 43vw;}
#box5{ left: 58vw;}
#box6{ left: 72vw;}
#box7{ left: 85vw;}


#do{
  margin: 0.8vw;
  padding:.001vw;
}
#no{ padding: 1.2vw;}
#I_had{ padding: 1.7vw;}
#the_four{ padding:0.2vw;}
#sword{ padding: 3vw;}
#men{ padding: 1vw;}
#it{ padding:1vw;}

/*dialogues after gif*/
#callOverTalk{
  width: 99vw;
  height: 40vw;
}

#inAirship, #come, #the_surface, #kuno{
  /* position: fixed; */
  width: 12vw;
  background-color: white;
  border-color: black;
  border-style: solid;
  border-width: 0.2vw;
  float:right;
  width: 13vw;
}

#inAirship{
  margin-right: 4vw;
  margin-top: 2vw;
  height: 11vw;
}
#inAirship > p {
  padding: 0.7vw;
  margin-left: 0.1vw;
}
#come{
  margin-top: 17vw;
  margin-right: 10vw;
  height: 11vw;
}
#come > p {
  padding: 1vw;
}
#the_surface{
  margin-top: 30vw;
  margin-right: 13vw;
  height: 8vw;
}
#the_surface > p {
  padding: 0.7vw;
}
#kuno{
  margin-top:42vw;
  margin-right: 11vw;
}
#kuno > p {
  padding: 1vw;
  margin-left: 3.5vw;
}

#kissBook{
  position: relative;
}

#o_machine{
  position: absolute;
  width: 12vw;
  background-color: white;
  border-color: black;
  border-style: solid;
  border-width: 0.1vw;
  margin: -50vh 0 0 70%;
  height: 9vw;
  width: 10vw;
}
#o_machine > p {
  padding: 0.5vw;
  margin-left: 1.3vw;
  margin-top: 3vw;
}

/*Button for tunnel*/
#tunnelButton{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

/*div for the question*/
#questionChoice{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2.2vw;
}

#alignButtons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*YES NO buttons for the tunnel*/
.buttons {
  border-style: solid;
  border-color: black;
  border-width: 2px;
  width: 10vw;
  height: 7vh;
  margin: 8px 2vw;
  font-size: 1.5vw;
}

#tunnel{
  display: none;
}

/*make text blink*/
.blink_me {
  animation: blinker 1s linear infinite;
}
/* #blink_me2 {
animation: blinker 1s ease-in-out;
margin-top: -1vw;
} */
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* design scrollbar*/
#showScrollPosition{
  position: fixed;
}
::-webkit-scrollbar{
  width: 5px;
}
::-webkit-scrollbar-track {
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: pink;
  border-radius: 5px;
}

/*button for background hum*/
button#muteButton{
  background-image: url(../soundImg/unmute.png);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center;
  width:30px;
  height: 30px;
  outline: none;
  border: none;
  border-radius: 16px;
  float: right;
}


--------------------------js --------------------------

// the background hum
var muteButton = document.getElementById("muteButton");
var humSound = document.getElementById("humSound");
humSound.controls=false;
humSound.autoplay=true;

muteButton.addEventListener('click',muteOrUnmute, false);
humSound.volume= 0.5;

function muteOrUnmute(){
  if(humSound.muted == true){
    humSound.muted = false;
    muteButton.style.backgroundImage = 'url(soundImg/unmute.png)';
  }else{
    humSound.muted = true;
    muteButton.style.backgroundImage = 'url(soundImg/mute.png)';
  }
}

var eyes = document.getElementById('eyes');
var tunnel = document.getElementById('tunnel');

function scrollPosition() {
  // get the position of the scroll in the whole document
  var width = document.documentElement.scrollLeft;
  var height = document.documentElement.scrollTop;
  // document.getElementById("showScrollPosition").innerHTML = "Horizontally: " + width + "px<br>Vertically: " + height + "px";

  // variables for fade in
  var eachDiv = ["threeInRow", "onChair", "isolate", "talkBeforePlates", "plates", "gif", "callOverTalk", "inAirship", "come", "the_surface", "kuno", "callOver", "eyes", "books", "kissBook", "departureTime", "tunnelButton", "tunnel"];

  // fade in each panel
  for (num = 0; num < eachDiv.length; num++) {
    var eachDivv = document.getElementById(eachDiv[num]);
    if (height > (eachDivv.offsetTop - 200)) {
      eachDivv.style.opacity = 1;
    } else {
      eachDivv.style.opacity = 0.1;
    }
  }

  //change setting for switching ones
  var plates = document.getElementById('plates');
  if (height > (plates.offsetTop - 400)) {
    plates.style.opacity = 1;
  } else {
    plates.style.opacity = 0.1;
  }

  // var eyes = document.getElementById('eyes');
  if (height > (eyes.offsetTop - 400)) {
    eyes.style.opacity = 1;
  } else {
    eyes.style.opacity = 0.1;
  }

  var books = document.getElementById('books');
  if (height > (books.offsetTop - 400)) {
    books.style.opacity = 1;
  } else {
    books.style.opacity = 0.1;
  }

  //swap holding plate
  var holdingPlate = document.getElementById("holdingPlate");
  if (height > (holdingPlate.offsetTop - 100)) {
    document.getElementById("holdingPlate").src= "images/comic_pt1_6_swap.png";
  } else {
    document.getElementById("holdingPlate").src= "images/comic_pt1_6.png";
  }

  //swap eyes closed
  var eyesClosed = document.getElementById("eyesClosed");
  if (height > (eyesClosed.offsetTop - 200)) {
    document.getElementById("eyesClosed").src= "images/comic_pt1_10.jpg";
  } else {
    document.getElementById("eyesClosed").src= "images/comic_pt1_9.jpg";
  }

  //swap to holding book
  var onlyBook = document.getElementById("onlyBook");
  if (height >(onlyBook.offsetTop - 100)) {
    document.getElementById("onlyBook").src= "images/comic_pt1_8.jpg";
  } else {
    document.getElementById("onlyBook").src= "images/comic_pt1_7.jpg";
  }

  //lights back on
  var lightsOn =
  document.getElementById("callOver");
  if (height > (lightsOn.offsetTop + lightsOn.offsetHeight -200)) {
    document.body.style.backgroundColor = "white";
  } else if ((height > isolate.offsetTop+200) && (height < (eyes.offsetTop - 400))) {
    document.body.style.backgroundColor = "black";
  }

  //make the background white at top
  if (height < (onChair.offsetTop + onChair.offsetHeight)) {
    document.body.style.backgroundColor = "white";
  }

  //add bell sound
  var bell = document.getElementById("bell");
  if (height >= (onChair.offsetTop + onChair.offsetHeight - 200) && height <isolate.offsetTop-200) {
    bell.play();
  } else {
    bell.pause();
  }

  //add tunnel sound
  var tunnelSound = document.getElementById("tunnelSound");
  if (height >= (tunnel.offsetTop -200) && height <(tunnel.offsetTop + tunnel.offsetHeight)) {
    tunnelSound.play();
  } else {
    tunnelSound.pause();
  }

}

function LightsOff() {
  document.body.style.backgroundColor = "black";
}

// show dialogue by clicking in the star gif
$("#gif").click(function() {
  $("div:hidden:first").fadeIn("slow");
});

//if tunnel button is cliked the question shows
function askQuestion() {
  document.getElementById("alignButtons").style.opacity="1";
  document.getElementById("ask").style.opacity="1";
  document.getElementById("bye").style.opacity="0";
}

//go to certain position of YES or No button is clicked
function backToCall() {
  window.scrollTo(0,eyes.offsetTop);
}

function toTunnel() {
  document.getElementById("tunnel").style.display = "block";
  window.scrollTo(0,tunnel.offsetTop+25);
}

Week 3: JavaScript Exercise – Sylvia Lee (Chen)

http://imanas.shanghai.nyu.edu/~gl1593/week03/js-exercise/

The exercise was about using JavaScript to change image and content.

I first gave all the buttons the same styling, but realized that the third button is longer than others because it has longer content. So I gave the third button id = “longButton”  and made it longer in the css. (#longButton{ width: 9em; })

Once I learned the way to call for an image in JavaScript, it was not hard to change the image. I gave each button a function so that when you click Boogie Left, the cat will move towards left but when you click Boogie Right, it will come back to its original direction.

Changing the caption was harder, because the changed caption had a red box around it. I found out that I can do the styling by setting the border. For this, I had to add style it in css first to make differences in JavaScript. So I gave the caption id = “caption”. And in css, made the border-style: hidden. After this, I could make the border-style solid in JavaScript, and .style.borderWidth = “medium”. Then I changed the color to red and added padding. For the box to be not the full width of the page, I set the width of #caption in css.

What I could not change was the gap between the buttons. I wanted to make the buttons closer but changing the margin or padding of the content, the buttons div, or each buttons did not work. I also wanted to make the caption come back if the button is pressed again, but adding two functions to one button only overwrote the last function.

Week 3: Interactive Comic Ideas – Sylvia Lee (Chen)

Partner:  Theresa Lin

Our comic would be a modification of the short story “The Machine Stops”. We thought the visual and audio description of the story is adequate for changing into web comic. The comic would only cover Part 1, where Vashti travels space to visit Kuno. We thought the content and the flow provided in Part 1 was enough to make an interesting web comic. The beginning would be shortened to few scenes, mostly focused on showing the settings and atmosphere of the story. If we have more time, we would like to change the ending to quickly cover Part 2.

The comic would mostly be drawn, but there would be addition of audio, picture, gif, video and interactive effects such as clicking, scrolling, dragging. For example, in the beginning where the reader is introduced to the setting, we would insert the hum of the machine, blinking of the components. When Vashti travels on Airship, we would have an gif of the ship moving through space.

Week 3: CSS (Chen)

http://imanas.shanghai.nyu.edu/~gl1593/week03/sylvia’s_portfolio/

I chose the background color as blue, so that it resonates with the header image that I chose. I made the navigation bar and divided into three section, making an underline appear when hovered over.  I also added a dropbown bar underneath the writing section.

For the about page, I made a section on the right to put in my picture and basic information like age, school about me. On the right, main content column I want to add more about my activities at NYUSH.

For Writing tab, I will add my previous writings. And for the Projects tab, I want to display the IMA and other club projects that I’ve done.

Week 2: CSS exercise – Sylvia Lee (Chen)

The website: http://imanas.shanghai.nyu.edu/~gl1593/CSS-exercise/

I first started with coloring all the background as the note in the exercise told. Then I formatted the large blocks first–header, content, footer. I had a huge trouble having the columns side by side which flex function did not work as it says on w3schools. I solved this problem with margin-left: 20%. Also, when I made the content class align-content: center, the boxes did not come to next row on the left but in the center so I changed it to justify-content: left.  When I finished formatting everything, the footer was too close to the content box, without any space left. So I enlarged height of the content which also made the content boxes to have a huge space between each row. I tried to fix this but did not succeed.

body {
  margin: 0;
}

a{
  color: grey;
  font-family: "Arial";
}

.header {
  text-align: center;
  font-size: 17px;
  /* background-color: lightgrey; */
  padding: 10px;
}

.navigation, .content {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}

.navigation {
  /* background-color: lightblue; */
  flex: 20%;
  width: 20%;
  /* height: 800px; */
  flex-direction: column;
  position: absolute;
  /*content*/
  text-align: left;
  font-family: "Tahoma";
  padding: 5px 5px;
}

.navi-box {
  /* background-color: lightgrey; */
  width: 95%;
  height: 30px;
  margin: 2px 5px;
}

.content {
  /* background-color: lightgreen; */
  flex: 80%;
  flex-direction: row;
  justify-content: left;
  width: 70%;
  height: 800px;
  margin-left: 20%; /*leave room for left column*/
  /*content*/
  padding: 5px 0;
  text-align: left;
  font-family: "Tahoma";
  color: #6B6B6B;
  /* font-weight:500; */
}

.content-box {
  background-color: lightgrey;
  width: 150px;
  height: 100px;
  margin: 10px;
  align-items: flex-start;
}

.footer {
  /* background-color: lightgrey; */
  padding: 15px;
  text-align: center;
  font-family: "Helvetica";
  font-size: 14px;
}

Week 2: Understanding Comics – Sylvia Lee (Chen)

Although some information–such as formatting the size of the gutter and panel–is specific to comics, I felt like the content he talks about is not only restricted to comics. By going through the history of comics and how it developed, I could see that this new medium of comics is slowly perceived by the mass as something that can deliver a significant message–same as new media.

McCloud talks about how in a panel, time and space merges. And because it does, both becomes something that the author can control with different techniques like elongating the panel, or widening the gutter. Same happens with new media–videos, pictures, and more medium can now contain more than only time or space. With more development of other techniques, we can even manipulate one scene like the photo collage that was our last assignment, and newly create a different aspect in a medium. McCloud also talks about how one panel could contain several moments, even consequently. Which is more so in other media such as video. Again, the possibility of manipulation made the possibility of this aspect broader.

Moreover, the explanation of how words and merge with pictures explains well the function and collaboration of each element. If in a photo, whether to add words or not, if in an audio, where which sounds overlap or collide, if in a video whether to add sound, color, background music when and where — these decisions would be based on the consideration of the characteristic and effect of each element. I feel like McCloud, by explaining such aspect in comics, gave a good example how to deal with several elements in one medium.

Week 2: Photoshop Collage – Sylvia Lee (Chen)

I made a photoshop collage about the play M.Butterfly by David Henry Hwang. It is a spin-off of Puccini’s famous opera Madame Butterfly. The protagonist, Song Lilling, is a man disguised as a woman to seduce Rene Gallimard, a French ambassador. Through their relationship, the story criticizes the stereotype of women and Asian countries.

Except for the poster on the top left corner, the pictures chosen was cropped and placed on the background. Outlines were adjusted a little to merge better into the background.

 

I used the Korean production’s M.Butterfly stage as the background:

On the top left corner, I added the official poster of the play. I faded it out so that it would be seen more like a watermark.

On the bottom left, I added a picture of Gallimard and Liling happily together(size adjusted):

In the center, the picture of Song Liling’s performance (size adjusted):

On the right corner, death of “Madame Butterfly” that Song Liling plays which is the beginning of the play, or the final end–death of Rene Gallimard dressed up as the Madame Butterfly (size adjusted):