Lecture 8 Constraints Brad Myers 05 830 Advanced

Lecture 8: Constraints Brad Myers 05 -830 Advanced User Interface Software 1

Constraints n n n 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. n n Variables are often the properties of objects (left, color) Types: n "Dataflow" constraints; Choices: n n Single-Output vs. Multi-output Types: One-way, Multi-way, Simultaneous equations, Incremental, Special purpose Cycles: supported or not Others: AI systems, scheduling systems, etc. 2

One Way Constraints n n Simplest form of constraints D = F(I 1, I 2, . . . In) Often called formulas since like spreadsheets Can be other dependencies on D Current. Slider. Val = mouse. X - scrollbar. left = window. left + 200 scrollbar. visible = window. has_focus 3

One Way Constraints, cont. n n Not just for numbers: mycolor = x. color Implementations: 1. Just re-evaluate all required equations every time a value is requested n n least storage, least overhead Equations may be re-evaluated many times when not changed. (e. g, scrollbar. left when mouse moves) cycles: file_position = F 1(scrollbar. Val) scrollbar. Val = F 2(file_position) Cannot detect when values change (for redraw) 4

One-Way Implementation 2 n n n 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 5

Implementation 2, cont. n two phases: invalidate and re-calculate n n n n invalidate all values that depend on the changed value recalculate only values that are demanded data structures: depends-on-me, i-depend-on may re-evaluate values that haven't changed unnecessarily when conditionals, "max", etc. can mark slots/objects that change can detect cycles with a counter Scott will describe his algorithm in detail next lecture 6

One-Way Variations n n Multiple outputs (D 1, D 2, . . . Dm) = F(I 1, I 2, . . . In) Side-effects in the formulas n n n Variables in the dependencies: D = p^. left + 10 n n n useful for creating objects when happen? what if create new objects with new constraints cycles cannot be detected 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 n To decrease the size used by constraints 7

Two-Way (Multi-way) Constraints n From Thing. Lab (~1979) 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 n video n n n 8

Two-Way implementations n Requires a planning step to decide which way to solve n n n 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? Current. Slider. Val = mouse. X - scrollbar. left n "Constraint hierarchies" = priorities n n n constants, interaction use "stay" constraints with high priority Dynamically add and remove constraints Brad Vander Zanden's "Quick. Plan" solver n Handles multi-output, multi-way cyclic constraints in O(n 2) time instead of exponential like previous algorithms 9

Simultaneous Equations n n n Required for parallel, perpendicular lines; tangency, etc. Also for aggregate's size Numerical (relaxation) or symbolic techniques 10

Incremental n Michael Gleicher's Ph. D 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 n Video n n 11

Animation Constraints in Amulet n n n 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 Demo and video 12