# Учебная практика 2022. Среда 29.06. Четверг 30.06. canvas Графики f(x). GLSL f(x)

[TOC]

# Задание практики на 29.06

## Задача 1 «canvas Графики f(x)»

Создать хостинге replit.com html приложение, в котором реализовать на языке javascript **класс Graph1D**, предназначенный для расчета и отрисовки на канве (canvas) графиков вещественных функции
$$
y=f(x).
$$
Переменные класса:
$x_{min}, x_{max}$ - задающие интервал для переменной $x ∈ [x_{min}, x_{max}]$,
$y_{min}, y_{max}$ - задающие интервал для переменной $y ∈ [y_{min}, y_{max}]$,
$W$ - разрешающая способность по оси $X$ (количество точек на оси $X$) ,
$H$ - разрешающая способность по оси $Y$ (количество точек на оси $Y$),
var f = function(x) {...} - ссылка на произвольную числовую функцию f(x), принимающую значение типа Float64 и возвращающая значение такого же типа.
Вычисления значений функции должны происходить при вызове метода evaluate() класса Graph1D.
Рассчитанные значения хранить в одномерном массиве типа Float64Array соответствующего размера.

Значения по умолчанию:
$$
f(x)=x*x-9,\\
x_{min}=-10.0, x_{max}=10.0, \\
y_{min}=-10.0, y_{max}=10.0, \\
W=256, H=256.
$$

В классе Graph1D должен быть реализован метод draw(), рисующий график функции на канве и обеспечивающий отрисовку:
a) точек функции f(x),
б) осей координат,
в) координатной сетки,
г) указание в левом нижнем углу графика значений $x_{min}, y_{min}$, в правом верхнем углу значений $x_{max}, y_{max}$,
д) **отрисовку приближенных нулей графика функций и предполагаемых разрывов второго рода**.

Параметрами метода draw() являются
- цвета отображения точек функции (по умолчанию ‘red’),
- цвета вертикальной и горизонтальной осей (по умолчанию ‘green’),
- цвета приближенных нулей (по умолчанию ‘indigo’),
- цвета линий предполагаемых разрывов второго рода (по умолчанию - ‘magenta’),
- цвет фона (по умолчанию: ‘grey’).

В классе Graph1D **должен быть реализован метод drawAuto()**, в котором автоматически устанавливаются $y_{min} = f_{min}$, $y_{max}=f_{max}$,
где $f_{min}$, $f_{max}$, - соответственно минимальные и максимальные значения функции $f(x)$ на интервале $[x_{min}, x_{max}]$ .

В классе Graph1D **должен быть реализован метод drawWhole()**, который вырисовывает **всю функцию** на интервале
$$
(x_{min}, x_{max})= (-\infty , \infty ),
$$
используя отображение
$$
\phi(x)= \frac{x}{1+|x|} \\
\phi(0) = 0 \\
\phi(\infty) = 1 \\
\phi(-\infty) = -1 \\
$$
и ее обратную функцию
$$
\phi^{-1}(X)= \frac{X}{1-|X|} \\
\phi^{-1}(0)= 0 \\
\phi^{-1}(-1) \to -\infty \\
\phi^{-1}(1) \to \infty
$$


Для различных интервалов протестировать работу класса Graph1D на функциях:
$$
f(x)=x*x-9; \\
f(x)=x*x*x/1000; \\
f(x)=10*\sin(x)/x; \\
f(x)=0.1*\sin(x); \\
f(x)=10*\sin(x*x); \\
f(x)=10*\sin(10/x); \\
f(x)=\tan(x); \\
;
$$

## Задача 2* «GLSL f(x)» (5 баллов)
**Реализовать функционал класса Graph1d cвязкой javascript + GLSL.**


## Описание выполненной работы

Описание выполненной работы выполнить на сайте hackmd.io на странице с названием "Учебная практика 2022. Среда 29.06 . Фамилия Имя Отчество". Ссылки на описание проделанной (возможно, неполной) работы прислать в группу telegram "Practice 2022" не позднее 23:59 среды 29.06.

## Ссылки для работы и самостоятельного ознакомления:

1. <a href="https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial"> Руководство по Canvas</a>
2. <a href="https://youtu.be/hv7yzjA5zbI"> Пример простейшей динамической визуализации фукнции</a>
3. <a href="https://thebookofshaders.com/?lan=ru"> Начальное знакомство и первые эксперименты с подмножеством языка GLSL для пиксельных шейдеров</a>
4. <a href="https://www.desmos.com/calculator?lang=ru"> Графический калькулятор desmos с похожим функционалом</a>
5. <a href="https://graphtoy.com/"> Приложение graphtoy, объеденющее javascript и GLSL для вырисовки графиков функций</a>
6. (https://funpainterfunction.arthmax.repl.co/)[Приложение для вырисовки неявных функций]