CMSC 498B: Developing User Interfaces - Spring 2005

Intermediate Graphics

Geometric Equations

In a drawing program,

  • How would you determine what object a user clicked on?
  • How would you determine what the nearest object was a user clicked on?
  • How would you snap a line to the nearest object?
  • How do you do all of these things efficiently?

=> Geometry and geometric equations for lines, rectangles, ellipses, arcs, and curves

Different forms of equations for different uses

Implicit forms: F(x, y) = 0

i.e.: Ax + By + c = 0

Defines a half-space and can be used for determining if a point is within a region

Intersecting multiple half-spaces define polygons

Can determine distance from a line

Parametric forms: x = G(t), y = H(t)

i.e.: x = cos(t), y = sin(t)

or,

x = x1 + t * (x2 - x1)
y = y1 + t * (y2 - y1)

More generally, known as LERP (linear interpolation):   p = p1 + t * (p2 - p1)

  • Restricts bounds t in [0, 1]
  • Directly supports animation
  • Directly supports computing intersections
  • Scales up to multiple dimensions
  • Can be applied to many domains (points, colors, etc.)

Control points: Used to specify geometry - often accessed through "handles" in an interface

Curves

How to let user specify and modify a curve?

  • Model a curve to a hand drawn squiggle
  • Create a curve that connects control points

Connecting control points is more common, but how to do it?

What kind of model to use?  => polygon

What degree?

How to model?

Some common tasks

Compute the intersection between two lines.

Compute the distance from a point to a line.

Is a point inside a polygon?

Efficiency

Pre-compute and cache bounds

Then, only do real computation if bounds of object intersects relevant region.

Can define a rectangle around a point (a "halo"), and perform computation on halo for nearness

Geometric Transformations

How to translate, rotate, and scale points and objects?

Define homogeneous coordinates, and use affine transforms to represent coordinate systems.

C#: See System.Drawing.Drawing2D.Matrix, Graphics.Transform property and others

        Graphics g = e.Graphics;
	Matrix m = new Matrix();

	g.FillRectangle(redBrush, 0, 0, 20, 20);

	m.Translate(100, 0);
	g.Transform = m;
	g.FillRectangle(blueBrush, 0, 0, 20, 20);

	m.Rotate(30);
	g.Transform = m;
	g.FillRectangle(orangeBrush, 0, 0, 20, 20);

C#: transform-demo.cs

Java: See java.awt.geom.AffineTransform, Graphics2D.setTransform() and others

        Graphics2D g2 = (Graphics2D) graphics;
	AffineTransform at = new AffineTransform();

        g2.setColor(Color.white);
        g2.fillRect(getX(), getY(), getWidth(), getHeight());

	g2.setColor(Color.red);
	g2.fillRect(0, 0, 20, 20);

	at.translate(100, 0);
	g2.setTransform(at);
	g2.setColor(Color.blue);
	g2.fillRect(0, 0, 20, 20);

	at.rotate(30.0 * Math.PI / 180.0);
	g2.setTransform(at);
	g2.setColor(Color.orange);
	g2.fillRect(0, 0, 20, 20);

Java: TransformDemo.java