05830, User Interface Software, Spring,
2000
Lecture 8, February 21, 2000
Copyright © 2000  Brad Myers
Previous
Lecture . . .
Next Lecture
Constraints
Show videos of constraint solvers.
Constraints

Relationships defined once and maintained by the system

Useful for keeping parts of the graphics together.

Typically expressed as arithmetic or code relationships among variables.

Variables are often the properties of objects (left, color)

Types:

"Dataflow" constraints; Choices:

SingleOutput vs. Multioutput

Types: Oneway, Multiway, Simultaneous equations, Incremental, Special purpose

Cycles: supported or not

Others: AI systems, scheduling systems, etc.
One Way Constraints

Simplest form of constraints

D = F(I1, I2, ... In)

Often called formulas since like spreadsheets

Can be other dependencies on D
CurrentSliderVal = mouseX  scrollbar.left
scrollbar.left = window.left + 200
scrollbar.visible = window.has_focus

Not just for numbers:
mycolor = x.color

Implementations:

Just reevaluate all required equations every time a value is requested

least storage, least overhead

Equations may be reevaluated many times when not changed. (e.g,
scrollbar.left
when mouse moves)

cycles:
file_position = F1(scrollbar.Val)
scrollbar.Val = F2(file_position)

Cannot detect when values change (for redraw)

Cache current values with each constraint; lazy eval

Example:
A = 10
B = A + 5
C = A * B
D = A + E
E = 20
F = D + C

now need to know when values become invalid and recalculate in right
order

two phases: invalidate and recalculate

invalidate all values that depend on the changed value

recalculate only values that are demanded

data structures: dependsonme, idependon

may reevaluate values that haven't changed unnecessarily when conditionals,
"max", etc.

can mark slots/objects that change

can detect cycles with a counter

Variations:

Multiple outputs
(D1, D2, ... Dm) = F(I1, I2, ... In)

Sideeffects in the formulas

useful for creating objects

when happen?

what if create new objects with new constraints

cycles cannot be detected

Variables in the dependencies:
D = p^.left + 10

important innovation in Garnet we invented, now ubiquitous

supports feedback objects

supports loops:
D = Max(components^)

requires the dependencies be dynamically determined

Constant formula elimination

To decrease the size used by constraints
TwoWay (Multiway) Constraints

From ThingLab

Constraints are expressions with multiple variables

Any may be modified to get the right values

Example:
A.right = A.left + A.width  1

Often requires programmer to provide methods for solving the constraint in
each direction:
A.left = A.right  A.width + 1
A.width = A.right  A.left + 1

Useful if mouse expressed as a constraint

Requires a planning step to decide which way to solve

Many systems compute plans and save them around since usually change same
variable repeatedly

In general, have a graph of dependencies, find a path through the graph

How control which direction is solved?
CurrentSliderVal = mouseX  scrollbar.left

"Constraint hierarchies" = priorities

constants, interaction use "stay" constraints with high priority

Dynamically add and remove constraints

Brad Vander Zanden's "QuickPlan" solver

Handles multioutput, multiway cyclic constraints in O(n2) time instead
of exponential like previous algorithms
Simultaneous Equations

Required for parallel, perpendicular lines; tangency, etc.

Also for aggregate's size

Numerical (relaxation) or symbolic techniques
Incremental

Michael Gleicher's PhD thesis

Only express forward computations

Tries to get reverse by incrementally changing the forward computation in
the right direction using derivatives.

Supports interactions otherwise not possible

Produces smooth animations
Special: Animation Constraints in Amulet

Implemented using Amulet's constraint mechanism

When slot set with a new value, restores old value, and animates from old
to new value

Usually, linear interpolation

For colors, through either HSV or RGB space

For visibility, various special effects between TRUE and FALSE
Back to 05830 main page