Trigonometry, Coordinate system and

VectorsComputer Graphics

Trigonometry

• Tri-gon-metry: measurement of three sided polygons i.e. triangles• Angular measurement: degree and radians• The degree (or sexagesimal) unit of measure derives from defining

one complete rotation as 360◦• Each degree divides into 60 minutes, and each minute divides into 60

seconds.• The radian of angular measure does not depend upon any arbitrary

constant—it is the angle created by a circular arc whose length is equal to the circle’s radius.

Trigonometry

• The perimeter of a circle is 2πr, 2π radians correspond to one complete rotation. As 360◦ correspond to 2π radians, 1 radian equals 180◦ /π which is approximately 57.3◦

Trigonometry

Trigonometric Ratios (For unit Circle)

Trigonometric Identities

cgvr.korea.ac.kr

Coordinate System• Coordinate Reference Frames• Cartesian coordinate system

• x, y, z

• Non-Cartesian coordinate system• Polar, Spherical, Cylindrical

2D Cartesian Plan

• The Cartesian plane provides a mechanism for visualizing pairs of related variables graphically. The variables are normally x and y, as used in functions such as

y = 0.5x + 1.• The set of points create a familiar straight line associated withequations of the form y = mx + c.

2D Cartesian Plan

• Any point P on the Cartesian plane is identified by an ordered pair of numbers (x, y) where x and y are called the Cartesian coordinates of P.• X being independent variable and Y, the dependent.• a, b, c are used to represent the coefficients

y = ax2 +bx +cThe point where Cartesian coordinates intersect, makes an angle of 90 degree, known as Origin.

Function Graph

• Linear functions are straight lines• quadratics are parabolas• cubics have an “S” shape• trigonometric functions often possess a wave-like trace.• Such graphs are used in animation to control the movement of

objects, lights and virtual camera

A function curve relating brightness to frame number

A function curve relating brightness to frame numberan example where the horizontal axis marks the progress of time in animation frames, and the vertical axis records the corresponding brightness of a virtual light source. Such a function forms part of the animator’s user interface, and communicates in a very intuitive manner the brightness of the light source for every frame of animation. The animator can then make changes to the function with the aid of interactive software tools.

Geometric Shapes

• In computer graphics, 2D shapes and 3D objects have a numerical description of some sort. Shapes include polygons, circles, arbitrary curves, mathematical functions, fractals, etc., and objects can be faceted, smooth, bumpy, furry, gaseous, etc.

Polygonal Shapes• A polygon is constructed from a chain of vertices (points). A straight line

is assumed to connect each pair of neighboring vertices; intermediate points on the line are not explicitly stored. There is no convention for starting a chain of vertices, but software will often dictate whether polygons have a clockwise or anticlockwise vertex sequence.

Arithmetical operations can be performed on coordinate points of polygon.

Double the values of x and y and redraw polygon: shape will be preserved but size of the polygon will double.

By dividing x and y by 2 will generate a smaller polygon with same shape.

Area of polygonal shape

• The area of a polygonal shape is readily calculated from its chain of coordinates. For example, given the following list of coordinates:

Distance Formula

Distance between two points

The theorem of Pythagoras (distance formula) is used to calculate the distance between two points. To find the distance between two arbitrary points P1(x1, y1) and P2(x2, y2). The distance Δx = x2 −x1 and Δy = y2 −y1. Therefore, the distance d between P1 and P2 is given by

3D Cartesian Plan

• To locate a point in space, 3D coordinate system is used

Right Handed axial system

Distance Formula for 3D

• The theorem of Pythagoras in 3D is a natural extension of the 2D rule. In fact, it even works in higher dimensions. • Given two arbitrary points P1(x1, y1, z1) and P2(x2, y2, z2), we

compute Δx = x2 − x1,• Δy = y2 − y1 • Δz = z2 − z1,• from which the distance d between P1 and P2 is given by

Euler’s Rule

In 1619, Descartes discovered quite a nice relationship between vertices, edges and the faces of a 3D polygonal object

Faces + vertices = edges+ 2.Example:Cube: 12 edges6 Faces8 vertices

cgvr.korea.ac.kr

Coordinate System• Coordinate Reference Frames

Cartesian coordinate system x, y, z

Non-Cartesian coordinate system Polar, Spherical, Cylindrical

Non-Cartesian Coordinate System

• Polar CoordinatesPolar coordinates are used for handling data containing angles, rather than linear offsets.

Non-Cartesian Coordinate System

The point (3, 4) have polar coordinates;

point P(x, y) has equivalent polar coordinates P(ρ,θ), where:

Non-Cartesian Coordinate System

• Spherical Polar Coordinatesthe point P(x, y, z) has equivalent polar coordinates P(ρ,φ,θ)

Non-Cartesian Coordinate System

For example, the point (3, 4, 0) has spherical polar coordinates (5, 90◦, 53.13◦)

Non-Cartesian Coordinate System

• Cylindrical coordinatesthe point P(x, y, z) has equivalent cylindrical coordinates P(ρ,θ,z), Where,

Example

For example, the point (3, 4, 6) has cylindrical coordinates (5, 53.13◦, 6):

Vectors

Introduction to vectors covers 2D and 3D vectors, unit vectors, position vectors, Cartesian vectors, vector magnitude, vector products, and area calculations. It also shows how vectors are used in lighting calculations and back-face detection.• Vectors provide us with some powerful techniques for computing

angles between lines and the orientation of surfaces. They also provide a coherent framework for computing the behaviour of dynamic objects in computer animation and illumination models in rendering.

Scalar quantity

• Scalar Quantity: a quantity that can be completely described by their magnitudes. For example, height, shoe size, length of tower etc.• In computer graphics, scalar quantities include colour, height, width,

depth, brightness, number of frames, etc. • Scalar quantities are represented by small alphabets.

Vector quantities

There are some things that require more than one number to represent them: wind, force, weight, velocity and sound, are just a few examples. These cannot be represented accurately by a single number. Example:Any sailor knows that wind has a magnitude and a direction. The force we use to lift an object also has a value and a direction.Velocity of a moving object is measured in terms of its speed (e.g. miles per hour), and a direction such as northwest. Sound, too, has intensity and a direction. Such quantities are called vectors. In computer graphics, vectors generally require two or three numbers, and these are the only type we consider.Vector quantities are represented by bold fonts.

2D vectors

• When a scalar variable is assigned a value, we use the standard algebraic notation:

x = 3• However, a vector can be stored as a column or as a row—and in this

text I use column vectors: 3

n = 5A row vector places the components horizontally. n = [3 5]

Graphical Representation of Vectors

As vectors encode direction, as well as magnitude, an arrow is often used to indicate direction, and a number to represent magnitude. Such a scheme is often used in weather maps.Using Cartesian coordinates, the line’s direction is determined by identifying the vector’s tail and then measuring its components along the x- and y-axis.

2D Vector with magnitude and DirectionThe vector r has its tail defined by (x1, y1) = (1, 2), and its head by (x2, y2) = (3, 4). Vector s has its tail defined by (x3, y3) = (5, 3), and its head by (x4, y4) = (3, 1).

• Two vectors r and shave the same magnitude butopposite directionsFind the direction and Magnitude of the vectors r and s

Magnitude of the Vector

The magnitude or length of a vector r is written |r| and computed using the theorem of Pythagoras:

Quiz # 1

• Calculate the magnitude and direction of the given vector having coordinates

(3, 5) and (9,6)Question 2: Find the polar coordinates of (5,7)