The Function Machine
Compose functions by passing the output of one into the other.
Let and .
Input
startDrag(e, 's1_input', s1.inputVal)"
class="w-16 h-16 rounded-full bg-amber-400 text-white text-2xl font-bold flex items-center justify-center shadow-[0_4px_0_#b45309] cursor-grab active:cursor-grabbing hover:scale-105 transition-transform"
:class="{ 'opacity-0': drag.active && drag.type === 's1_input' }"
>
{{ s1.inputVal }}
{{ s1.inputVal }}
Machine g
startDrag(e, 's1_g_out', s1.gOut)"
class="absolute -bottom-8 w-16 h-16 rounded-full bg-emerald-500 text-white text-2xl font-bold flex items-center justify-center shadow-[0_4px_0_#059669] cursor-grab z-10"
:class="{ 'opacity-0': drag.active && drag.type === 's1_g_out' }"
>
{{ s1.gOut }}
{{ s1.gOut }}
Machine f
{{ s1.fOut }}
pan_tool
Drag input to Machine g
Drag output to Machine f
Composition complete!
Build the Expression
Find by substituting into the of .
Drop g(x) here
Grab this
startDrag(e, 's2_expr', 'g')"
class="px-6 py-4 bg-emerald-500 text-white rounded-xl shadow-[0_6px_0_#059669] text-2xl cursor-grab active:cursor-grabbing hover:-translate-y-1 transition-transform"
:class="{ 'opacity-0': drag.active && drag.type === 's2_expr' }"
>
Simplifies to:
drag_indicator
Drag expression to substitute
Substituted correctly!
Build the Inverse
The inverse function undoes everything does, in reverse order. Let .
Forward f(x)
x
y
Inverse f⁻¹(x)
x
y
!op.used && startDrag(e, 's3_op', op)"
class="px-5 py-3 rounded-xl text-xl font-bold shadow-[0_4px_0_rgba(0,0,0,0.1)] transition-transform select-none"
:class="[
op.used ? 'opacity-30 bg-gray-200 text-gray-400 cursor-not-allowed shadow-none' : 'bg-white text-slate-700 border-2 border-slate-200 cursor-grab active:cursor-grabbing hover:-translate-y-1 hover:border-purple-400',
{ 'opacity-0': drag.active && drag.payload?.id === op.id }
]"
>
extension
Drag operations to build inverse
Inverse built!
Graph the Inverse
The graph of is a reflection of across the line .
Drag the pink points to reflect them across the dashed line. Swap their (x,y) coordinates!
drag_indicator
Drag points to reflect
Perfect reflection!
🏆
Master of Functions!
You've successfully composed functions and unlocked their inverses both algebraically and graphically.