cs349 - s10 - Lecture 29
CS349 - Implementing User Interfaces - Spring 2010
Public Service Annoucements
- Assignment 3 reminder.
- Assignment 4.
Lecture 29 - Drawing, Picking
Graphical User Interfaces
Last lecture we talked about points and vectors, how they transform.
How does this help us make graphical user interfaces (more precisely,
interfaces that use direct manipulation)?
Let's think for a minute about assignment 4. What needs to be done?
- using painter's algorithm and Xlib - need to know parameters like
x, y, width, height
- depends on an inside test
Here's how we do it.
- Base all things you draw on a small number of basic figures, such as
- a standard line running from (0, 0) to (1, 0)
- a standard rectangle with corners at (0, 0), (0, 1), (1, 1), (1,
- a standard ellipse with zero eccentricity (a circle), centred at
(0, 0), of radius 1.
- and so on.
- Use transformations to turn this into any quadrilateral shape
- represent transformations by matrices 3x3
- translation by dx, dy
- point: (x, y, 1) -> (x + dx, y + dy, 1)
- vector: (x, y, 0) -> (x, y, 0)
- Matrix that does this must do its thing in the bottom
- rotation by t
- point: (x, y, 1) -> (x cos(t) - y sin(t), x sin(t) + y
- vector: (x, y, 0) -> (x cos(t) - y sin(t), x sin(t) + y
- Matrix that does this must do its thing in the 2x2
- reflect about y-axis
- point: (x, y, 1) -> (-x, y, 1)
- vector: (x, y, 0) -> (-x, y, 0)
- Matrix that does this must do its thing on the diagonal of
the 2x2 part
- rescale by a along the x-axis
- point: (x, y, 1) -> (ax, y, 1)
- vector: (x, y, 0) -> (a, y, 0)
Matrix that does this must do its thing on the diagonal of the
These are standard transformations. How do we do more interesting and
- Make the transformations we want as compositions of the basic
- Rotation about an arbitrary point.
- Scaling along an arbitrary direction.
- Scaling about an arbitrary point and along an arbitrary
- Reflection in an arbitrary line.
These matrices transform points and vectors. Let's see how we do
- Store the standard shape in terms of points and vectors.
- Know how to draw the standard shape in terms of its points and
- Store with it a transformation matrix that turns it into the actual
- Draw the actual shape using the transformed points and vectors.
And let's see how we do the inside test. (We could just use the
transformed points, but there's an easier way to do it.)
- Fact. The transformations above - when applied to a point and a shape -
do not affect whether or not the point is inside the shape.
- This gives us two options for doing the inside test
- Transform the standard shape into the point's world, using the
transformation matrix stored with the point.
- Transform the point into the standard shape's world, using the
inverse of the transformation matrix.
We prefer the second, because we can choose the standard object so
that the inside test is easy.
Therefore store the inverse matrix with the shape, along with the
- What is the inverse matrix of each of the basic matrices?
- How do we multiply inverse matrices?