Shapes, angles, area, volume, trigonometry, and coordinate geometry -- the math that gives structure to the visual world and powers computer graphics, game engines, and spatial computing.
Geometry isn't just about shapes on paper. Everything visual on a computer is geometry. Here's what each topic on this page lets you build:
transform: rotate() scale() translate(), 3D graphics pipeline (model → world → camera → screen space), image processing filtersIf you ever want to build games, graphics, animations, data visualizations, or even just understand how CSS layout works at a deeper level -- geometry is your foundation.
Geometry starts with the most fundamental building blocks: points, lines, and the shapes they form. Everything in geometry -- from simple triangles to complex 3D models -- is built from these primitives.
These are the atoms of geometry. Every shape is ultimately defined by points and the connections between them.
Point Line (infinite) Ray (one direction) Segment (finite)
* <-----------> *-----------> *-----------*
A A B A A B
In computer graphics, everything you draw on screen is made of points (vertices) connected by line segments (edges). A 3D model in a game is just thousands of points connected by segments forming triangles. Understanding these primitives is the foundation of rendering.
The triangle is the most important polygon in geometry and in computer science. Every complex shape can be broken down into triangles -- this is why GPUs are optimized for triangle rendering.
| Type | Definition | Key Property |
|---|---|---|
| Equilateral | All 3 sides equal | All angles are 60 degrees |
| Isosceles | 2 sides equal | 2 base angles are equal |
| Scalene | No sides equal | All angles different |
| Right | One angle is exactly 90 degrees | Pythagorean theorem applies |
Equilateral Isosceles Scalene Right
/\ /\ /\ |\
/ \ / \ / \ | \
/ \ / \ / \ | \
/______\ /______\ /______\ |___\
60 60 60 70 70 40 50 60 70 90
A crucial fact: the angles in any triangle always sum to exactly 180 degrees. This is true regardless of the type of triangle. We will use this constantly.
Quadrilaterals are four-sided polygons. Each type has specific properties that make them useful for different calculations.
| Shape | Properties |
|---|---|
| Square | 4 equal sides, 4 right angles (90 degrees). Diagonals are equal and bisect each other at right angles. |
| Rectangle | Opposite sides equal, 4 right angles. A "stretched" square. Diagonals are equal. |
| Parallelogram | Opposite sides parallel and equal. Opposite angles equal. Diagonals bisect each other. |
| Trapezoid | Exactly one pair of parallel sides (called bases). The non-parallel sides are called legs. |
| Rhombus | 4 equal sides (like a "tilted" square). Opposite angles equal. Diagonals bisect each other at right angles. |
Square Rectangle Parallelogram Trapezoid Rhombus
+------+ +----------+ ________ __________ /\
| | | | / / / \ / \
| | | | / / / \ / \
+------+ +----------+ /-------/ /--------------\ \ /
\ /
\/
A circle is the set of all points that are the same distance from a center point. That distance is the radius.
Circles are everywhere in CS: collision detection (is a point within radius r of an object?), circular buffers in data structures, the unit circle in trigonometry for rotations, and even hashing algorithms that work modularly "wrapping around" like a circle.
A polygon is a closed figure made of straight line segments. Triangles (3 sides) and quadrilaterals (4 sides) are the simplest, but polygons can have any number of sides.
| Sides | Name | Sum of Interior Angles |
|---|---|---|
| 3 | Triangle | 180 degrees |
| 4 | Quadrilateral | 360 degrees |
| 5 | Pentagon | 540 degrees |
| 6 | Hexagon | 720 degrees |
| 7 | Heptagon | 900 degrees |
| 8 | Octagon | 1080 degrees |
| n | n-gon | (n - 2) x 180 degrees |
A regular polygon has all sides equal and all angles equal. A convex polygon has all interior angles less than 180 degrees (no "dents"). These properties matter for CS algorithms like convex hull computation.
An angle is formed when two rays share a common endpoint (called the vertex). Angles are measured in degrees (from 0 to 360) or radians (from 0 to 2(pi)). Understanding angle relationships is essential for everything from triangle solving to rotation in graphics.
| Type | Measure | Looks Like |
|---|---|---|
| Acute | Less than 90 degrees | A "sharp" angle |
| Right | Exactly 90 degrees | A perfect corner (L-shape) |
| Obtuse | Between 90 and 180 degrees | A "wide" angle |
| Straight | Exactly 180 degrees | A flat line |
| Reflex | Between 180 and 360 degrees | More than a half-turn |
Acute (45) Right (90) Obtuse (120) Straight (180) Reflex (270)
/ | \ ___________ ___________
/ | \ |
/____ |_____ \____ |
|
These are pairs of angles with special relationships:
Q: If one angle is 35 degrees, find its complement and supplement.
Complement: 90 - 35 = 55 degrees
Supplement: 180 - 35 = 145 degrees
When two lines cross, they form two pairs of vertical angles (also called "vertically opposite angles"). Vertical angles are always equal.
Two lines crossing form 4 angles:
\ a / a = c (vertical angles)
\ / b = d (vertical angles)
b \ / d a + b = 180 (supplementary)
--------\ /--------
/ \
d / \ b
/ \
/ c \
Q: Two lines intersect. One angle is 65 degrees. Find all four angles.
The vertical angle is also 65 degrees.
The supplementary angle is 180 - 65 = 115 degrees.
Its vertical angle is also 115 degrees.
Answer: 65, 115, 65, 115 degrees.
Q: A triangle has angles of 50 degrees and 70 degrees. Find the third angle.
Third angle = 180 - 50 - 70 = 60 degrees
This formula works because any polygon can be divided into (n - 2) triangles by drawing diagonals from one vertex. Since each triangle has angles summing to 180 degrees, the total is (n - 2) x 180.
Q: What is the sum of interior angles of a hexagon (6 sides)?
Sum = (6 - 2) x 180 = 4 x 180 = 720 degrees
Q: What is each interior angle of a regular hexagon?
Each angle = 720 / 6 = 120 degrees
Angles are fundamental to rotation in computer graphics. When you rotate a sprite in a game, you are applying an angle. When a character "looks at" another character, the game engine calculates the angle between them. Radians (not degrees) are typically used in code because trig functions in most languages expect radians.
Most programming languages (JavaScript, Python, C++) use radians, not degrees, for trigonometric functions. To convert: radians = degrees x (pi / 180). Forgetting this conversion is one of the most common bugs in graphics code.
Perimeter is the total distance around a shape (sum of all sides). Area is the amount of surface the shape covers, measured in square units (cm squared, m squared, pixels squared, etc.).
width (w) +----------+ | | length | | A = l x w (l) | | P = 2(l + w) +----------+
Q: A rectangle is 8 cm long and 5 cm wide. Find its area and perimeter.
Area = 8 x 5 = 40 cm squared
Perimeter = 2 x (8 + 5) = 2 x 13 = 26 cm
Q: Find the area and perimeter of a square with side length 6 cm.
Area = 6 x 6 = 36 cm squared
Perimeter = 4 x 6 = 24 cm
The height (or altitude) must be perpendicular to the base. It is not necessarily one of the sides -- sometimes you drop a perpendicular from the top vertex down to the base.
* /|\ / | \ height (h) / | \ / | \ /____|____\ base (b) A = (1/2) x b x h
Q: A triangle has a base of 10 cm and a height of 7 cm. Find its area.
Area = (1/2) x 10 x 7 = 35 cm squared
Q: A circle has a radius of 4 cm. Find its area and circumference.
Area = pi x 4 x 4 = 16pi approximately equals 50.27 cm squared
Circumference = 2 x pi x 4 = 8pi approximately equals 25.13 cm
Notice that the area formula looks like a rectangle's. That is because if you "cut" one end of a parallelogram and move it to the other end, you get a rectangle with the same base and height.
__________ / / height (h) is perpendicular / h / to the base, NOT the slanted side /__________/ base (b)
Q: A parallelogram has a base of 12 cm and a height of 5 cm. Find its area.
Area = 12 x 5 = 60 cm squared
________ <-- top base (a) / \ / h \ height is perpendicular / \ distance between bases /______________\ <-- bottom base (b)
Q: A trapezoid has parallel sides of 6 cm and 10 cm, with a height of 4 cm. Find its area.
Area = (1/2) x (6 + 10) x 4 = (1/2) x 16 x 4 = 32 cm squared
For parallelograms and trapezoids, the height is the perpendicular distance, not the length of the slanted side. If you use the slanted side instead of the true height, your answer will be wrong. Always look for or calculate the perpendicular height.
Area calculations appear in collision detection (does a click land inside a shape?), UI layout engines (sizing elements), image processing (counting pixels in regions), and geographic information systems (calculating land areas). The "point in polygon" problem is a classic CS challenge.
Volume measures the 3D space inside a solid shape (in cubic units). Surface area is the total area of all the outer faces. Think of volume as how much water a container holds, and surface area as how much wrapping paper you need to cover it.
Q: A cube has side length 3 cm. Find its volume and surface area.
Volume = 3 x 3 x 3 = 27 cm cubed
Surface Area = 6 x (3 x 3) = 6 x 9 = 54 cm squared
Q: A box is 5 cm long, 3 cm wide, and 4 cm tall. Find its volume and surface area.
Volume = 5 x 3 x 4 = 60 cm cubed
Surface Area = 2(5x3 + 5x4 + 3x4) = 2(15 + 20 + 12) = 2(47) = 94 cm squared
_____ / \ <-- top circle: area = pi x r squared | | | h | <-- curved surface "unwraps" to a rectangle: | | width = 2(pi)r, height = h \_____/ <-- bottom circle
Q: A cylinder has radius 3 cm and height 10 cm. Find its volume.
Volume = pi x 3 x 3 x 10 = 90pi approximately equals 282.74 cm cubed
Q: A sphere has radius 6 cm. Find its volume and surface area.
Volume = (4/3) x pi x 6 x 6 x 6 = (4/3) x 216pi = 288pi approximately equals 904.78 cm cubed
Surface Area = 4 x pi x 6 x 6 = 144pi approximately equals 452.39 cm squared
Notice the cone volume is exactly 1/3 of a cylinder with the same base and height. This is not a coincidence -- it can be proven with calculus.
* <-- apex /|\ / | \ l (slant height) / |h \ / | \ /____|____\ r
Q: A cone has radius 4 cm and height 9 cm. Find its volume.
Volume = (1/3) x pi x 4 x 4 x 9 = (1/3) x 144pi = 48pi approximately equals 150.80 cm cubed
3D volume and surface area calculations are essential in game physics (calculating buoyancy, mass from density), 3D printing (estimating material needed), and scientific computing. Bounding volumes (spheres, boxes) are used in collision detection because checking "is a point inside a sphere?" is much faster than checking complex shapes.
The Pythagorean theorem answers one of the most practical questions in all of math: if I know two sides of a right triangle, how do I find the third? That is it. It is a tool for finding missing distances.
It only works on right triangles (triangles with one 90-degree angle). The formula says: the two shorter sides, when squared and added together, equal the longest side squared.
This is not just a formula someone invented -- there is a beautiful geometric reason it is true. If you build a square on each side of a right triangle, the area of the two smaller squares adds up exactly to the area of the big square:
If you know both legs, solve for the hypotenuse:
Q: A right triangle has legs of 3 cm and 4 cm. Find the hypotenuse.
c = sqrt(3 squared + 4 squared) = sqrt(9 + 16) = sqrt(25) = 5 cm
If you know the hypotenuse and one leg, rearrange to find the other leg:
Q: A right triangle has a hypotenuse of 13 cm and one leg of 5 cm. Find the other leg.
a = sqrt(13 squared - 5 squared) = sqrt(169 - 25) = sqrt(144) = 12 cm
Some right triangles have all integer side lengths. These are called Pythagorean triples. Memorizing a few common ones saves time:
| Triple (a, b, c) | Verification | Multiples |
|---|---|---|
| 3, 4, 5 | 9 + 16 = 25 | 6-8-10, 9-12-15, 12-16-20, ... |
| 5, 12, 13 | 25 + 144 = 169 | 10-24-26, 15-36-39, ... |
| 8, 15, 17 | 64 + 225 = 289 | 16-30-34, ... |
| 7, 24, 25 | 49 + 576 = 625 | 14-48-50, ... |
Any multiple of a Pythagorean triple is also a triple. If 3-4-5 works, then 6-8-10 works (just multiply each by 2), and 30-40-50 works (multiply by 10). This is because scaling all sides by the same factor preserves the right angle.
The distance formula is the Pythagorean theorem in disguise. To find the distance between two points on a coordinate plane, you form a right triangle where the horizontal and vertical distances are the legs.
(x2, y2) * |\ | \ d = distance (hypotenuse) (y2 - y1)| d\ | \ |____\ (x1, y1) * * (x2, y1) (x2 - x1)
Q: Find the distance between points (1, 2) and (4, 6).
d = sqrt((4 - 1) squared + (6 - 2) squared)
d = sqrt(3 squared + 4 squared) = sqrt(9 + 16) = sqrt(25) = 5
It is a 3-4-5 triangle!
Q: Find the distance between (-2, 3) and (1, 7).
d = sqrt((1 - (-2)) squared + (7 - 3) squared)
d = sqrt(3 squared + 4 squared) = sqrt(9 + 16) = sqrt(25) = 5
The Pythagorean theorem and distance formula are used constantly in CS: calculating distance between game objects, nearest-neighbor searches, k-means clustering (machine learning), pathfinding algorithms (A*), and determining if two circles overlap (compare distance between centers to sum of radii). The squared distance is often used instead of actual distance to avoid the expensive square root operation.
In code, computing sqrt() is slow. When you only need to compare distances (e.g., "is A closer than B?"), compare the squared distances instead: dx*dx + dy*dy. If dist1_squared < dist2_squared, then dist1 < dist2. This optimization matters in game loops running 60 times per second.
The distance formula above gives the Euclidean distance (straight line). But in grid-based problems (LeetCode, chess, city navigation), you often need the Manhattan distance instead: |x2-x1| + |y2-y1|. This measures the distance walking along grid lines, not cutting diagonally. See the full comparison in the Coordinate Geometry section below.
The Pythagorean theorem connects sides to sides. But what if you know an angle and a side, and need to find another side? Or you know two sides and need the angle? That is what trigonometry does. It connects angles to side lengths.
Here is the real-world problem: you are standing 50 meters from a building. You look up at the top and measure the angle is 35 degrees. How tall is the building? You cannot use Pythagoras -- you only know one side and one angle, not two sides. You need trig.
Here is the beautiful idea: in a right triangle, once you fix an angle, the RATIOS between the sides are always the same, no matter how big or small the triangle is.
A tiny right triangle with a 30-degree angle and a huge right triangle with a 30-degree angle have sides of different lengths, but the ratios between their sides are identical. Sine, cosine, and tangent are just names for these fixed ratios.
SOHCAHTOA is a mnemonic for the three ratios. Each one divides two specific sides of a right triangle:
Look at what you know and what you want:
Just ask: "which two sides am I dealing with?" and pick the ratio that uses those two.
The "opposite" and "adjacent" sides change depending on which angle you are looking at. Always identify your angle first, then determine which side is across from it (opposite) and which side touches it (adjacent). The hypotenuse is always the same.
Memorize these. They come up constantly in math and CS.
| Angle | sin | cos | tan |
|---|---|---|---|
| 0 degrees | 0 | 1 | 0 |
| 30 degrees | 1/2 = 0.500 | sqrt(3)/2 = 0.866 | 1/sqrt(3) = 0.577 |
| 45 degrees | sqrt(2)/2 = 0.707 | sqrt(2)/2 = 0.707 | 1 |
| 60 degrees | sqrt(3)/2 = 0.866 | 1/2 = 0.500 | sqrt(3) = 1.732 |
| 90 degrees | 1 | 0 | undefined |
For sine, the values at 0, 30, 45, 60, 90 degrees follow a pattern: sqrt(0)/2, sqrt(1)/2, sqrt(2)/2, sqrt(3)/2, sqrt(4)/2 which simplifies to 0, 1/2, sqrt(2)/2, sqrt(3)/2, 1. Cosine is the same pattern in reverse.
Q: A right triangle has a hypotenuse of 10 cm and an angle of 30 degrees. Find the side opposite to the 30-degree angle.
sin(30) = opposite / hypotenuse
0.5 = opposite / 10
opposite = 10 x 0.5 = 5 cm
Q: A right triangle has a hypotenuse of 10 cm and an angle of 30 degrees. Find the side adjacent to the 30-degree angle.
cos(30) = adjacent / hypotenuse
0.866 = adjacent / 10
adjacent = 10 x 0.866 = 8.66 cm
Q: A ladder leans against a wall. The base is 6 m from the wall, and the angle at the ground is 60 degrees. How high up the wall does the ladder reach?
tan(60) = opposite / adjacent = height / 6
1.732 = height / 6
height = 6 x 1.732 = 10.39 m
To find an angle when you know the sides, use the inverse trig functions (arcsin, arccos, arctan):
Q: A right triangle has an opposite side of 4 and an adjacent side of 4. What is the angle?
theta = arctan(4 / 4) = arctan(1) = 45 degrees
This makes sense -- when opposite equals adjacent, we have a 45-45-90 triangle.
The unit circle is a circle with radius 1 centered at the origin. It extends trigonometry beyond right triangles to any angle (including negative angles and angles greater than 360 degrees).
90 (pi/2) (0, 1) | | 180 (pi) (-1, 0)---+---(1, 0) 0 (0 radians) | | (0, -1) 270 (3pi/2)
On the unit circle, for any angle theta measured from the positive x-axis:
This means any point on a circle of radius r can be described as:
This is how you place objects in a circle, create circular motion, rotate points, build clocks, create radial menus, animate orbiting objects, and so much more. The formula x = r * cos(angle), y = r * sin(angle) is probably the most-used trig formula in game development and graphics programming. It is also the basis for the rotation matrix you will learn in Linear Algebra.
In code, trig functions almost always expect radians. The conversion: radians = degrees * Math.PI / 180. A full circle is 2(pi) radians (approximately 6.283). If your rotation is going weird, check your units first.
Radians are another way to measure angles. One radian is the angle created when the arc length equals the radius of the circle.
| Degrees | Radians | Radians (decimal) |
|---|---|---|
| 0° | 0 | 0 |
| 30° | π/6 | ≈ 0.524 |
| 45° | π/4 | ≈ 0.785 |
| 60° | π/3 | ≈ 1.047 |
| 90° | π/2 | ≈ 1.571 |
| 180° | π | ≈ 3.142 |
| 270° | 3π/2 | ≈ 4.712 |
| 360° | 2π | ≈ 6.283 |
These identities are relationships that are always true for any angle. They're essential for simplifying expressions and solving equations.
If sin(θ) = 3/5, find cos(θ) (assuming θ is in the first quadrant).
sin²(θ) + cos²(θ) = 1
(3/5)² + cos²(θ) = 1
9/25 + cos²(θ) = 1
cos²(θ) = 1 - 9/25 = 16/25
cos(θ) = 4/5 (positive because first quadrant)
For any triangle (not just right triangles), the Law of Sines relates sides and angles:
Triangle ABC has angle A = 40°, angle B = 60°, and side a = 10cm. Find side b.
Using Law of Sines: a / sin(A) = b / sin(B)
10 / sin(40°) = b / sin(60°)
10 / 0.643 = b / 0.866
15.56 = b / 0.866
b = 15.56 × 0.866 ≈ 13.5 cm
This generalizes the Pythagorean theorem to all triangles:
Triangle has sides a = 5, b = 7, and angle C = 60° between them. Find side c.
c² = 5² + 7² - 2(5)(7) × cos(60°)
c² = 25 + 49 - 70 × 0.5
c² = 74 - 35 = 39
c = √39 ≈ 6.24
Triangle has sides a = 8, b = 6, c = 10. Find angle C.
c² = a² + b² - 2ab × cos(C)
100 = 64 + 36 - 96 × cos(C)
100 = 100 - 96 × cos(C)
0 = -96 × cos(C)
cos(C) = 0
C = 90° (this is a right triangle!)
| Known Information | Use |
|---|---|
| Two angles and any side (AAS or ASA) | Law of Sines |
| Two sides and angle opposite one of them (SSA) | Law of Sines (careful: ambiguous case possible) |
| Two sides and the included angle (SAS) | Law of Cosines |
| Three sides (SSS) | Law of Cosines |
You're 50 meters from a building. The angle of elevation to the top is 35°. How tall is the building?
tan(35°) = height / 50
height = 50 × tan(35°) = 50 × 0.700 ≈ 35 meters
A 10-meter pole casts a shadow. The sun's angle of elevation is 60°. How long is the shadow?
tan(60°) = 10 / shadow
shadow = 10 / tan(60°) = 10 / 1.732 ≈ 5.77 meters
From point A on one bank, you measure the angle to point B directly across as 90°. You walk 100m along the bank to point C, and the angle to B is now 65°. How wide is the river?
tan(65°) = width / 100
width = 100 × tan(65°) = 100 × 2.145 ≈ 214.5 meters
tan(θ) = sin(θ)/cos(θ) is undefined when cos(θ) = 0.
This happens at θ = 90°, 270° (or π/2, 3π/2 in radians).
At these angles, the tangent function has vertical asymptotes. This is why Math.tan(Math.PI/2) in JavaScript gives a very large number instead of infinity -- floating-point can't represent π/2 exactly.
Coordinate geometry (analytic geometry) bridges algebra and geometry by placing shapes on a number grid. Instead of abstract shapes, everything gets precise coordinates, which is exactly how computers work with geometry.
The coordinate plane has two perpendicular number lines: the x-axis (horizontal) and y-axis (vertical). Every point is described by an ordered pair (x, y).
y | Q2 | Q1 (-,+) | (+,+) | -----------+-----------> x | Q3 | Q4 (-,-) | (+,-) |
The four quadrants are numbered counterclockwise starting from the upper right (Q1). The origin is the point (0, 0).
(Derived from the Pythagorean theorem -- see Section 5 above.)
Q: Find the distance between (3, -1) and (-2, 4).
d = sqrt((-2 - 3) squared + (4 - (-1)) squared)
d = sqrt((-5) squared + (5) squared) = sqrt(25 + 25) = sqrt(50) = 5 x sqrt(2) approximately equals 7.07
This is the Euclidean distance -- the "straight line" or "as the crow flies" distance. But it is not the only way to measure distance, and in programming you will use different distance formulas for different situations.
Imagine you are in a city with a grid of streets. You want to get from point A to point B. You can't walk through buildings -- you have to walk along the streets. The distance you actually walk (along the grid) is the Manhattan distance (named after Manhattan's grid layout). The straight-line distance if you could fly is the Euclidean distance.
Euclidean: sqrt((4-1)² + (6-2)²) = sqrt(9 + 16) = sqrt(25) = 5
Manhattan: |4-1| + |6-2| = 3 + 4 = 7
Manhattan is always greater than or equal to Euclidean (you can't beat a straight line).
Euclidean: sqrt((1-(-3))² + (-1-2)²) = sqrt(16 + 9) = sqrt(25) = 5
Manhattan: |1-(-3)| + |-1-2| = 4 + 3 = 7
| Use Euclidean When... | Use Manhattan When... |
|---|---|
| You can move in any direction (straight line) | You can only move along axes (grid movement) |
| Physics, real-world distance, "how far apart?" | City blocks, grid-based games, chess (rook moves) |
| k-means clustering, nearest neighbor | Feature comparison with independent dimensions |
| 2D/3D game object distance | Grid pathfinding where diagonal movement is not allowed |
There is a third distance you'll see in programming: Chebyshev distance (also called "chessboard distance"). It is the maximum of the horizontal and vertical distances. Think of how a king moves in chess -- it can move diagonally, so the distance is just the larger of the two axis differences.
These aren't just math -- they are tools you'll reach for constantly:
dx*dx + dy*dy. This is faster and is used in game loops, collision checks, and ML distance comparisons.LeetCode tip: When a problem says "minimum number of moves on a grid," think Manhattan distance. When it says "straight-line distance," think Euclidean. When diagonal moves are allowed at the same cost, think Chebyshev.
All three formulas extend naturally to 3D (and beyond) by adding the z dimension:
The midpoint is the point exactly halfway between two points. You just average the x-coordinates and average the y-coordinates.
Q: Find the midpoint of (2, 8) and (6, 4).
Midpoint = ((2 + 6) / 2, (8 + 4) / 2) = (4, 6)
Q: Find the midpoint of (-3, 5) and (7, -1).
Midpoint = ((-3 + 7) / 2, (5 + (-1)) / 2) = (4 / 2, 4 / 2) = (2, 2)
The slope measures how steep a line is -- how much y changes for each unit change in x. It is the "rise over run."
| Slope Value | Meaning |
|---|---|
| Positive | Line goes up from left to right |
| Negative | Line goes down from left to right |
| Zero | Horizontal line |
| Undefined | Vertical line (division by zero) |
Q: Find the slope of the line through (1, 2) and (4, 8).
m = (8 - 2) / (4 - 1) = 6 / 3 = 2
The line rises 2 units for every 1 unit it moves right.
Parallel lines have the same slope (m1 = m2). Perpendicular lines have slopes that are negative reciprocals (m1 x m2 = -1). For example, if one line has slope 2, a perpendicular line has slope -1/2.
There are several forms for writing the equation of a line. Each has its uses.
Q: Find the equation of the line through (1, 3) and (3, 7).
Step 1: Find slope: m = (7 - 3) / (3 - 1) = 4 / 2 = 2
Step 2: Use point-slope form with point (1, 3):
y - 3 = 2(x - 1)
y - 3 = 2x - 2
y = 2x + 1
Answer: y = 2x + 1 (slope = 2, y-intercept = 1)
Q: A line has slope -3 and passes through (2, 5). Find the equation.
y - 5 = -3(x - 2)
y - 5 = -3x + 6
y = -3x + 11
Coordinate geometry is how computers represent all geometry. Every pixel on your screen has coordinates. Line equations are used in: rendering (line-drawing algorithms like Bresenham's), collision detection (does a line segment intersect a boundary?), path planning (robot navigation), and linear regression (finding the "best fit" line through data points in machine learning).
A transformation changes a shape's position, size, or orientation. There are four fundamental types, and they are the backbone of computer graphics, animation, and game development.
A translation moves every point of a shape the same distance in the same direction. The shape does not rotate, flip, or change size -- it just slides.
Before After (translated by (4, 2)) * * / \ ---> / \ /___\ /___\ (1,1) (5,3)
Q: Translate triangle with vertices (1, 1), (3, 1), (2, 4) by vector (5, -2).
(1 + 5, 1 - 2) = (6, -1)
(3 + 5, 1 - 2) = (8, -1)
(2 + 5, 4 - 2) = (7, 2)
New vertices: (6, -1), (8, -1), (7, 2)
A rotation turns a shape around a fixed point (center of rotation) by a given angle. Counterclockwise is the positive direction.
Common rotations around the origin:
| Rotation | Rule |
|---|---|
| 90 degrees counterclockwise | (x, y) becomes (-y, x) |
| 180 degrees | (x, y) becomes (-x, -y) |
| 270 degrees counterclockwise (or 90 clockwise) | (x, y) becomes (y, -x) |
Q: Rotate the point (3, 4) by 90 degrees counterclockwise around the origin.
Using the rule: (x, y) becomes (-y, x)
(3, 4) becomes (-4, 3)
A reflection flips a shape across a line (the line of reflection), creating a mirror image.
| Reflection Across | Rule |
|---|---|
| x-axis | (x, y) becomes (x, -y) |
| y-axis | (x, y) becomes (-x, y) |
| Line y = x | (x, y) becomes (y, x) |
| Origin | (x, y) becomes (-x, -y) (same as 180 degree rotation) |
Q: Reflect the point (3, -5) across the x-axis.
(x, y) becomes (x, -y)
(3, -5) becomes (3, 5)
Scaling changes the size of a shape by multiplying all coordinates by a scale factor.
Q: Scale the triangle with vertices (2, 1), (4, 1), (3, 3) by factor 2 from the origin.
(2 x 2, 1 x 2) = (4, 2)
(4 x 2, 1 x 2) = (8, 2)
(3 x 2, 3 x 2) = (6, 6)
The triangle is now twice as big and twice as far from the origin.
Transformations are THE core concept in computer graphics. Every frame of every game applies transformations:
In practice, all four transformations are combined into a single transformation matrix (covered in Linear Algebra) that the GPU applies to every vertex in parallel. This is why GPUs exist -- they apply the same transformation to millions of points simultaneously.
Transformation order matters! Rotate-then-translate gives a different result than translate-then-rotate. In graphics programming, transformations are applied right-to-left (the last transformation you write in code happens first). Getting this wrong is one of the most common bugs in 3D graphics.
Test your understanding. Click the answer you think is correct.