Визуализация математических 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
.
Теперь вы можете переключаться между основными функциями и график будет плавно перерисовываться.