---
# System prepended metadata

title: Учебная практика 2022. Среда 29.06.  Четверг 30.06. canvas Графики f(x). GLSL f(x)
tags: [Day, Practice]

---

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

[TOC]

 
 #  Задание практики на 29.06 
 
## Задача 1  «canvas Графики f(x)» 
![](https://i.imgur.com/wrNJXln.png)


Создать хостинге 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
$$


![](https://i.imgur.com/Yg6QfZs.png)


Для различных интервалов протестировать работу класса 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.**

![](https://i.imgur.com/kM3IHY1.png)


 ## Описание выполненной работы
 
 Описание выполненной работы выполнить на сайте 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/)[Приложение для вырисовки неявных функций]

