6. Clipping (Windowing)

Clipping is the process of removing parts of graphical objects that lie outside a specified visible region. This visible region is called the clipping window. Only the portion of objects inside the window is sent further in the graphics pipeline.

Conceptually, clipping answers one question: Which part of the object can the viewer actually see?

6.1 Definition: Windowing

Windowing defines a rectangular region in world or viewing coordinates that represents the visible area. Anything outside this window is invisible and must be discarded.

• Window: Region in world/view coordinates.
• Viewport: Corresponding region on the display device.

Clipping is performed before mapping the window to the viewport to avoid unnecessary computation.

6.2 Cohen–Sutherland Line Clipping Algorithm

This is an efficient, region-code–based algorithm for clipping a line against a rectangular window. It avoids unnecessary intersection calculations by quickly classifying lines.

6.2.1 Region Codes (TBRL – 4 bits)

The 2D plane around the window is divided into 9 regions. Each endpoint of the line is assigned a 4-bit code indicating its position relative to the window.

• Top (T): 1000 → y > ymax
• Bottom (B): 0100 → y < ymin
• Right (R): 0010 → x > xmax
• Left (L): 0001 → x < xmin

Inside the window: 0000

6.2.2 Trivial Accept and Trivial Reject

These tests eliminate most lines without intersection computation.

• Trivial Accept: If both endpoints have code 0000 → line is fully inside.
• Trivial Reject: If bitwise AND of endpoint codes ≠ 0 → line lies completely outside in the same region.

Only lines that are neither trivially accepted nor rejected require intersection calculation.

            flowchart TD
                Start{Check Line P1-P2} --> Codes[Assign Region Codes]
                Codes --> Accept{P1 & P2 == 0000?}
                Accept -- Yes --> Draw[Trivial Accept: Draw]
                Accept -- No --> Reject{P1 & P2 != 0?}
                Reject -- Yes --> Discard[Trivial Reject: Discard]
                Reject -- No --> Clip[Calculate Intersection]
                Clip --> Codes
            

6.2.3 Intersection Calculations

For partially visible lines, intersections are computed with window boundaries using the parametric form of a line.

Line equation:

$$x = x_1 + t(x_2 - x_1), \quad y = y_1 + t(y_2 - y_1)$$

For example, intersection with left boundary $x = xmin$:

$$t = \frac{x_{min} - x_1}{x_2 - x_1}$$

The endpoint outside the window is replaced by the intersection point, and the process repeats until accepted or rejected.

6.2.x Solved Examples: Cohen–Sutherland Line Clipping

The following problems are solved step-by-step using the Cohen–Sutherland Line Clipping Algorithm. Each solution includes region-code assignment, trivial tests, and exact intersection calculations.

Example 1

Given:

• Line: P₁(2, 8) to P₂(18, 20)
• Window: x_min=5, y_min=10, x_max=15, y_max=25

Step 1: Region Codes (TBRL)

• P₁(2,8): x<5 → Left=1, y<10 → Bottom=4 ⇒ 0101₂ (5)
• P₂(18,20): x>15 → Right=2 ⇒ 0010₂ (2)

Bitwise AND = 0101 & AND 0010 = 0000 → Not trivially rejected

Step 2: Line Equation

Slope:

$$m = \frac{20 - 8}{18 - 2} = \frac{12}{16} = \frac{3}{4}$$

Parametric form:

$$x = 2 + 16t,\quad y = 8 + 12t$$

Step 3: Clip P₁ (Bottom y=10)

$$10 = 8 + 12t \Rightarrow t = \frac{1}{6}$$

$$x = 2 + 16\left(\frac{1}{6}\right) = \frac{14}{3} \approx 4.67$$

Still left of window → clip with x=5

$$5 = 2 + 16t \Rightarrow t = \frac{3}{16}$$

$$y = 8 + 12\left(\frac{3}{16}\right) = 10.25$$

New P₁ = (5, 10.25)

Step 4: Clip P₂ (Right x=15)

