Author: Ruby Kim

[Tokio]

Partner: Anica

Instructor: Moon

Design: The project is a website that takes users through a story of a novel ‘Tokio’ by Higashino Keigo. Based on the original plot, several storylines are altered as we tried to simplify the text and maximize the use of visual elements. The story is delivered from the perspective of Takumi-father of Tokio. Takumi recalls the memory, back in his high school when he finally discovered his true family background. Here, Tokio’s contribution is crucial as he is the one who helped his father. 

Below are the screenshots for several pages of the project.

Process: From the beginning, especially until we submitted the proposal, we did not have a concrete idea for our project. As one of the concepts of the project was an abstraction, it was challenging to extract the main scenes, but having minimal details at the same time. 

Regarding the aesthetics, we thought ‘abstract’ illustrations would perfectly fit our project. Therefore, the style of our visual elements is mostly inspired by the illustrations I found in ‘Pinterest’. Also, the advice from Dave to narrow down our color scheme helped a lot to keep the ambiance consistent.

In terms of coding, creating image buttons and linking those to other HTML pages was relatively easy as I have already done in previous projects. Also, when using CSS, I could see myself having a deeper understanding of ‘position’ and that helped me a lot when designing the layout.  Furthermore, regarding ‘addEventListener’ in Javascript, I also felt more comfortable using it instead of creating a function in HTML and triggering it in Javascript.

One of the struggles I went through was fixing the origin of the Ferris wheel while it is rotating. At first, it was floating around even though I applied ‘transform-origin: center’. However, in the end, I realized the problem was that I did not have the exact pixel values for the image size and the effect was applied in the ‘div’, instead of the ‘img’ tag. Thus, after I created another ‘id’, ‘wheel’, for the image and gave specific pixel values, the image rotated in its original position. 

My final problem was linking the image loaded in p5.js to another HTML page.  At first, I tried a pure Javascript syntax(grabbing element and link by window.location.href) and of course it did not work in p5.js. After asking for help to the professor, I learned that I need to detect whether the distance between the element and the mouse is bigger than the image’s diameter.

If I had to work on this project again, I would change the way of interaction to scrolling, instead of clicking. In the beginning, we actually planned to implement the scrolling effect. To be specific, we wanted to let users scroll and make all the visual elements to appear in a timely manner.  However, due to the limited time and our technological skills, we decided not to change our plan into clicking. Also, more than ten pages of HTML and the animations made more difficult to implement the effect. My personal reason was since the previous projects that I have done are mainly utilizing click function, I wanted to explore different method.

During the process, I also learned the importance of ‘feasibility’ of the project. Even though we have fantastic ideas, if we do not consider how much time we have and our skill limitations, the final result would not be polished. Thus, when discussing the idea with the professor, we decided not to include some of the animations and focus more on the overall perfection of the project. 

After the presentation, we received three main critiques, which contained lack of audio elements, non-responsive layout, and several vague instructions for the users. Regarding the audio, we also wanted to include background music and several sounds that could enhance the animation effect. However, we discovered that the ‘autoplay’ function is no longer in use and must create at least one interaction to play the audio. Therefore, due to the limited time, we were not able to add at the end. Additionally, I also agree that the responsive layout would make our project more refined. During the in-class presentation and IMA show, I experienced the positions for some elements were being altered depending on the screen resolution, which again taught me the importance of flexibility of the website. Lastly, although most of the interactions were hinted by the arrow button, adding scrolling and changing the button into another image confused the users. 

Future: Taking the criticisms I received into account, I want to improve my future works by focusing on making a responsive webpage.  Also, I want to learn more about p5.js as I still do not have a complete understanding of it and thus my skill is limited. I think the final project especially taught me a lot of what I can improve and the importance of admitting my mistakes and trying to reflect them in future work.

Partner: Anica

Link: Tokio –  http://imanas.shanghai.nyu.edu/~sk7383/netArtProject/coding/index.html

Description: Our project is based on the novel ‘Tokio’ by Higashino Keigo. The theme-circulation, redemption-gave us the inspiration, and since the original storyline is relatively long, we extracted the main plots. The basic story is about Tokio, son of Takumi, going back to the past and help his father realize the misleading perceptions about his family background.

Process: As mentioned above, we first tried to extract important scenes of the story. After, In terms of the way of delivering the story, we tried to create our images abstract-which Professor Moon helped us getting inspired–and then concentrate more on illustrations and audio elements. The ‘abstract’ illustrations were inspired by some drawings that I found in ‘Pinterest’ website. 

In terms of the division of labor, we did not have a complete distinction, but Anica focused more on the visual illustrations and I focused more on the coding.  While discussing the aesthetic parts, we decided to narrow down our color scope so that we effectively keep the gloomy ambiance throughout the project. 

When beginning the coding, I kept trying to think of which layout would best deliver the content to the users. (What kind of design would let users read easily, in other words.) One of the decisions I made was to highlight some keywords in a different color. Also since I wanted the users to feel as if the characters are talking, I added a typewriter effect to the quotes. 

The most difficult part was definitely the interaction. First of all, it was really challenging to think of other interactions rather than merely adding the next button to each page or scrolling. Even though we still adopted the clicking method, I wanted to offer other ways that users could interact. For example, I created a ‘lock’ image button, implying that the users should unravel some questions. In addition, as the image attached below, users can hover over the envelope to see the address. In order to achieve this effect, I used p5.j. With the professor’s help, I first created another canvas and positioned it under the envelope image, by adjusting z-index and background colors. 

Furthermore, in the scene where Takumi realizes that he misunderstood his parents, I wanted to create rain-falling animation in the background, which could contribute to emphasizing his emotion. While doing so, I referred to this youtube video and changed a few details afterward. 

