The Assignment
This assignment was completed in collaboration with a team of two computer engineering students for the Computer Animation course at UBC (CPSC426) in Feb 2019.
The task is to use the three.js and keyframes to develop and animate a scene that tells a very short animated story. Through this assignment, we gained a detailed understanding of keyframing, spline-based motion interpolation, and spline-based object deformations.
The Template
The template provided by the professor includes objects like a lamp and a pencil. We were encouraged to make changes to the “rigging” code for Luxo and the pencil in order to animate additional degrees of freedom that are not currently animated. We were free to include additional geometry, texture maps, additional animated objects and characters, and other three.js features to the scene.
And... Here is the scene we are creating👇👇👇I'd say we made some progress!
The Story
A long time ago in a galaxy far, far away, the astromech droid BB-8 and R2D2 discovered a lightsaber. Curious BB-8 wanted to unveil the mysterious force behind the lightsaber and had some interesting interactions.
The Scene
The scene includes three characters: BB-8 (geometry), R2D2 (a file object) and lightsaber (a texture map). We used a rotated skybox with a cube map to create the galaxy. The floor is a bent plane (sphere geometry) with Phong Material (diffuse map and bump map). We also added the sound effects for BB-8 and lightsaber.
The Motion
We changed the luxo completely to BB-8. It consists of a half-sphere as head, a full sphere as the body and a cylinder as the wire. BB-8 has 12 degrees of freedom, controlling the XYZ position of the body, XYZ rotation of the body, XYZ rotation of the head and XYZ position of the head. The head is linked to the body's XYZ position, so it will move along with the body but no rotation attached. It is able to do movements such as moving around with the rotating body, jumping and moving head to express the feeling. We have over 50 keyframes for BB-8's animation.
For lightSaber, we updated the position control function, added control over 4 control points, x,y position, and rotation around the z-axis of the lightsaber.
R2D2 we simply used a cosine function to update its x position. It can do simple movements such as rotating its head and jumping around.
THE ANIMATION
Several principles of animation were applied to the motion:
We used staging to guide the viewer's eye and draw attention to what's important within the scene. The main characters were BB-8 and a lightsaber. The movement of R2D2 was kept to a minimum.
We used squash and stretch to change the length of the lightsaber. Follow through and overlapping was applied when the characters are running across the scene. BB8's head is moving ahead of the body. When lightsaber ran away to the left, the body bent first, and then started to ran.
We used secondary action for BB-8's jumping. After it landed, the head would have a secondary action and go up again to emphasize the jumping action. Correct timing allows us to control the reaction of BB-8 and lightsaber. We used anticipation when the lightsaber twitched its body and pointed to BB-8 before the lightsaber started to chase the BB-8.
The Demo
(screen captured animation with additional sound mixing in Adobe Premiere)
The Contributions
I am responsible for coming up with the story, implementing the character, the environment, and droids' keyframe animation.
My partner is responsible for the animation of the lightsaber.
The Source Code
The Reference