$$15 = 2 + 16t \Rightarrow t = \frac{13}{16}$$

$$y = 8 + 12\left(\frac{13}{16}\right) = 17.75$$

New P₂ = (15, 17.75)

Final Clipped Line

(5, 10.25) → (15, 17.75)

Example 2

Given:

• Line: (6,2) to (16,32)
• Window: (x_min, y_min, x_max, y_max) = (4,6,20,28)

Step 1: Region Codes

• (6,2): y<6 → Bottom=4 ⇒ 0100₂ (4)
• (16,32): y>28 → Top=8 ⇒ 1000₂ (8)

AND = 0000 → proceed

Step 2: Line Equation

$$m = \frac{32 - 2}{16 - 6} = 3$$

$$x = 6 + 10t,\quad y = 2 + 30t$$

Step 3: Clip with Bottom y=6

$$6 = 2 + 30t \Rightarrow t = \frac{2}{15}$$

$$x = 6 + 10\left(\frac{2}{15}\right) = 7.33$$

New P₁ = (7.33, 6)

Step 4: Clip with Top y=28

$$28 = 2 + 30t \Rightarrow t = \frac{13}{15}$$

$$x = 6 + 10\left(\frac{13}{15}\right) = 14.67$$

New P₂ = (14.67, 28)

Final Clipped Line

(7.33, 6) → (14.67, 28)

Example 3

Given:

• Line: P₁(12,5) to P₂(40,15)
• Window: (10,10,30,20)

Step 1: Region Codes

• P₁(12,5): Bottom=4 ⇒ 0100₂ (4)
• P₂(40,15): Right=2 ⇒ 0010₂ (2)

AND = 0000 → proceed

Step 2: Line Equation

$$m = \frac{15 - 5}{40 - 12} = \frac{10}{28} = \frac{5}{14}$$

$$x = 12 + 28t,\quad y = 5 + 10t$$

Step 3: Clip P₁ with Bottom y=10

$$10 = 5 + 10t \Rightarrow t = 0.5$$

$$x = 12 + 28(0.5) = 26$$

New P₁ = (26, 10)

Step 4: Clip P₂ with Right x=30

$$30 = 12 + 28t \Rightarrow t = \frac{18}{28} = \frac{9}{14}$$

$$y = 5 + 10\left(\frac{9}{14}\right) = 11.43$$

New P₂ = (30, 11.43)

Final Clipped Line

(26, 10) → (30, 11.43)

6.3 Mid-Point Subdivision Line Clipping Algorithm

This algorithm repeatedly subdivides a line until visible and invisible segments are separated.

Core idea: If one endpoint is inside and the other outside, split the line at its midpoint and test each half.

6.3.1 Algorithm Logic

• If both endpoints are inside → accept.
• If both endpoints are outside in same region → reject.
• Otherwise, subdivide at midpoint and recurse.

This method is conceptually simple and useful for non-rectangular clipping regions, but computationally slower than Cohen–Sutherland.

6.3.x Solved Examples: Mid-Point Subdivision Line Clipping

The following problems are solved using the Mid-Point Subdivision Clipping Algorithm. Each solution explicitly shows region classification, subdivision logic, and final visible segments.

Example 1

Given:

• Line: A(80, 120) to B(260, 60)
• Window: (Left=60, Top=100, Right=180, Bottom=140)

Step 1: Region Classification

• A(80,120): Inside window → Visible
• B(260,60): x>180 (Right), y<100 (Top) → Outside

One endpoint inside and one outside → subdivision required.

Step 2: First Midpoint

Midpoint M₁:

$$(x,y)=\left(\frac{80+260}{2},\frac{120+60}{2}\right)=(170,90)$$

• M₁: y<100 → Outside

Visible segment lies between A and M₁.

Step 3: Second Midpoint

Midpoint M₂ between A and M₁:

$$(x,y)=\left(\frac{80+170}{2},\frac{120+90}{2}\right)=(125,105)$$

• M₂: Inside window

