1

CMT2300 ----Fundamentals of Computer Graphics

Revision

Dr. Xiaohong Gao

BG---Room 2C23

www.cs.mdx.ac.uk/staffpages/xiaohong/cmt2300

Week 11

2

Course work --- Project : Animation

• Between 1 to 4 minutes

• To be submitted by May 2, week12.

• Please include a self-addressed-envelope to get feed back.

• To achieve distinction

• some extra features apart from lectures should be included, such as

• Visual C++ features: buttons, menus, etc..

• Animation techniques: 3D, Double Buffering, etc..

3

Exam

• 3 questions chosen from 5 questions.

• Each question carries 25 marks.

• Total marks are 75.

• Review lecture notes.

• Review Seminar exercises.

• www.cs.mdx.ac.uk/staffpages/xiaohong/cmt2300.html

4

1. Review of Previous lectures (1/3)

• Output primitives

• Geometric Transformations

- points

- lines

- curves

- translation

- scaling

- rotation

5

1. Review of Previous lectures (2/3)

• Matrix representation of transformations

• Animation Techniques

- translation

- scaling

- rotation

- reflection

- Timer

- Event

- Tweening

- Morphing

- Double buffering

6

1. Review of Previous lectures (3/3)

• Viewing Pipeline- 2D view pipeline

- 3D viewing pipeline

• Useful Visual C++ Methods and Functions

- OnDraw

- MoveTo

- LineTo

- SetTimer

- pDC->Ellipse(*)

- pDC->Rectangle(*)

7

2. Output primitives

• the basic building blocks for pictures are referred as output primitives.

• Routines for generating output primitives provide the basic tools for constructing pictures.

• E.g., character strings, “a”, “Welcome to CMT2300”.

• Geometric entities --- points, straight lines, curved lines, filled areas (polygons, circles, etc.).

8

Example 1: Mathematical representation of lines and circles

Lines: y = a x + b

Cicles: x2 + y2 = r2 //r is the radius

9

3. Geometric Transformation (0)

• Geometric Transformation refers to changes of objects in orientation, size, and shape.

• These changes alter the co-ordinate description of objects.

• It is very useful in computer animation in altering or manipulating displays.

10

3. Transformation ---- Scaling

• scaling:

– alter the size of an object

– objects are scaled according to scaling factors sx, sy

original Change of sx Change of sy

11

3. Transformation --- translation (2)• A translation is applied to an object by re-positioning it along a straight-line path from one co-ordinate to another.

• To translate a two-dimensional point by adding translation distances, tx, ty, to the original co-ordinate.

• Translation is a rigid-body transformation that moves objects without deformation.

(0,0) (0,0)

12

3. Transformation --- Rotation (3)

• Rotation is a 2D transformation.

• Rotation is to reposition an object along a circular path in the a xy plane.

• Objects rotated according to angle of rotation theta ().

• Rotation is by a given angle ()

- if >0, rotation is anticlockwise

- if <0, rotation is clockwise

13

3. Transformation ---- Reflection (4)

• A reflection is a transformation that produces a mirror image of an object with reference to a specific line.

• This line can be thought as a mirror.

• The points are transformed by being moved to their corresponding positions on the other side of the mirror.

• This line can be a standard line, such as x-axis, or y-axis.

• This line can also be an arbitrarily defined line.

14

4. Matrix Representation of Transformations (1)

100

00

00

y

x

s

s

S

100

10

01

y

x

t

t

T

100

0cossin

0sincos

R

T(tx, ty) =

S(sx, sy) =

R() =

15

4. Matrix Representation of Transformations (2)

• Reflection about the line y = 0, the x axis, the matrix is

100

010

001

• Reflection about, the y axis, flips x coordinate, the matrix is

100

010

001

16

4. Matrix Representation of Transformations (3)

• Reflection about, the origin and passes origin, the matrix is

100

010

001

17

Example 2: For each of the following transformations, sketch the final position of the house after 2 transformations:

1). Translate (50, 0) then rotate (0,0, 90)2). Rotate(0, 0, 90) then translate(50, 0)

-25-50 25 50

25

-25

18

-25-50 25 7550

25

50

-25

-50

1

2

1). Translate (50, 0) then rotate (0,0, 90)

19

-25-50 25 7550

25

50

-25

-501 2

1). Rotate(0, 0, 90) then translate(50, 0)

20

5. Animation techniques (1) ---- Timer

Example 3: Explain the usage of CTimer object in Visual C++ using the following line.

SetTimer(1, 10, NULL);

• CTimer object is used to control events• It is very useful for computer animation.• SetTimer(1,10,NULL) means timer fires every 10 milliseconds. • The above line should be created on OnCreate() method or others.• Also, a windows message handler has to be added to CxxView class.

• Invalidate(TRUE) is to be added to CxxView “OnTimer()” method.

• Or Invalidate( TRUE) has to be added to “OnDraw()” method.

21

5. Animation techniques (2) ---- Storyboard

Example 4: Explanation of animation “storyboard” in terms of key frames and the usefulness of the key frames in designing sequences.

• Storyboard in computer animation is an outline of the action.

• It defines motion sequence as a set of events that are to take place.

• Depending on the type of animation to be produced, the storyboard could consist of a set of rough sketches or key frames.

• A key frame is a detailed drawing of the scene at a certain time in the animation sequence.

22

5. Animation techniques (3) ---- Morphing

• Transformation of objects shapes from one form to another. •• Morphing method can be applied to any motion or transition involving a change to shape.

23

5. Animation techniques (4) ---- Double buffering

• Viewer never sees blank screen (unless desired as part of the animation)• Viewer does not see construction of scene regardless of complexity of scene.• Most graphics systems provide fast methods to swap buffers, so better animation achieved without having to reduce number of frames (i.e. avoids problems of introduction of pause).• The technique can be scaled up with multiple buffers for pre-construction of scenes when complex scenes would slow down animation if attempted in real time.

Example 5: Explain how double buffering can overcome some of the problems of the draw-clear-redraw methods of animation.

24

6. The 2D & 3D viewing-transformation pipeline

Construct World-Coordinate Scene Using Modeling-

Coordinate Transformations

Convert World-Coordinates to

Viewing Coordinates

MapViewing Coordinates to

Normalized Viewing

Coordinates using Window-

Viewport Specifications

Map Normalized Viewport to

Device Coordinates

MC

DCNVC

VC

WC

25

7. Visual C++ Methods (1)

Example 6: draw a line y = x

pDC->MoveTo (10,10);

pDC->LineTo(50,50);

26

8. Visual C++ Methods (2)

Example 6: Briefly describe each of the following Visual C++ graphics functions from device contents, including the parameters they accept and sketching an example for the application of each function in a program:

MoveTo Rectangle Ellipse

27

• MoveTo is to move device context to the point, • such as pDC->MoveTo (0,0)•• Rectangle is to draw a rectangle:• e.g., pDC->Rectangle(0,0,100,100)

• Ellipse is to draw a ellipse confined by a rectangle, e.g.• CRect tt(0,0,100,100);• pDC->Ellipse(tt);

28