Author: hkg245

Link 🙂

Description:

Because the two of us are from different campuses, each of us experienced a different process of adjustment in coming to NYU. Our idea with this project was to showcase the experience of a freshman entering NYU Shanghai and NYU Abu Dhabi through a sequence of images, beginning with viewing one’s admission decision. 

Process:

Initially we planned to make a more traditionally styled comic sequence of illustrations in which scenes and icons from each campus appeared side by side. As we began, however, we found that images were much more immersive than the illustrations we made, partially due to our limited experience with drawing. We used images from our own lives to tell a story of our first impressions as freshmen. My partner created a sequence of images with thought bubbles that appear after clicking “next” while I made mine as a full screen scroll of images. The first has the benefit of seeing the whole image at once while the second is harder to have an overview of but hopefully evokes curiosity. 

Coding: 

Coding was for the most part straight forward and I was able to draw from our many small assignments to create my part of the project. While coding I felt that I had learned much more over the course of the semester than I had realized–when planning the project, I wondered how I would be able to do any of it at all, but I soon realized that much of it could be puzzled out with quick references to class activities. Something that tripped me up at first was navigating multiple folders of html, css, and js. I unintentionally created a duplicate css file and edited the wrong one. 

In order to keep our pages for Abu Dhabi and Shanghai organized, we created to separate folders of files for each. We had an index.html and admitpage.html to create the two pages leading up to the AD-SH split. 

In order to create the scroll sequence and narration, I used a javascript function to change the text depending on the position on the page. I used the same function to change the color of the sky in the first piece of the sequence.

 

Link 🙂

This exercise took me longer than I expected due mostly to small syntax errors rather than conceptual ones. For a while my function wasn’t working because I mixed up getElementById with getElementsByClassName, which is something I should be more careful of in the future. Once I figured that out though, I got it to work pretty quickly. I’d used loops and counted iterations before in another class but had to look up the syntax for javascript. 

I tried changing the opacity so that the image farthest from the “active” one would be the palest, and the next image was slightly more visible. Also tried to make the button look a little more inviting. 

When I initially got my function to work, I noticed that after it looped back to the beginning I had to double click the button in order for it to move to the next image. I realized this was because I had “iteration=0” (to reset) in an “else” condition which meant that it waited until the 4th iteration to reset to 0. To fix this, I moved “iteration=0″ to the end of

else {
img1.style.opacity=”1″;
img2.style.opacity=”0.2″;
img3.style.opacity=”0.01”;
iteration=0;
}

Below are some screenshots of my finished code. 

Boogie Cat

In this project, after reviewing the notes, I felt pretty confident in how to complete the assignment. For the most part, it went exactly as I expected except for styling the box in CSS. For whatever reason, though I checked my code for typos and consulted other sources, I could not make a border appear around the caption. I tried to make a border appear before pressing the button as well, and this didn’t appear either. I changed the box color to green and this did work, so I know that my box is appearing the way I expect it and it is just the border that I cannot account for. I added in box-sizing: border-box, suggested by an online source, but this did not help.  I’m still not sure what I am doing wrong, but the code that I expected to work is below.

For our comic project, we’re planning a narrative of two NYU freshman– one at Abu Dhabi and one at Shanghai– and their process of adjusting over the course of the year. We will juxtapose their experiences of the culture and their conversations to their friends there and at home. The story will show their growth over time side-by-side, although the characters never meet. Their lives are very similar and we explore this by highlighting the parallels between their lives as expats in a new environment. By the end of the comic, they return home and realize the place they struggled to adjust to in the beginning now feels like home. If practically possible, we would create this as a sequence of animated cartoons that the user could click through.