Giter VIP home page Giter VIP logo

interactivecomic's Introduction

Interactive Comics Project: "Day in the Life of a Cat"

Project Description

"Day in the Life of a Cat" is an engaging and interactive web-based comic that takes you on a fictional journey through the eyes of a cat. The story revolves around the cat's quest to find its food, offering a unique and entertaining perspective on daily life. Our goal is to create a visually attractive and enjoyable comics website, exploring the potential for a fun and interactive guide to the NYUAD campus.

Concept and Theme

The implementation of this concept involved a collaborative effort to bring together illustration and real-life photography. The frames of the story were crafted by combining illustrations of the cat with photographs of the NYUAD campus. This style although not new, as used in the cartoon My Dad is a Dragon" for example, gives the story a bright and light energy, also providing a different perspective to look at mundane daily life events.

Website Interaction

The website integrates interactive features to craft an immersive user experience. The page-turning interaction mirrors the experience similar to traditional comic reading. In addition, the scrolling animation also assists in maintaining users' attetion. The website also features a sound element which can be turned on or off by the user in order to offer an immersive experience while also considering user experience.

Reflection

The initial concept centered around utilizing surrounding materials and real-life characters, with a specific focus on the campus cat, to create a captivating fictional story. The integration of the campus cat into the narrative served as a way to connect the audience with the familiar environment of NYUAD. By adhering to McCloud's comic principles, our project has successfully achieved storytelling through effective closure, and a thoughtful integration of words and images. The application of these principles enhances the narrative flow and reader engagement, creating a cohesive and immersive storytelling experience. However, other improvements can be applied such as creating sound interactions or incorporating other types of users' interaction.

Technologies Used

For website:

  • HTML5
  • CSS
  • JavaScript
  • Tween.js
  • Linearinterpolation For illustrations and photos:
  • Adobe Illustrator

Work Allocation

Al Hammad, Redha:

  • Captured photographs of campus locations featured in the comics.
  • Crafted narrative content for the comics.

Gyawali, Avinash:

  • Developed the sprite sheet for page-turning interactions on the website.
  • Programmed the user interaction , scrolling mechanisms and audio toggle mechanicms.

Ngo, Tinh:

  • Illustrated the initial sketches for both the website and story.
  • Created the cat illustrations and integrated them with photographs.

Thanki, Jheel:

  • Incorporated the finalized illustrations into the website.
  • Coded the scrolling interactions for seamless user experience.

interactivecomic's People

Contributors

tauke190 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.