Echoes of Our Step
In this project I created an animation by experiencing how the code control work in after effect. The animation is about how human activities has created innevitable impact to the environment. And I connected it to P5 so that the video will play when human enter the scene so they can see the impact of their action.
Tools: Adobe After Effect, Adobe Illustrator, P5.js, ml5.js
Gallery
Video Demonstration
Concept
Background
The ideas is to create an interactive animation which projects how human activity has impacted the environment. I designed 6 scenes, to show how human activity impacted different areas of the environment.
User Interaction
The animation would be a turning effect, with one side showing the scene before human interaction, and the other side showing the scene after the impact. It will turn when audience enters the screen, and turn back when they leave, to make them understand their impact through this interaction.
Process
Planning the Scene
Tool: Figma
Planned the visual form and color of the before and after scene so the UI looks better overall. Total of 12 graphics are created with 6 of it representing the scene before human interaction, the other 6 corresponds to the scene after the impact.
Drawing the Graphic
Tool: Adobe Illustrator
Using pen tool to create graphics in separate layers of the AI file.
Building the 3D Scene
Tool: Adobe After Effect
Building the 3D scene in After Effect, and connecting it to mother layers to prepare for the turning effect.
Adding Animation
Tool: Adobe After Effect
Using code to add looping animation to each component. This includes random wiggle, changing amplitude, changing sclae, rotating, etc.
Turning Animation
Tool: Adobe After Effect
I learned this way to use code and effector from this YouTube video: https://www.youtube.com/watch?v=nE9l37cs8Fs&t=916s. Then I adjusted the code to make it only turn half way and stop the turn back to create my final videos.
Final Turning Animation
Connect to P5 to create interaction
Tool: Adobe After Effect
I've used the ml5.js library to detet it when people enters the camera. And if the person enters from left side, it will play the video that turn from the left, and when the person enter from the right side, it will play the video that turn from the right, so it feels like it is the person that affected it. It will turn back 3 seconds after the person left the camera. When nobody is in the camera, it will repeat the animation of the before video.
