5. Animation Tatsuya Yatagawa

What is “animation”? n Individual picture frames updated very quickly n Old motion picture※ in Japan (1907) Computer Graphics Course @Waseda University YouTube: https://www.youtube.com/watch?v=aUS30ya14wY ※ Motion picture is directly translated to “活動写真” (katsudo-shashin), but it means slightly different one from motion picture (it’s movie) in English. Copyright

What is “animation”? n Stop motion animation n Photographing scene while incrementally updating it. n Nowadays, it is almost replaced by “computer animation”. Computer Graphics Course @Waseda University YouTube: https://www.youtube.com/watch?v=wT5WUjueWr4 Copyright

Current computer animation n The Tale of the Princess Kaguya (Studio Ghibli Inc. 2015) Computer Graphics Course @Waseda University Movieclips Film Festivals & Indie Films (YouTube): https://www.youtube.com/watch?v=9lDrkokymLQ Copyright

Current computer games n Unreal Engine 5 (demo running on PlayStation 5) Computer Graphics Course @Waseda University Epic Games (YouTube): https://www.youtube.com/watch?v=qC5KtatMcUw Copyright

Frame rates in CG animation Computer Graphics Course @Waseda University Type Frame rates Made with TV animation 8 - 12 fps Hand drawing / CG Movie 24 fps Mostly CG (offline rendering) Video games 60 fps CG (real-time rendering) • Video games require interactivity → real-time rendering • Highly parallelized processing using GPU is more effective CPU vs GPU? See the movie below! https://www.youtube.com/watch?v=-P28LKWTzrI

Basics of computer animation n Camera effects n Update camera and projection matrices n e.g., dolly zoom (both camera/projection matrices updated) n Rigid transform to objects n Controlled by model matrix Computer Graphics Course @Waseda University

Goal n Simple rotation of two cubes Computer Graphics Course @Waseda University Source code https://github.com/tatsy/OpenGLCourseJP/tree/master/src/animation

Animation in GLFW n 1 frame corresponds to 1 while loop Computer Graphics Course @Waseda University 1 frame

Update animation parameters n Method for parameter update n User-defined method for updating parameters n Call once per while loop Computer Graphics Course @Waseda University

Apply model matrix n Apply object rotation to model-view matrix Computer Graphics Course @Waseda University Rotate cube by theta (in degree)

Separate cube drawing method n For convenience, separate method to draw cube Computer Graphics Course @Waseda University

Further settings n Control FPS (frames-per-second) n Control time interval between successive draws n Enable current FPS checking n Show FPS to window title n Individual animation controls to objects n One rotates 1 degree, the other rotates 2 degrees, etc. Computer Graphics Course @Waseda University

Control FPS n Check time interval after previous draw n Use glfwGetTime to measure the time interval n If time is above (1 / FPS), then draw again Computer Graphics Course @Waseda University

Show current FPS to window title n glfwSetWindowTitle is available n Use sprintf (*1 to setup title text n Pass title text to glfwSetWindowTitle Computer Graphics Course @Waseda University *1) Visual Studio needs “#define _CRT_SECURE_NO_WARNINGS”

Per-object animation control n Each of two cubes is moved differently n 1st cube rotates 2 degree of angle in 1 frame. n 2nd cube rotates 1 degree of angle in 1 frame. Computer Graphics Course @Waseda University How can this be achieved?

Is it easy? Computer Graphics Course @Waseda University // Rotate 1st cube and draw! glRotatef(theta * 2, 0, 1, 0); drawCube(); ... // Rotate 2nd cube and draw! glRotatef(theta, 0, 1, 0); drawCube(); This is a stupid solution! Take care the lifetime of “glRotatef”.

OK, it’s so easy! Computer Graphics Course @Waseda University // Rotate 1st cube and draw! glRotatef(theta * 2, 0, 1, 0); drawCube(); ... // Rotate 2nd cube and draw! glRotatef(theta, 0, 1, 0); drawCube(); ← Matrix rotates 1st cube by (2 * theta) ← Matrix rotates 1st cube by (theta + 2 * theta) → Matrix multiplication is accumulated! This is a stupid solution! Take care the lifetime of “glRotatef”.

glPushMatrix / glPopMatrix n Manipulate “matrix stack (= LIFO)” (c.f., queue = FIFO) n glPushMatrix → Stack a new matrix on the top n glPopMatrix → Pop the matrix on the top Computer Graphics Course @Waseda University Camera matrix gluLookAt Camera matrix glPushMatrix Identity matrix glRotatef Camera matrix Rotate matrix glPopMatrix Camera matrix

Snippet for per-object animation Computer Graphics Course @Waseda University

Result Computer Graphics Course @Waseda University

Practice n Practice 5-1 n Check what happens if you set large FPS? n Hint: For example, you can set FPS more than 120? Computer Graphics Course @Waseda University

Practice n Practice 5-2 n Implement a simple animation of clock using glPushMatrix / glPopMatrix. n Hint: Use thin triangles/rectangle for second hand, minute hand and hour hand. n Hint: To get current time, “localtime()” in C can be useful. Computer Graphics Course @Waseda University

_CRT_SECURE_NO_WARNINGS n Macro to disable compile error for some methods deprecated in Visual Studio n This affects sprintf, fprintf, scanf, fscanf, localtime, etc. n Specify this macro to either of following two: n Property sheet → “C++” → “Preprocessor” → “Preprocessor definition” n Topmost line of source code in which you use above methods. Computer Graphics Course @Waseda University