CSC 202 Intro. To Computer animation

1. CSC 202 Intro. To Computer animation By Uzoma James Chikwem Techniques and mathematical algorithms

2. The power of Problem Solving Salary of Mathematicians

3. Math in Computer Animation • Math is used to perform many Animation Techniques • Perception of Vision • Character Position & Effects • Object Motion • Texture Mapping • Mathematical Algorithms • Transformatoions • Vectors • Matrices • Curved surfaces • Polygons

4. Technical Background(Algorithms) • Section will cover: • Basics of computer graphic display pipeline • Coordinate spaces or systems • Transformations • Perspective • Mathematical Algorithms • 2D Space • 3D Space • Matrices • Polygons • Curves

5. Display Pipeline • Refers to an object created in it’s own defined space going through transformations to be displayed on screen. • Object space is where an object is originally defined. • World space is where the object can be viewed, or environment. • Eye Space simply relates to what the camera or viewer sees, which is transformed into image space. • Lastly the data is translated, rotated, and scaled into the screen space, or pixels.

6. Transformations, or change, in coordinates over time creates animation TRANSLATION IN 2D SCALING IN 2D • Point(x,y) MOVED by amount Dx, Dy to new location (x’,y’) • Point (x,y) enlarges, shrinks, reflects to new location (x’,y’)

7. Transformations, or change, in coordinates over time creates animation REFLECTION IN 2D • Scales an object inversely usually by multiplying by a negative scalar. • Flips an object off a point, line or plane • Very useful to know when modeling in 3D as well as animating in 2D

8. Transformations, or change, in coordinates over time creates animation REFLECTION IN 2D • These rules should help in • calculating new location.

9. Transformations, or change, in coordinates over time creates animation ROTATION IN 2D • Rotates Point(x,y) about the origin of the scene, not object. • Theta represents the angle of change. • To better visualize think of the unit circle used in trig class to help graph sine, cosine and tangent.

10. Transformations, or change, in coordinates over time creates animation ROTATION IN 2D • Remember graphing these in Precalc? • Now you get to visualize them and how each angle is used to animate rotation. • Remember these angles and their coordinates to help better understand.

11. Transformations, or change, in coordinates over time creates animation ROTATION IN 2D

12. 2D Coordinate system • Commonly used to graph algorithms to show • Constant motion • Acceleration/deceleration • No movement • Programming Math • Javascript • C++ • OpenGL • Python • Plenty more… for ( i = 0; i <= 1; i += 0.1 ) { x = i; y = i; … }

13. 2D Coordinate system for ( i = 0; i <= 1; i += 0.1 ) {   x = i;   y = i * i; } for ( i = 0; i <= 1; i += 0.1 ) {   x = i;   y = Math.pow( i, 4 ); }

14. Sine waves for smooth animation var counter = 0; // 100 iterations var increase = Math.PI / 100; for ( i = 0; i <= 1; i += 0.01 ) {  x = i; y = Math.sin(counter); counter += increase; } var counter = 0; // 100 iterations var increase = Math.PI *?? / 100; for ( i = 0; i <= 1; i += 0.01 ) {   x = i; y = Math.sin(counter); counter += increase; }

15. TRANSLATION TRANSFORMATIONs SCALE ROTATION