1 / 57

# Freehand Drawing System based on Geometric Constraints - PowerPoint PPT Presentation

Freehand Drawing System based on Geometric Constraints. Kaisuke Nakajima Joint work with Takeo Igarashi. User Interface Research Group The University of Tokyo. Two Parts of the Talk. Introduction to Pegasus [Igarashi, UIST 1997 & CHI 1998] Improvement attempts My current study

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Freehand Drawing System based on Geometric Constraints

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

## Freehand Drawing Systembased on Geometric Constraints

Kaisuke Nakajima

Joint work with Takeo Igarashi

User Interface Research Group

The University of Tokyo

### Two Parts of the Talk

• Introduction to Pegasus

• [Igarashi, UIST 1997 & CHI 1998]

• Improvement attempts

• My current study

• Any comments greatly appreciated! 

### Outline

1. Problem

2. Our Idea & Demonstration

3. Related Work

4. Algorithm

5. Evaluation

6. Ongoing Study

7. Summary

### Problem

• Diagrams

• In documents, slides, …

• By drawing editors

• Difficult to satisfy geometric relations!

Copy

Flip

Move

### Example (contd.)

• In this case, grids works well, but…

Geometric constraints

### Another Example

The user attempts to

draw a perpendicular line,

GRID

but grid prevents desired placements.

He draws a box separately, and...

ROTATE

rotates it, but fails to get precise angle.

ROTATE

COPY

Better strategy:

copy the slope  rotate 90 degrees

Move

Grid

Flip

Copy

Rotate

### Why Difficult?

The user must plan detailed strategy.

### Outline

1. Problem

2. Our Idea & Demonstration

3. Related Work

4. Algorithm

5. Evaluation

6. Ongoing Study

7. Summary

Sketch

+ Beautify

### Our Idea

• Sketching is easy!

• Sketch  Beautify

• Interactive Beautification[Igarashi, UIST 1997]

Draw and...

Draw and...

Satisfied

Constraints

Beautify.

Draw and...

Beautify.

Beautify.

### Ambiguity Handling

But free strokes are ambiguous.

### Ambiguity Handling

Generate multiple candidates

 Let the user select

In this way,the user can constructprecise geometric diagramswithout any editing commands!!

## Prototype System Pegasus

Live Demo

### Outline

1. Problem

2. Our Idea & Demonstration

3. Related Work

4. Algorithm

5. Evaluation

6. Ongoing Study

7. Summary

### Beautification Systems

[Pavlidis 1985] ...

### Beautification Systems (contd.)

Batch-based

too many errors!

More Interaction (+ multiple candidates)

### Free Stroke Vectorization

[Apple Newton] [SmartSketch] ...

Local context

Local context

Global context

### Drawing Systems based on Geometric Constraints

[Sutherland 1963] [Nelson 1985] ...

### Drawing Systems based on Geometric Constraints (contd.)

• Previous work

• Explicitly specify constraints

• Our approach

• Infer constraints

### Outline

1. Problem

2. Our Idea & Demonstration

3. Related Work

4. Algorithm

5. Evaluation

6. Ongoing Study

7. Summary

Segment coordinates

Constraint Inference

Multiple constraints

Constraint Solver

Multiple candidates

Candidate Evaluation

Primary candidate

### Beautification Algorithm

Input

Reference segments

(array of (X0, Y0, X1, Y1))

New stroke

(x0, y0, x1, y1)

Output

Possible constraints

(linear equations of (x0, y0, x1, y1))

### Constraint Inference

Perpendicular

const * (x1 – x0) + const * (y1 – y0) = 0

Edge Connection

x0 = const, y0 = const

etc.

(x1, y1)

(x0, y0)

### Constraint Inference (contd.)

• How?

• Supported constraints

if (distance(point1, point2) < 30)

infer constraint(point1 == point2);

Input

Possible constraints

(linear equations of (x0, y0, x1, y1))

Output

Beautification candidates

(array of (x0, y0, x1, y1))

Perpendicular

Same Length

Edge Connection

Horizontal

### Candidate Evaluation

Candidate nearest to the original stroke

 Primary candidate

### Outline

1. Problem

2. Our Idea & Demonstration

3. Related Work

4. Algorithm

5. Evaluation

6. Ongoing Study

7. Summary

### Purpose

To confirm the intuition !

“It’s difficult for novice users

to use commands”

“Interactive beautification is good”

Rapidness

How fast?

Precision

Beautiful?

### Experimental Settings

• 18 subjects

• 3 diagrams, 3 editors (9 sessions / person)

### Systems

• Draw ... SmartSketch(Future Wave), Drawing Editor.

• Pegasus…Our Prototype system.

On AMiTY (a pen computer)

### Diagrams and Constraints

B)

C)

A)

Parallel-1

Symmetric-1

Parallel-1

Parallel-2

Symmetric-2

Parallel-2

Connected

(all Vertices)

Perpendicular

Equal Interval

Vertical and Horizontal

Connected

(all Vertices)

Connected (all Vertices)

Precision

Rapidness

Averaged drawing time

for three diagrams

The ratio of sessions where

all constraints are satisfied

## Results

100

600

500

80

400

60

300

40

200

in both rapidness and precision.

20

100

0

0

Draw

Pegasus

Draw

Pegasus

### Evaluation: Conclusion

• Pegasus cannot do everything

• But: certainly useful in its target domain

Paint

Geometric diagrams,

rapidly & precisely!

### Outline

1. Problem

2. Our Idea & Demonstration

3. Related Work

4. Algorithm

5. Evaluation

6. Ongoing Study

7. Summary

### Ongoing Work

• Only lines

• Too many candidates

• Forgets constraints

### Limitation: Only Lines

 Support curves

• Circles, ellipses, arcs,

Bézier curves

• (Experimental demo)

### Limitation: Only Lines (contd.)

• Challenges with curves

• More ambiguity

• Shape recognition

• Constraint inference

• Complex constraints: how to represent?

• e.g. line tangent to piecewise Bézier curve

• Complex constraints: how to solve efficiently?

• Exponential growth of candidate solutions

### Limitation: Too Many Candidates

Overlapping…

 Constraint switching interface

• Visualize conflicting constraints

• Enable manual switching

• Challenges

• How to detect conflicting constraints efficiently?

• ### Limitation: Forgets Constraints

 Remember constraints

• Maintain them during manipulation

• Chorus [Hosobe 2001]

Skewed 

Stretch!

Stretch!

### Outline

1. Problem

2. Our Idea & Demonstration

3. Related Work

4. Algorithm

5. Evaluation

6. Ongoing Study

7. Summary

### Summary

• Pegasus: freehand drawing system

• User study showed promising results

• Geometric constraints play an important role in sketch beautification

• Further improvements to be made

### Thank you

• Papers & demos available at

http://www-ui.is.s.u-tokyo.ac.jp/