cs349 - s10 - Lecture 30

# CS349 - Implementing User Interfaces - Spring 2010

## Public Service Annoucements

1. Assignment 3 reminder.
2. Assignment 4.

# Lecture 30 - Interfaces to Geometry (Real GUIs)

## Representations of Objects

Last class we introduced a model of a graphical object that has three parts:

1. A basic object that fits within a unit square.
2. A transformation matrix.
3. The inverse of the transformation matrix.

### The Transformation Matrix and its Inverse

Suppose the object is defined by N points,

• or equivalently by 1 point and N-1 vectors.

We define it transformation matrix as follows

1. Each of the the points/vectors is multiplied by the modelling matrix Mm.
• The object now has its origin at the origin of screen coordinates.
2. Rotate the object until its coordinate axes, which are vectors, coincide with the coordinate axes of the super-object.
• Translate the object to make its origin coincide with the highest level super-object of which it is a part.
• The matrix is now Mt1*Mr1*Mm
3. Repeat level by level until you get to the level of the object itself
• The matrix is now Mtj*Mrj*Mt(j-1)*Mr(j-1)*...*Mt1*Mr1*Mm
• This is used for drawing.
4. The inverse matrix is Mminv*Mr1inv*Mt1inv*...*Mrjinv*Mtjinv.
• This is used for picking

## Interacting with Transformations

#### What's needed to define each transformation

1. Translation
• dx, dy - how far to translate in each direction
2. Rotate
• x, y - the centre of the rotation (its fixed point)
• theta - the angle of rotation

Hint. In the math.h function sin(t) t is measured in radians.

• Basic matrix rotates about the origin.
3. Scale
• x, y, m - the line perpendicular to the direction of scaling (its fixed points)
• s - the amount of scaling that occurs.
• Basic matrix scales along the x-axis, perpendicular to the y-axis.
4. Reflection
• x, y, m - the line in which reflection occurs (its fixed points)
• Basic matrix reflects in the y-axis.

Each of the parameters of every transformation must be obtained (usually from the user) in order to update the model.

#### Example: Scaling

Interface

• We need to get four numbers

Remember the basic scaling matrix

1. It scales along the x-axis; its fixed points are the y-axis.
• points move parallel to the x-axis;
• the farther from the y-axis, the farther they move.
2. To scale generally we will obtain four parameters that determine the transformation
• x, y, m, s

How do we use these parameters to obtain the right transformation matrix?

1. Transform the line to coincide with the y-axis
2. Use s to scale along the x-axis
3. Transform back to the original coordinate system
3. Transform the line to coincide with the y-axis
• x, y is on the line, so translate x, y to the origin.

Now the line goes through the origin.

• m is the slope of the line, dy/dx.

m is tan(t) where t is the angle the line makes with the x-axis.

(90 - t is the angle the line makes with the y-axis.)

Rotate the line into the y-axis

Hint. There are two choices for the angle t. (See atan() in the math library.) Which choice you make has a profound affect on the operation of the user interface for scaling. Please understand what it is and make you interface with a considered answer to this problem.

4. Scale using the basic scaling matrix.
5. Invert the transformations that brought the line into the y-axis.

#### The Circle

What we've been doing is based on linear algebra. (Really affine algebra.)

• It is linear because it commutes with linear operations
• vector scalar multiplication

Drawing a line is a linear operation on its end points.

• We can transform the end points,

then draw, and

• the entire line goes to the `right' place.

`Right' means `where the user expects'.

Thus, we can draw an object made of straight lines by

• tranforming the end points of the lines,
• then drawing lines that connect them

This does not work for curves, like ellipses

• Why?
• What can you do instead?

### Drawing

When we draw on the screen we use the painter's algorithm

• ```for ( backmost to frontmost ) {
draw( whatever );
}
```

`whatever' consists of two parts

1. a basic shape
2. a transformation
• In assignment 5 you see code specifically designed to draw a square, which would occur in a draw procedure like
```void draw( whatever ) {
switch ( whatever.type ) {
case square :
drawSquare( whatever.transform );
...
}
}```

This code takes advantage of commutation between interpolation (for drawing the inside and the edges) and transformation (for finding the ends of the edges).

• This code pretty obviously generalizes to convex polygon drawing. And convex polygon drawing is easy to put into graphics hardware.
1. Put the transform into a hardware matrix multiplier.
2. Push the vertices through one after another.
3. Pipeline the vertices straight to interpolation hardware.
4. Scan convert to get the fill, if desired.

### Picking

#### Picking = Using a pointing device to select a geometric object.

Picking has two variations

1. Select topmost versus select all.
2. Select with point versus select with area.

Picking is strongly related to drawing

• ```for ( frontmost to backmost ) {
if ( inside( whatever ) ) {
select( whatever );
}
}```
• The inside test is also strongly related to the drawing code.
• draw - find the points inside a shape.
• inside - find if a point is inside a shape.

Both drawing and picking must be fast.

1. Drawing must meet limits imposed by perception of simultaneity.
2. Picking happens when the user's attention is focussed at the pointer.

We must complete

1. picking
2. redrawing

fast enough that the user perceives no lag.

Three important ideas to speed up picking. Remember that almost all inside tests fail so failing fast is important.

1. Inside tests that are ANDs can terminate at the first failure. E.g. Each line segment generates a half-plane test.

(Not necessarily true in hardware.)

2. Make most failures fast. E.g. first test against a bounding rectangle.
3. Skip most of the failing tests. E.g. use an auxiliary data structure like a quad-tree.

How do we apply these ideas to testing for inside a Jinn's bottle?