Category: Leon Eckert

Posted on

Interactive Comic Post – Taylah Bland

Project Link: http://imanas.shanghai.nyu.edu/~lag614/interactive-comic/index.html

The Project Overview

The project that we created was central to the very core of our topic: communications. Everything that we did for this interactive comic related in one way or another to the concept of communication.

The premise of our story was integral to actually trying to highlight that there is the potential for nature and the technological world to co-exist. Quite often technology is depicted as an impediment or encroachment upon our lives in a negative sense. People are told that they do not appreciate the natural beauty of the world because they become consumed in the task of viewing it through the lens of a camera (or some other digital form). We are often forced into a position to make a choice between enjoying the natural world and continuing with our pursuance of technology. We found that in actuality, there is no reason why these two elements cannot co-exist. Instead of placing them as extremes, or the antithesis of one another, we can find balance between them. Our interactive comic therefore wanted to express this conclusion.

Our story follows Ivy, a name that I chose as a representation of nature, likened to plant which shares the same name. Ivy is a social media influencer who lives in a big city. Her daily life is central to using social media (instagram) as a way to promote travel destinations for people. However, upon watching a Netflix documentary on “Planet Earth” (Laila’s fantastic idea) she begins to fear that she is missing an actual connection with nature. That she is simply living her life through the lens of a screen. She decides to venture to three destinations. The Great Barrier Reef, Amazon Rainforest and the Sahara Desert as she continues her search for a reconnection with nature.

At each of these places she engages in activities to make her experience memorable such as swimming with turtles, riding camels or hiking through the forest. She uses her journal as a tool of reflection and writes it from a first person perspective.

Upon returning, she realizes that she doesn’t need to make a choice between technology and nature. Both can coexist harmoniously even in her life in the bustling city of New York.

Every part of our presentation has specific meaning

Graphics

We deliberately chose to keep the graphics very simplistic at the beginning of the piece. Laila created beautiful minimalistic drawings that showcased perfectly the emotions and storyline we wished to execute. As the piece progresses, the graphics become much greater not only in terms of resolution but of quality, detail and colour. I wished to showcase the individual progression of the protagonist as she regained the “colour” in her life that she was missing. It also symbolizes her enlightenment on her personal journey of self discovery and reconnection with nature.  Therefore I used Photoshop in order to create the second half of the graphics with greater vitality to reflect the changing story.

I also included subtle watermarks within the Amazon Rainforest and the Sahara Desert. For the desert, it was a hand with sand slipping through and for the Amazon Rainforest it was the girls face concealed within the waterfall. I purposely put these into account for a deeper reflection. The sand slipping through sand symbolises the missed opportunities of not engaging with nature but also emphasizes the need to really connect with nature in the moment. This is demonstrative of the sands inability to be held definitely, emphasizing the importance of capturing the moment as it plays in real time.

The face in the waterfall is demonstrative of being refreshed, rejuvenated, and replenished quite literally with the freshness of the water. It provides both a deep connection to nature and the capacity for continual renewal. So that someone who feels like they have missed an opportunity is reminded that it is never too late to make a change.  

Title Changing

I created the title button with the assistance of Professor Leon in office hours. I originally had created it with just a button and then a hover effect but we simplified it even further and made the title shake.

For the changing effect I used:     

onmouseover=”mouseOverHeadline()”

onmouseout=”mouseOutOfHeadline()”>

Ivy

And also a setTimeout, “block” and “none” display in Javascript

After this we put in a time delay and allowed the “begin” button to appear. This was a simple effect that had a powerful effect. The title of the story and its continually changing nature provides the reader with a sense of uncertainty as to the direction of the story.

For the button we used: <button onclick= “hidebegin()”; id=”Begin”>Begin</button>

Difficulties faced

  • Making the background images and button disappear after clicking next.
      • This didn’t actually end up being too much of a hard task to fix but it was working out the right codes to use in order to make this change.
  • Aligning the images and the text
      • This was slightly difficult because we had to remember that anything written up the top of the code overrides what is written down the bottom. Often we had lines of code pertaining to margins but when we wrote the “auto” setting, it ended up clashing with previously written code and didn’t work.
      • Despite working hard to try and correct this, Laila was able to fix up what exactly we needed to change. We played to our strengths on this one, Laila definitely has natural skill with coding and this was replicated through her ability to handle a lot of the coding. My skill set was seen more so in the creation, captioning, documentation and photoshop of the project. Whilst I did contribute to the coding, Laila definitely flourished in this area.
  • Captioning for the Comic
    • I wrote the captioning for the comic and during this time I really had to think about the best way to communicate the story whilst also the plot interesting and clear. I made a few revisions but decided upon using a journal style in order to create a personal connection to the story and also to re-emphasize the communications aspect of the task.

Reflections at the end

Whilst the project may seem that it is simplistic graphically, it is anything but. The complexity is formed within the hidden and concealed messages that each graphic presents. Whether it be a simple transition from basic image to an image of nature in full color, or the hidden elements in the pictures there is always the potential to learn more as you examine every frame.

I was really proud of how the story and the comic turned out. Although the process was fiddly in regards to changing certain aspects of the code to move certain elements it was certainly rewarding.

