ƒ Graph Playground
an interactive companion to algebra

Graph Playground

Slide it. Stretch it. Flip it.

Change one number in a function and the whole graph moves. Learn transformations by doing — turn the knobs, watch the graph respond, and build the intuition that static textbook figures can't.

Start playing ↓

4 knobs · 9 functions · 6 challenge rounds · every transformation on one page

already know the basics? jump to the function library →
1 step one

A function is a machine

A like y = x2 + 1 takes any input x and produces exactly one output y. Every run of the machine is plotted as a point at . Drag the slider and watch it work.

where this is going

The graph is the complete record of the function: every input paired with its output, plotted as one curve. Every move on this page is an edit to the machine — change what comes out (the well-behaved knobs) or change what goes in (the sneaky one).

2 step two · the green knob

Slide it up & down

Change the constant at the end and it's applied after everything else: every output rises or falls by exactly that much. The graph doesn't tilt or bend — it translates straight up or down. The arrows track individual points making the trip.

as expected

Outside the function, numbers do exactly what they say: +3 means up 3, −3 means down 3. Savor it — the next knob isn't so polite.

3 step three · the blue knob

Slide it sideways — the backwards one

Now edit what goes in, before the function ever sees it: y = 2 − (x − 3)²4. Subtracting 3 shifts the whole graph… to the right?! Almost everyone guesses left. Here's the click: x − 3 is a delay. The function receives every input as 3 smaller than it really is, so whatever used to happen at 0 now happens at 3.

the inside rule

Inside the parentheses, signs work backwards. f(x − 3) shifts right; f(x + 3) shifts left. Outside the function (the green knob), numbers behave as written.

The copycat race

Still feels like a trick? Two pens draw simultaneously, left to right. The blue pen repeats the white pen's every move — three steps behind.

why a dome and not a line

Slide a line sideways and the result looks identical to sliding it down — a line has no landmark, so both descriptions are true at once. The dome's peak makes the horizontal shift unambiguous.

4 step four · the orange knob

Stretch, compress & flip

The coefficient out front multiplies every output. At a = 2, every height doubles — a vertical stretch that reads as narrower. At a = 0.5, heights halve — a compression that reads as wider. Push it negative and every output changes sign: the parabola reflects through the x-axis.

5 the function library · four knobs

The function library

y = a·f(b·(x − h)) + k — the complete formula, and a shelf of nine functions to aim it at. You already own a, h, and k. The new knob, b, multiplies x before anything else happens — it's an inside knob, so it works backwards too: b = 2 squeezes the graph to half its width. Some of these functions come with dashed — watch them follow your knobs. Pick a card, or grab the curve and drag it.

You writeThe graph…Watch out
y = f(x) + 3translates up 3behaves as written
y = f(x) − 3translates down 3
y = f(x − 3)shifts right 3backwards! inside the parentheses, − shifts right, + shifts left
y = f(x + 3)shifts left 3
y = 2·f(x)vertical stretch ×2 (reads narrower)heights scale; points on the x-axis don't move
y = 12·f(x)compression to half (reads wider)
y = f(x)reflects through the x-axisa stretch by −1: every output changes sign
y = f(2·x)squeezes to half the widthbackwards again! it's inside the function — bigger b, narrower graph
y = f(12·x)stretches twice as wide
boss level

Prove it: match the ghost

A dashed target appears. Tune your knobs until your curve lands exactly on it. Six rounds, from one knob to all three — no formulas to recall, just the feel you've built.