These full-page sheets with four AR markers on the corners are for drawing the background scene of a movie. They have a certain orientation (labeled with arrows).
The object cards are smaller paper cut-outs for drawing the dynamic characters of the movie. They can be of different types (differentiated with colored boundaries) for each character in the movie. Each character can also have different forms, which should be drawn on the same card type (color).
Open https://krithik-ranjan.github.io/cartoonimator/app.html.
The first step of creating your movie with Cartoonimator is to draw! We can begin by conceptualizing the movie and drawing backgrounds on the scene sheets and characters and their variations on the object cards. The example below shows scenes for a skiing movie and a skier on the object card with one variant, as well as a snowball on another object card.
Once we have completed drawing some parts of the movie, it’s time to take pictures! Start with placing your first scene on a surface and tapping the “Add Scene” button on the app to take a picture of the scene. We’ll see a camera view, in which we can capture the scene sheet from any angle, once a green check mark appears on the top-left. On clicking the camera icon, the first scene will be added to the animation starting at 0s.
Every movie created with Cartoonimator is made up of “Keyframes”, which define a few intermediate frames of the movie. For example, we can have one keyframe can specify the position and rotation of the characters at 0s, while another could specify at 1s – Cartoonimator will fill all the frames in between using interpolation (see figure below). Each Keyframe can have multiple different characters at varying positions and orientations, which can be defined simply by placing the object card on top of the scene as shown below.
Each scene should have its own keyframes that describe the animation on top of that scene’s background. To add a keyframe, press the “Add Keyframe” button under the scene, and we will be able to capture the keyframe similar to capturing the scene when the green check mark appears.
Since a keyframe defines the animation at a point in time, each keyframe has an associated time at which the keyframe appears (called its timestamp). After capturing the keyframe, we’ll find that its timestamp has been set automatically in the box next to the “Keyframe” label. We can modify the timestamp of each keyframe to make different parts of the animation appear faster/slower. The timestamp of the last keyframe determines the length of the animation!
After adding at least two keyframes, we can play the progress of the animation by pressing the play button in the bottom center. The app will move to a new page and show your animation! You can also download it to your phone by pressing the download button on the bottom right.
Cartoonimator system is designed to have up to 10 different objects in a movie. Each keyframe can describe the position and rotation of one or more of these objects, as shown below.
Your movie doesn’t have to be limited to one background scene! As you grow the movie, you can add different scenes, each of which serves as a part of the overall movie. Just like for the first scene, we can add more using the “Add Scene” button, and then add one or more keyframes for the scene.
