This is to confirm that the work is entitled “City, Caught in Nets: An Interactive Illustration”. City, Caught in Nets: An Interactive Illustration,” where I had the opportunity to use not only my visual design skills, but also my previous web development skills. I would also like to thank faculty from the Department of Design, IIT Hyderabad – Dr.
I would like to express my gratitude to my friends and family who have always understood and encouraged me.
Abstract
Introduction
The form of art that changes itself depending on the viewer's interaction with the art itself. There are various forms of interactive art such as installation art, interactive architecture, interactive film, interactive storytelling and internet art. The idea of web-based interactive illustration is similar to net art, where the viewer can interact with the artwork and discover the story by interacting with different objects on the page.
It grabs the user's attention and keeps them engaged with the product and makes the presented information easier for the user. Animations for the web can be made with the help of gifs, flash animations, CSS animations and using JavaScript libraries. Static animations can be achieved using GIFs and CSS animations, while JavaScript is used for dynamic animations.
Mumbai, also known as Bombay, the capital of the state of Maharashtra, India; is located in the western coastal region of India. It is a country where most start-ups and businesses live, which not only deal with the local markets, but also many products manufactured or recycled in Dharavi are exported around the world.
Literature Review
GeoCities was the web hosting service founded in 1994 that allowed the user to create home page and place it in thematically organized neighborhoods. However, with the end of the service, the millions of web pages disappeared from the Internet. Later, the Berlin-based designer Cameron Askin, through this project called Cameron's world, tried to extract text, images gifs from the archives of GeoCities and put them in an accessible web portal.
The work is a tribute to web pages in the 1990s, recalling the visual aesthetics of the era. The Boat is a graphic novel Based on the story 'The Boat' by Nam Le, adapted by Matt Huynh. Alexander Perrin, an Australian illustrator and interactive media developer, created this project called Short-trip with the help of his detailed rendering techniques.
Sarcastically called an “amateur data collector kit,” Probe Kit turns your Wi-Fi card into a “net” that captures the fluttering probe requests (data packets) sent out by the wireless devices of those around you. Although the probe kit serves as a work of art installation, the website that details the installation shows the same fluttering butterflies in the background across the entire screen.
Initial Work
Before deciding on the storyline for the project, a lot of time was spent exploring the possibilities for creating interactions via the Internet. I looked around at the examples, read a lot of articles and followed some tutorials to learn the latest web technologies. The emphasis was on learning coding techniques that can be used later in the project.
This was the first attempt where I used a vector image and tried SVG and JavaScript animation to achieve simple interactions. I also tried changing the background color of the canvas and moving the position of the clouds. Orbs roll around the screen at will until they touch one of the sides of the screen, then change their direction.
I used anime.js for this example, which is a lightweight JavaScript library to animate the line drawing to depict a simple scenario of a city skyline. It was a demo based on Galaxy theme where 3-D animation with WebGL was tried. A cube map image of the milky way was used to obtain the background in 3 dimensional view, small spheres were created in Space, indicating the stars using three.js.
As a new exploration, I started working on 'City, Caught in Nets'. I started by illustrating the main image for the title. Since the text was about the city of Mumbai, which emphasizes the city's relationship with the coastal area, I thought about merging the city map with the image of fish. City, trapped in featureless seas, lungs corroding in airy spit, still blown and washed ashore in seasick Engleesh sea, brooding real estate and black basalt.
Again, as a quick start, I tried to create visuals for the title "City, Caught in Net" to use on the landing page. The digital version of the sketch used for this demo didn't look very promising. The interactions were good but needed a lot of improvement to make the immersive effect happen.
Methodology
While the text "City Caught in Nets", which I took as a reference, talks about its close connection with the coastal region, I thought I would take a closer look at the specifics of the city. As mentioned in the introduction, Koli are people who belong to the fishing community living in the coastal areas of Mumbai. Today, due to urbanization, the sea and land nearby are occupied by urban dwellers, traffic and skyscrapers, which has affected the community and their only source of livelihood.
The fact that these people, apart from the not so favorable circumstances, still work and struggle for their existence became an inspiration for my work. Another place that caught my attention was the spirit of people living in Dharavi slums, known for the businesses that trade around the world. After much brainstorming I figured out there is a lot that can be shown, was shown through illustrations by other artists, about the city.
I tried to understand the not so famous but unique things from the city that make it interesting and can be used for illustrations. Apart from Kol and People from Dharavi, I thought to include the people traveling in the local train and the rush and rush that can be seen near the local train station areas during peak travel hours. Image: Illustration of ladies and men traveling in bars Image: reference image, ladies traveling on a train.
55 For the interior scripts, I wanted the same handwritten look that would match the characters. Since it was necessary to understand that these characters are talking to the audience, I thought of using a font that gives a very rough scribble-like effect. I tried using the Devnagiri font, however I couldn't find the exact font that will fit the characters.
The image with the text written on it was then processed to be used for the website. Whereas for the animations that take place on interactions with the visuals, I have used CSS transition, transforms, animation effects along with JavaScript. To improve the interactive, I planned a few interactions like giving the details of the boat by moving the mouse cursor over the boat, going to another theme-based scene by clicking an object from one of the scene, layered movements of object by scroll left / right, scene change along with the scroll.
Due to the time constraints, I tried to use the basic animation techniques using HTML, CSS and JS. Later, the whole process became iterative, where I would start coding artwork for a screenplay, adapt it for the web, and use it on the site.
Final Work
Perceptual Feedbacks
Since the first version, I have received feedback from different people by allowing them to interact with the site without my intervention. I studied how they use the website, how they navigate and click on different areas of the website. It gave me the clues of what I can do next to make it more interesting and user-friendly.
They had no idea about the website, it seemed different and they had no idea until they were told to scroll. To address this, an introductory section has been added, giving them an idea of the website and requiring them to scroll through to get started. As the viewer learns more about the interactivity and how to navigate, they begin to click on each element to see if anything interesting pops up.
Scope & Future Work
Due to time constraint, I could not try the 3D animation techniques in the coding, which can be added in the future to give more impactful and engaging effects. More of such scenarios can be added to make the site more relevant to the people who know Mumbai.
The Post-display Condition of Contemporary Computer Art, af Toby Juliff & Travis Cox https://emajartjournal.files.wordpress.com/2012/11/cox-and-juliff_the-post-display- condition-of-contemporary-computer- art.pdf. The Boat', af Nam Le, tilpasset af Matt Huynh http://www.sbs.com.au/theboat/.
