Rectangles DrawRectangle from points (x1,y1) and (x2,y2): x = min( - - PowerPoint PPT Presentation

Rectangles

DrawRectangle from points (x1,y1) and (x2,y2): x = min( x1, x2 ) y = min( y1, y2 ) width = abs( x1 - x2 ) height = abs( y1 - y2 ) DrawRectangle( x, y, width, height )

Ellipses

Mathematically, the points on the oval are given by ( x + r1*cos(angle), y + r2*sin(angle) )

How many points should we compute?

Ellipses

• Approximate by lines

Draw Oval with center (x,y), horizontal radius r1, and vertical radius r2: for i = 0 to numberOfLines: angle1 = i * (2*pi/numberOfLines) angle2 = (i+1) * (2*pi/numberOfLines) a1 = x + r1*cos(angle1) b1 = y + r2*sin(angle1) a2 = x + r1*cos(angle2) b2 = y + r2*sin(angle2) Draw Line from (x1,y1) to (x2,y2)

( x + r1*cos(angle), y + r2*sin(angle) )

Polygons

Stroke and Fill

• Two ways to make a shape visible in drawing

– Stroking it: like dragging a pen along the line – Filling it: means coloring all the points that are

contained inside that shape

Example: HTML5

• http://math.hws.edu/graphicsbook/source/canva

s2d/GraphicsStarter.html

• http://math.hws.edu/graphicsbook/source/canva

s2d/GraphicsPlusStarter.html

Transformations

• Viewing and modeling

– In a typical application, we have a rectangle made of

pixels, where an image will be displayed. This rectangle will be called the viewport.

– We also have a set of geometric objects that are defined

in a possibly different coordinate system, generally one that uses real-number coordinates rather than integers. These objects make up the "scene" or "world" that we want to view, and the coordinates that we use to define the scene are called world coordinates.

Viewport

T(x,y) = ( 800*(x+4)/8, 600*(3-y)/6 )

World and Object Coordinates

• A world coordinate system is more intuitive and useful than

pixel/viewport coordinates

• Along the same idea, if we have a complex object made of

many parts, it is useful to define an object coordinate system

• The transformation used to define the object in the world is

called a modeling transformation

Viewport and Object transform

Transforms are related

• Mathematically, the same effect can be

achieved by applying transformations at different stages

• Moving/scaling/rotating can be achieved as

both modeling transforms and viewport transforms

• http://math.hws.edu/graphicsbook/c2/s3.html#g

raphics2d.3.1

Graphics Pipeline

BasicTransformations

• Transformations are a central idea in CG
• Basic transforms:

– Translation (moving objects) – Scale (changing the size of objects) – Rotation (turning objects) – Shear (tilting objects)

• These are all affine

Affine: parallel lines remain parallel after transform

x1 = a*x + b*y + e y1 = c*x + d*y + f

Translation

• A translation transform simply moves every point

by a certain amount horizontally and a certain amount vertically. If (x,y) is the original point and (x1,y1) is the transformed point, then the formula for a translation is:

– x1 = x + e – y1 = y + f

where e is the number of units by which the point is moved horizontally and f

Translation

Scale

• A scaling transform can be used to make
• bjects bigger or smaller. Mathematically, a

scaling transform simply multiplies each x- coordinate by a given amount and each y- coordinate by a given amount x1 = a * x y1 = d * y

Rotation

• A rotation transform, for our purposes here,

rotates each point about the origin, (0,0). Every point is rotated through the same angle, called the angle of rotation.

x1 = cos(r) * x - sin(r) * y y1 = sin(r) * x + cos(r) * y

Shear

• A shear will "tilt" objects. A horizontal shear will

tilt things towards the left (for negative shear) or right (for positive shear). A vertical shear tilts them up or down.

A horizontal shear: x1 = x + b * y y1 = y for some constant shearing factor b. Similarly, a vertical shear with shearing factor c is given by the equations x1 = x y1 = c * x + y

Window-to-Viewport

• The last transformation that is applied to an
• bject before it is displayed in an image is the

window-to-viewport transformation, which maps the rectangular view window in the xy-plane that contains the scene to the rectangular grid

• f pixels where the image will be displayed

scale( width / (right-left), height / (bottom-top) ); translate( -left, -top )

x1 = width / (right-left) * (x-left) y1 = height / (bottom-top) * (y-top)