Considering this was my first experience with coding, content creation and design I am really proud of how it turned out. Whilst it may not be the masterpiece, I, as a perfectionist set out to achieve it exceeded all my expectations and I look back with so much joy on what we created. I look forward to developing my skills in these areas on the next projects!

I enjoyed working with Laila to create a project that we are both very proud of. Laila was a fantastic partner and is a very talented person. I really hope that we get the opportunity to work together in the future. This experience taught me so much but working with Laila also enabled me to develop my skills so much further.

Posted on

Project 1 Documentation – Justin C

Link: http://imanas.shanghai.nyu.edu/~jc8017/Project3/start.html

Our final project is a clicking adventure game where you as a the player are trapped inside a room. The goal is to escape but finding clues and picking objects in the room. Without spoiling any further, the theme is science fiction.

One of the most difficult objectives was to lay out a framework in which the computer can keep track what the user has interacted with. Since the game features the user picking items and also making certain scenes change, how can we program it such that computer understands and responds appropriately to each action? The solution lies in the separating different events in small chunks such as functions and objects.  Each event will  handled by a function called the handler. This handler function determines the scene in which the user is in. Another vital function is the handle click function. This function determines which scene the user is in, the function will be appropriately passed to handle events in a specific scene. With this setup, we were able to code all the changes in javascript without needing to change the html file. In fact, the html file only contains one image, three buttons, and eight audio elements. The core mechanics of the game is within the javascript file.

Of course, one of the major challenges with such a html setup is the frequent changes in scene. Therefore, for every event or change in the story, a new image must be displayed. Every picture has been generated by photoshop in a photo-montage like style. Pictures of the study room are taken and then imposed onto a crude drawing of one side of a wall.

Posted on

“The Alibi” – Julia Riguerra

In “The Alibi,” Serial utilizes music to heighten mood in different parts of the narrative. They open with a sharp, high-pitched piano tune that keeps you on your toes, which goes along with the narrative of a somewhat unsolved murder case. The combination of dialogue and exposition gives the essence of a clearer narrative where listeners can visualize the setting, in a way that is different from print or video. This makes the podcast more engaging. Hearing only the participants’ voices, listeners can hear their emotions rather than see them, which heightens these emotions in a different way. As a medium, sound has its own unique way of affecting our emotions, and this is made clear by how podcasts work.

Posted on

Comic Project (26 htmls)—Jamie (Ziying Wang) & Madison

link: http://imanas.shanghai.nyu.edu/~zw1745/26htmls/index1.html

This is a screenshot of all our html,  css and js pages as well as images and music sources. 

The name (26 htmls):

The comic project is named after the number of html pages we’ve created for it. For in each html page we have different animations and conversations, it is hard to keep everything within one page and just switch the pictures. 

Also. the 26 htmls is also a must if the player wants to go through every plot in this story. 

Sketching stage:

Madi and I are both crazy for the Netflix series Black Mirror, its latest work Bandersnatch which allows the players to choose their own plots deeply inspired us. We immediately decided to design our comic into an interactive comic, allowing our players to encounter different plots by exploring the map themselves. Also influenced by Black Mirror, the theme of the comic is pretty dark, originally we planned to make the comic reveal the darkness of humanity through making hard choices between dilemmas, however, we soon discovered that our skills  are limited in writing the lines and what we’ve written can’t fully express our ideas, nevertheless, we compromised to the best we can do. We sketched out a thorough plan of our plot, it’s a tree shaped chart which leads to 8 different endings.

 (Blurring out the endings to avoid spoilers)

Coding:

We distributed our work well, Madi was mainly in charge of drawing and css layout while I focus on coding in index and javascript. Within two days we sketched out our protagonists and got ready for building index pages. We started with a cool torchlight effect which we got our source code online, I studied the code and changed the original background to what we photoshoped, and turned it into the beginning page we can see now. Then we drew our buttons on photoshop to create a more story feeling instead of using the stiff default buttons in html. 

The word changing effect in this comic is achieved by switching png pictures instead of directly showing the words. We didn’t use innerHTML function for we want the texts to appear after the player clicks on a speechbubble. But now looking back, I think I can use “display: none” in html and “display: block” in js to present the conversations and keep them in a stable position. 

The only animation we have in the comic is the boy, I used a simple moving code to make him move a little in some pages, we also have footsteps and chewing sound effect inserted within the code and the players will encounter them when coming to certain scenes.

The coding process was very confusing, since we have so many pages and the choices the player chose before will affect how the boy appears in later scenes so we had to create multiple pages with tiny differences for a same scene. The background color changes in some scenes, it is a return to our concept “finding humanity”, lighter backgrounds indicate that you’ve made choices closer to your humanity while darker ones mean you’ve done dark things.

User testing, Conclusion and Reflection:

To conclude, we finished 80% what we had planned originally, we didn’t abandon any originally made plots and completed the 8 endings. However, during user testing, we find that it’s hard for our users to compromise to the unclear instructions in the game. For example, every input the user enters must strictly follow the two choices presented within the question, and the user didn’t know they should click the boy for animation before clicking onto the speechbubble. If I were to do a revision, I would fix the first problem by adding more “or”s to the if conditions, and make the boy move automatically without the user having to click on it.

Overall it’s a fun experience of creating artworks and building interactive website. Though my creation is limited due to my ability in coding, I would try to compensate that by learning more coding tricks in the future, especially those that can help with simplifying my codes.