Author: Ruby Kim

http://imanas.shanghai.nyu.edu/~sk7383/week04/w04-exercise-man/index.html

For the basic content for the animation, I created a button and inserted three pictures of the walking man. Meanwhile, in order to alter the position of them, I made a div for ‘img-container’ and put the images inside it. 

After HTML, I changed the style and position of the button and images. For the button, I tried to add tiny detail by using ‘:active’. Therefore, when the user clicks the button, its background color changes into black, and the font color changes into #c0b6ff. Also, in order to make two men opaque in the initial setting, I assigned their opacity to 0.3.

Javascript was the most tricky part. First, I recalled the function ‘move()’, which I have assigned it for the ‘button on click’ function in HTML. Then, the count has to increase as the user click the button, I ‘let’ the ‘count’ as 0 and added ‘count++’. Lastly, I used ‘if’ statement to change the opacity for each button click. Furthermore, for looping effect, I set the ‘count=0’ if the user clicks three times, so that the user could repeat infinitely when he/she clicks again.

In order to add unexpected aspects to the animation, we decided not to open the budget for the character in the first place. In other words, the character would have really small amount of money on that day, or the opposite. Therefore, based on their guess, the readers could decide to spend a lot of money or not.

In the beginning, the illustrations of Oona and I will be introducing the overall setting and flow of the story. Then, the readers would have two options to choose either male or female for their character.

As the story is based on the life in NYUSH, we will start from the moment that we get up. The character has  8:15am class; therefore sets an alarm at 6am. However, the moment the alarm rings, he/she can choose whether to get up or not. If the character gets up, he/she would be able to take a 7am shuttle. Otherwise, metro and taking a didi are the options.

After arriving at school, the character could have a breakfast with three different ways: cafeteria in school, family mart, and 手抓饼(the one across the family mart). Then, he/she would attend classes until lunch time. For lunch, the character would also encounter three situations: friends asking he/she to go out and eat, delivery food, and cafeteria. But, if the character chooses to go out with friends, they will ask he/she to drink Starbucks after the meal. For other two options, he/she would have an option for school cafe.

For free time, the character could choose one of the activities: taobao, studying, and hanging out with friends(going to Puxi). Normally, the readers would expect to have a highest spending for going out; however, for the twist, if the character chooses to study, the laptop will explode so he/she should make another payment for the repair or new laptop. While there will be shown a lot of expensive products that would tempt the character to buy them, he/she would eventually save them up for next time. Lastly, when he/she goes out, he/she will fall into Huangpu River while taking a photo in the bund. Therefore, the character should buy new clothes, phones, and etc.

After such an adventurous event, all of the characters would return back to the dorms. For dinner, he/she can choose to go to the mall, having left-overs, or just to starve. However, if the character chooses not to eat anything, he/she would end up ordering delivery food since he/she gets so hungry at last. Also, if the character chooses to have left-overs, he/she would find the food went bad and eventually choose between going to the mall or delivering the food.

http://imanas.shanghai.nyu.edu/~sk7383/week03/in-class/index-cat.html

The biggest mistake I had done at the beginning was setting the function for the buttons into the same name.  I thought I could have the same function name and command separately in JavaScript. However, I found that I need to make each function to each button and command separately.

Since the cat facing left should not be presented on the webpage in default, I employed ‘display: none;’ in CSS. 

Also, the second biggest struggle was regarding the cat image. I thought I had to put ‘btn-2’, which was ‘Boogie Left’, inside the getElementById() in order to swap the image into the left positioned cat. However, at last, I realized that I should have  typed ‘btn-1’, which was ‘Boogie Right’, to swap. 

The source of inspiration was a Mexican artist Frida Kahlo, namely known for self-portraits. From this painting ‘Burn in Blue’, I thought it would be ironic if she, who was drawn by herself, were looking at her “real” self from the inside of the frame. Furthermore, as I thought the people who are watching in the museum would emphasize the contradictory situation, I decided to locate the people taking a picture of two Frida Kahlos. 

Since the main task was extracting the image from the background, I utilized ‘magic wand tool’ and ‘eraser tool’ the most. By lowering the ‘exposure’ and raising the ‘contrast’, I tried to convey the deeper impression of the real Kahlo. At the same time, I also reduced the magenta ‘color balance’ Kahlo inside the frame. At last, after editing the image of people taking a photo, I adjusted the ‘inner shadow’ and ‘stroke’ of the background layout and finished my work.

‘

Inspiration

While discussing comic idea, we came up with the issue of “budgeting”. We thought saving money is something that we always try to do, but definitely not easy to keep up. Thus, we decided to make a story of a NYUSH student choosing what he/she wants to spend money (from food, to necessities, and other items, etc), and remind ourselves to spend wisely.

Storyline

Within one day, with a particular amount of budget, we will provide daily circumstances that we would encounter in school and daily life(off to AB, taking lecture, having meals). Based on those, we are going to add some options that varies in cost: drinking coffee after lunch, going out for dinner, various options for food delivery, and etc. In the end, the reader will either be successful in “helping” the character spend their money wisely, or they will have gone over budget.

Interactivity

For our comic idea, we wanted the reader to be able to interact with the story by clicking and making choices out of a set of options. In this case, the choices that “pop up” will be able to be clicked on and selected, thus introducing a change in the storyline (which differs based on what is chosen!). This is the interactivity we are aiming for.

Illustration

We got some ideas from illustrations on Instagram.

방구석 (@gooooseok) • Instagram photos and video