Визуализация математических CSS-функций
Для создания визуализации математических функций нам понадобится «холст» в клеточку. В качестве «холста» используем <div> с классом plot-container. Осью X будет список <ul> с классом axis. А «точки» на оси — это элементы списка <li class="dot">.
Каждой «точке» с помощью атрибута style зададим собственное значение CSS-переменной --x. Так мы установим значение координаты X в этой точке.
Рисовать графики будем с помощью точек — элементов с классом dot. Для правила с селектором .dot добавим специальную CSS-переменную --y, в которой описывается зависимость координаты Y от координаты X, то есть функция y(x).
Сейчас значение функции — это константа, y=50. Такая функция выводит на графике прямую линию, что мы и видим.
Попробуем отобразить классическое линейное уравнение — y=x. Чтобы реализовать это в CSS, нужно использовать функцию calc со значением --x.
Координаты X и Y на нашем «холсте» имеют разный масштаб, поэтому графики будут немного отличаться от настоящих. Но для наших целей это неважно.
Чтобы сделать графики более наглядными и похожими на настоящие, добавим переменную --scale. Она отвечает за масштабирование графика по оси Y. При необходимости будем изменять её значение.
В общем виде линейное уравнение выглядит как y = a * x + b. Коэффициент a управляет углом наклона кривой, а b смещает кривую вверх или вниз.
Чтобы нарисовать график y = 2x, нужно умножить CSS-переменную --x на 2 прямо внутри calc. Поиграйте со значением множителя, посмотрите как меняется наклон прямой.
Чтобы сместить график вниз, используем отрицательное значение для b. Например, y = 2x - 10. Функция calc справляется и с этим.
Давайте нарисуем ещё одну линейную функцию y = -2x + 30 для закрепления. И пойдём дальше.
Квадратичная функция вида y = x2 позволяет рисовать параболы.
С таким уравнением всё ещё можно справиться с помощью calc. Для этого нужно перемножить --x на --x.
Но намного удобнее использовать специальную математическую CSS-функцию pow(). Первый параметр этой функции представляет собой значение, а второй параметр указывает степень, в которую это значение нужно возвести.
Для y = x2 CSS будет таким pow(var(--x), 2).
Квадратичную функцию также можно записать в более общем виде y = (x + a)2 + b. С помощью a задаётся смещение графика по оси X, а с помощью b — по оси Y.
Чтобы нарисовать y = (x - 10.5)2, можно вычесть 10.5 из --x прямо внутри pow().
Чтобы сместить график вниз, например, так y = (x - 10.5)2 - 50, придётся добавить в CSS дополнительную функцию-обёртку calc.
Давайте нарисуем ещё одну квадратичную функцию y = (-x - 10.5)2 + 100 для закрепления. Такая функция выводит перевёрнутый вниз график. Он называется «улыбка тех, кто ненавидит линейную алгебру».
Следующая на очереди функция — кубическая или y = x3. Для неё удобнее сразу использовать CSS-функцию pow().
Кубическую функцию можно смещать по оси X аналогично квадратичной.
Смещение по оси Y тоже работает по аналогии с квадратичной функцией.
Функция y = √x, квадратный корень из x, реализуется с помощью CSS-функции sqrt().
Для получения корня можно использовать и функцию pow() с дробной степенью.
Функция y = √x смещается по оси X аналогично степенным функциям.
Логарифмическая функция y = log(x) реализуется с помощью CSS-функции log(). Первым аргументом задаётся значение, вторым — основание логарифма. Выведем логарифм по основанию 2.
Или логарифм по основанию 10.
И, наконец, самые любимые функции — тригонометрические. В CSS есть полный набор этих функций: синусы, косинусы, тангенсы и так далее.
Функция y = sin(x) реализуется с помощью одноимённой CSS-функции sin().
А вот и косинус.
Тригонометрические функции в более общем виде выглядят так y = cos(a * x + b). Коэффициент a «растягивает» или «сжимает» волны функции, а коэффициент b смещает их вдоль оси X.
В CSS эти коэффициенты можно использовать внутри функции cos по аналогии с другими функциями.
Немного сместим косинус по оси X — y = cos(0.5 * x - 1).
Сместим косинус по оси X чуть сильнее — y = cos(0.5 * x - 2).
Напоследок добавим переключатель с типовыми функциями.
Механизм переключения реализуем с помощью :has.
Теперь вы можете переключаться между основными функциями и график будет плавно перерисовываться.