The below pictures are actually the screenshots of the one page.  Originally, they were separated into two pages. However, since we thought it would be better if the user can simply hover to see both mom and dad scenes, I used ‘mouseover’ and ‘mouseleave’ function in Javascript so that when the user hovers over mom’s image, both image and text of the mom would automatically change into those of dad.

Lastly, one of the biggest things that I have learned was dealing with images in p5.js. Basically, when the page is loaded, the newspaper is falling down from the top. When Anica was trying to create an animation, we found out we need a server to load images in p5.js. So, from professor Moon, we solved the problem by creating the local server in our own laptop, using ‘terminal’. After, I tried to make the image as a button leading to the following page. I first tried a pure Javascript syntax and it definitely did not work in p5.js.  After asking for help to the professor, I learned that I need to detect whether the distance between the element and the mouse is bigger than the image’s diameter.

Reflection: One thing I really wanted to improve was the audio element as we did not manage to include it. We found out ‘autoplay’ is also prohibited for the audio, which meant we need a certain kind of interaction to play the music. In terms of time, we couldn’t create more interactions. So if time allows, I would definitely try to improve it. Also, I did not use p5.js as much as I planned to, so this is the part what I want to learn more. However, overall I am definitely happy that we made it and feel really attached not only to this project but also my other projects that helped me learn so many things throughout this semester.

Partner: Anica

Concept: The idea of this project stems from a novel ‘Tokio’ by Higashino Keigo, which we are inspired by the theme–time travel, circulation, and redemption. The overall story will be based on the original plot, but it will going to be delivered by the selected quotes from the first-person perspective of Takumi. Tokio, son of Takumi, goes on a temporal journey back to 20 years ago and helps his father uncover the truth about his family background. In our life, parents are always thought to be stronger, both physically and mentally, than the child while in fact, they can be helpless as well. This storytelling witnesses a reversed role–Tokio changed the life of his father and helped him become a better human being. Although Tokio unfortunately died at a young age, he still appreciated what he had had in the world. Thus, besides our personal motivation, we seek the project to be as an educational fiction for both children and parents, which can also break the conventional hierarchy between children and parents. Therefore, the project will tell young people to be grateful for what they have given by the parents even if their living condition does not satisfy their wants. Similarly, our work will let parents remind the importance of self-improvement and warm attention to their child.

Sources: Two sources significant to the project are both from a Front-end Developer ‘302chanwoo’. In his work ‘Going Home’, he constructs a story of a robot who embarks on a journey way back home. Unlike typical stories, ‘Going Home’ does not have a detailed plot, but has abstract scenes that more trigger users to anticipate the future scenes. Likewise, our project also aims to establish the plot with minimal details of the story, but with diverse visual and audio effects that can function as much as texts do. Furthermore, the main medium for transmitting the story will be two-dimensional illustration and animation. This idea is originally drawn from a three-dimensional animation, which is prominently used in his other project ‘꽃, | flower’. From the work, we learned that how simple and organic form can effectively convey the emotion of each character. While those sources gave us a lot of insights, we thought the effects would be maximized if there were supporting audio elements. Therefore, our project will further attempt to adopt audios that could particularly contribute to expressing the emotions of the characters.

Production: The webpage will include quote(s) of Takumi on one side, and on the other side, illustrations or animations that match the plot will appear. The positioning of quotes and visual elements may differ from each scene so that we can maximize the legibility of users. Regarding the techniques, we will combine two-dimensional visual elements with programming. For example, first, by coding, we may create several organic forms such as ellipse and rectangles, and place the illustrations or animations, drawn either by photoshop or coding, on top of those organic shapes. In addition, we may let the user press the button for a certain amount of time, which can be used for the transition between the scenes. Once they take their hand off, the picture will zoom in, indicating the character traveling back to the past. The project will also include a few audio elements like background music during the monologue of Takumi and conversation between the characters.

The article basically focuses on the history of net art and even after reading, it has triggered me to think about the concept. Before, I was not aware of the genre ‘net art’. This does not mean that I did not have any idea of it, but I think I just did not have much sense for it as one genre or a category of art. However, ever since I have encountered net art in class, it totally blew up my mind. I definitely was awed by the creativity. The artworks were not only delivering complex thought but also some of them were really based on the simple idea that I would have never thought about as my inspiration. Furthermore, as I have been learning to code throughout the semester, I could sympathize with the difficulty and all the time that the artists would invest. We should never underrate net art and even take advantage of the insights and opportunities that the net art provides to us.

Link: http://entropy8zuper.org/godlove/ 

From monoskop website, I found an artist ‘Entropy8Zuper!’. I did not have any information about it, but the unique name itself grabbed my attention. Entropy8Zuper! is actually a name for a company Tale of Tales, founded by Auriea Harvey and Michael Samyn. They are working for the creation of websites and electronic art. 

The first impression I got was that the page looked creepy. It was taking God as their theme. I think the most interesting part of this project is a variety of interactions. Once I put my mouse pointer on the letter “O”, its inside turned into “i”. I was trying to figure out the hidden meaning of “i”, but the one thing I am pretty confident is that the letter is related to God, maybe something that can reveal his identity. 

As I scroll the screen to the right, I can explore the website. All of the words were clickable and they offered certain description or videos.

In the page attached below, I was first confused for a while. But, then I realized that depending on the position of the mouse position, the postures of two people also changed, and I thought this was really intriguing and unique idea. Overall, it was a little bit challenging to decipher the meaning of the project, but overall it was totally different from what I have usually seen. Therefore, the project was very insightful.