Two Sides is an interactive video, an interactive film, and an animation piece; users click on the screen to switch between film and animation. Two Sides incorporates animation, illustration, videography, and coding. This project aimed to show a juxtaposition between film and animation. Through colour and rotoscoping over the film footage, I am adding or removing elements where necessary for the animated section to emphasise this. The interactive aspect of the video highlights the aim and becomes an engaging tool for viewers.
Process
The design process included planning, filming, rotoscoping and coding. I Filmed areas in London. Doing this process first would help with the animating since I was rotoscoping over the video. I then edited the two videos to be in sync to prepare for the code. I would position the videos on top of one another, using HTML and CSS, then with a javascript function, include a mouse click and change in opacity to give the desired effect of the user clicking the screen, and it switches from animation to film.
Filmed and edited video
Animation - Rotoscoping
Introduction - Using AfterEffects
css Screenshot
HTML and JS code