Introduction to rectangle geometry and perimeter drawing.
- Author
- Sukesh Ashok Kumar
This example demonstrates fundamental rectangle geometry by drawing its perimeter (outline). It introduces the concepts of area, perimeter, and how to represent 2D shapes using coordinate boundaries.
Mathematical Concepts:
- Rectangle properties: 4 sides, 4 right angles, opposite sides equal
- Area = length × width (internal space)
- Perimeter = 2(length + width) (total boundary length)
- Coordinate boundaries: (x1,y1) to (x1+width, y1+height)
- Anchor point: top-left corner defines position
In This Example:
- Top-left corner: (150, 100)
- Width: 300 pixels (horizontal extent)
- Height: 200 pixels (vertical extent)
- Perimeter: 2(300 + 200) = 1000 pixels
- Area (not drawn, but would be): 300 × 200 = 60,000 pixels
Programming Concepts:
- Drawing edges separately (decomposing complex shapes)
- Horizontal lines: constant y, varying x
- Vertical lines: constant x, varying y
- Loop range calculation using addition
- Efficient drawing: only perimeter, not filled
What you'll learn:
- How rectangles are defined by corner point and dimensions
- Drawing horizontal vs vertical lines
- The difference between filled shapes and outlines
- Coordinate arithmetic (adding width/height to position)
- Separating concerns: horizontal edges vs vertical edges
- Efficient algorithms (1000 pixels vs 60,000 for filled)
Drawing Strategy:
- Draw top edge: from (x1, y1) to (x1+width, y1)
- Draw bottom edge: from (x1, y1+height) to (x1+width, y1+height)
- Draw left edge: from (x1, y1) to (x1, y1+height)
- Draw right edge: from (x1+width, y1) to (x1+width, y1+height)
Visual Result: A rectangular outline centered in the window, showing the four edges that define the boundary of a rectangle.
Compile:
gcc m-rectangle.c gfx/simplegfx.c -o output/m-rectangle -lX11
Run:
1.9.1