Rotated rectangle rasterisation algorithm
ML System Design practice on Codemia
Design recommenders, ranking systems and training pipelines the way ML interviews actually ask for them, with worked solutions.
Introduction
Rasterization is the process of converting geometric shapes into a pixel-based format suitable for display on screens. While axis-aligned rectangles are common and straightforward to rasterize, rotated rectangles present additional challenges. The rotated rectangle rasterization algorithm addresses these challenges, enabling efficient and accurate rendering of rectangles that are not aligned with the coordinate axes.
Overview of the Algorithm
The rotated rectangle rasterization algorithm ensures that every pixel inside the rotated rectangle is accurately captured. This involves:
- Determining Corner Coordinates: Identify the four corners of the rectangle.
- Line Equation Calculation: Define the lines between each pair of adjacent corners.
- Bounding Box Calculation: Compute the axis-aligned bounding box (AABB) for the rotated rectangle.
- Scan Line Approach: Iterate over each scan line within the AABB and determine which pixels intersect with the rotated rectangle.
- Pixel Filling: Fill the pixels that lie within the boundaries defined by the intersection points on each scan line.
Step 1: Determining Corner Coordinates
Given a rectangle defined by its center, width, height, and rotation angle, calculate the vertices of the rectangle as follows:
- Calculate half of the diagonal length and the angle offset due to rotation.
- Use the center, width, height, and rotation angle to compute each corner's position using rotation matrices.
Step 2: Line Equation Calculation
For each side of the rectangle, derive the line equation in the form:
Where `(a, b)` is the normal vector of the line and `c` is a constant. This equation helps in determining whether a pixel lies inside the rectangle.
Step 3: Bounding Box Calculation
Compute the axis-aligned bounding box by taking the minimum and maximum `x` and `y` coordinates among the rotated rectangle's vertices.
Step 4: Scan Line Approach
Within the bounding box:
- Iterate over each integer `y` value (representing scan lines).
- Compute intersection points of the rectangle edges with the current scan line.
- Sort the intersection points on the x-axis.
Step 5: Pixel Filling
For each scan line, iterate between pairs of intersection points and fill the pixels between them. Ensure each pixel's center falls within the defined boundary for accurate rasterization.
Technical Example
Let's implement a simple version of the algorithm in pseudo-code to illustrate the main steps.
- `computeVertices()` calculates the rectangle's corners.
- `computeEdges()` determines the equations of lines for the rectangle's edges.
- `computeAABB()` computes the axis-aligned bounding box.
- `computeIntersection()` finds where the scan line intersects with rectangle edges.
- `fillPixels()` marks pixels between the intersection pairs on the scan line.
- Antialiasing: To improve visual quality, implement an antialiasing technique such as supersampling or multisampling.
- Precision Loss: Be cautious of precision issues, especially for small or nearly vertical/horizontal rectangles.
- Edge Cases: Handle degenerate rectangles or very thin rectangles carefully to avoid missing pixels.
Related reading
- Rounding colour values to the nearest of a small set of colours
- Save bitmap to location
- Saving a Numpy array as an image
- Saving and Reading Bitmaps/Images from Internal memory in Android
- Rotating an array using Juggling algorithm
- Rotating right an array of int in c?
- Rotating a point about another point 2D
- Round number to nearest integer

DSA Fundamentals
Master algorithmic patterns and data structures through hands-on LeetCode-style problems - from arrays and hashing to dynamic programming and advanced graphs.
View the courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
ML System Design practice on Codemia
Design recommenders, ranking systems and training pipelines the way ML interviews actually ask for them, with worked solutions.