Функции и визуализация

Сначала покажем математическую запись функции, затем визуализируем процесс: значение \(x\) «заходит» в функцию \(f\), а на выходе получаем \(f(x)\). [web:79][web:84]

Математическая запись

\[ f : X \to Y,\quad x \mapsto f(x) \]

\[ f(x) = x^2 \]

Анимация процесса вычисления

Ниже на схеме видно, как число \(x = 2\) попадает в «коробку» функции \(f(x) = x^2\), превращается в \(4\) и выходит на выход. [web:91][web:93][web:99]

кликни/тапни — пауза/продолжить
f(x) = x² x = 2 f(x) = 4

Координаты текста «x = 2» и «f(x) = 4» фиксированы внутри SVG, а движение/появление задаётся CSS‑анимациями через классы .arg и .result. [web:91][web:93][web:96]

Рисунок из папки svg

Тот же приём можно использовать и для отдельного файла в папке svg. Для начала можешь сделать схематичный рисунок, а потом заменить его на свой. [web:92][web:98]

Схема отображения f: X → Y
Рисунок 1 — схема функции \( f : X \to Y \).