Intersection lies between M₂ and M₁.

Step 4: Continue Subdivision (Boundary Convergence)

Repeated subdivision converges to intersection with top boundary y=100.

Exact intersection (line equation):

$$y-120 = \frac{60-120}{260-80}(x-80)$$

Solving for y=100 gives:

$$x = 140$$

Final Visible Segment

(80,120) → (140,100)

Example 2

Given:

• Line: (0,0) to (100,100)
• Window: (20,20,80,80)

Step 1: Region Classification

• (0,0): Left + Bottom → Outside
• (100,100): Right + Top → Outside

Endpoints lie in different outside regions → subdivision required.

Step 2: First Midpoint

M₁:

$$(50,50)$$

• M₁: Inside window

Visible portion lies around midpoint.

Step 3: Subdivide Left Segment

Midpoint between (0,0) and (50,50):

$$(25,25)$$

• Inside window

Further subdivision yields intersection at (20,20).

Step 4: Subdivide Right Segment

Midpoint between (50,50) and (100,100):

$$(75,75)$$

• Inside window

Further subdivision yields intersection at (80,80).

Final Visible Segment

(20,20) → (80,80)

Example 3

Given:

• Line: P₁(-10,50) to P₂(30,50)
• Window: (0,0,20,100)

Step 1: Region Classification

• P₁(-10,50): Left → Outside
• P₂(30,50): Right → Outside

Line is horizontal and crosses window → subdivision required.

Step 2: First Midpoint

M₁:

$$(10,50)$$

• M₁: Inside window

Step 3: Subdivide Left Half

Midpoint between (-10,50) and (10,50):

$$(0,50)$$

• On left boundary → Visible

Step 4: Subdivide Right Half

Midpoint between (10,50) and (30,50):

$$(20,50)$$

• On right boundary → Visible

Final Visible Segment

(0,50) → (20,50)

6.4 Polygon Clipping (Sutherland–Hodgman Algorithm)

This algorithm clips a polygon against a convex clipping window by processing one window edge at a time.

Instead of clipping the entire polygon at once, the polygon is clipped sequentially against each boundary.

6.4.1 Inside–Outside Test

For each polygon edge and window boundary, vertices are classified as:

• Inside: Vertex lies within the boundary.
• Outside: Vertex lies outside the boundary.

6.4.2 Vertex Processing Rules

For each polygon edge from S (start) to E (end):

• S inside, E inside: Output E
• S inside, E outside: Output intersection
• S outside, E inside: Output intersection and E
• S outside, E outside: Output nothing

The output list becomes the input for clipping against the next boundary.

            flowchart LR
                Start((Start)) --> S_In{Start In?}
                S_In -- Yes --> E_In{End In?}
                S_In -- No --> E_In2{End In?}
                E_In -- Yes --> OutE[Output E]
                E_In -- No --> OutI[Output Intersection]
                E_In2 -- Yes --> OutIE[Output Intersect & E]
                E_In2 -- No --> OutN[Output Nothing]
            

6.4.3 Key Properties

• Works only for convex clipping windows.
• Efficient and widely used in raster graphics.
• Preserves polygon shape order.

Clipping & Windowing Wrap-up

• Clipping vs. Windowing: Windowing selects a rectangular visible region; Clipping discards parts of objects outside this window.
• Cohen-Sutherland Algorithm: Efficient line clipping using 4-bit Region Codes (TBRL).
  • Bitcodes: Top (1000), Bottom (0100), Right (0010), Left (0001).
  • Rules: Trivial Accept (both 0000), Trivial Reject (AND \(\ne\) 0), else Intersect.
• Mid-Point Subdivision: Divide-and-conquer approach; splits lines until they fall strictly inside or outside; slower than Cohen-Sutherland.
• Sutherland-Hodgman Polygon Clipping: Pipeline approach; clips polygon vertices against each window boundary sequentially (S to E rules).
• Convex Restriction: Sutherland-Hodgman works best for convex clipping windows.