# Учебная практика 2022. Вторник 05.07 . Лазаренко Дарья Геннадьевна. Первая группа.
[TOC]
## Задача 1 «canvas Графики f(x)»

Создать хостинге replit.com html приложение, в котором реализовать на языке javascript класс Graph1D, предназначенный для расчета и отрисовки на канве (canvas) графиков вещественных функций.
Добавление производных.

### Решение: в процессе

Решение доступно по [ссылке](https://replit.com/@DariaLazarenko1/290622-practice).

(Не присутствовала на онлайн-конференции)

1. Добавлено построение касательных к функции, угловой коэффициент которых - значение производной в данной точке.
2. Добавлена красивая визуализация касательной.
3. Ведется работа над усовершенствованием методов вычисления и визуализации критических точек, нулей, производной и интегралов.

Пример выполнения программы:

Функция, отвечающая за подсчет и отрисовку производных:

    function drawDerivative() {
                              ctx.putImageData(imgData, 0, 0);
                              if(X<W) {
                                  let str_d = 'd(' + formula.value + ')';
                                   str_d = Algebrite.run(str_d);
                                   str_d = str_d.replaceAll('^', '**');
                                    console.log(str_d);
                                  x = x_min + (x_max-x_min)*X/W;
                                      str = formula.value;
                                       y = eval(str);
                                  A_x.innerHTML = Math.round(x*100)/100;
                                  A_y.innerHTML = Math.round(y*100)/100;
                                        Y = H*(y-y_max)/(y_min-y_max);
                                          let yd = eval(str_d);
                                            Y_d = H*(yd-y_max)/(y_min-y_max);
                                  x_value.innerHTML = Math.round(x*100)/100;
                                  d_value.innerHTML = Math.round(yd*100)/100;
                                  if(yd>0)
                                  {
                                    ctx.strokeStyle = "darkgreen";
                                    ctx.lineWidth = 2;
                                    yd=-Math.atan(yd*((Math.abs(x_min)+Math.abs(x_max))/(Math.abs(y_min)+Math.abs(y_max))));
                                    ctx.fillStyle = "grey";
                                  ctx.fillRect(X-3, Y-3, 6,6);
                                  ctx.beginPath();
                                  ctx.moveTo(X - r * cos(yd), Y - r * sin(yd));
                                  ctx.lineTo(X + r * cos(yd), Y + r * sin(yd));
                                  ctx.stroke();
                                  } 
                                  else {
                                    ctx.strokeStyle = "darkred";
                                    ctx.lineWidth = 2;
                                    yd=-Math.atan(yd*((Math.abs(x_min)+Math.abs(x_max))/(Math.abs(y_min)+Math.abs(y_max))));
                                    ctx.fillStyle = "grey";
                                  ctx.fillRect(X-3, Y-3, 6,6);
                                  ctx.beginPath();
                                  ctx.moveTo(X - r * cos(yd), Y - r * sin(yd));
                                  ctx.lineTo(X + r * cos(yd), Y + r * sin(yd));
                                  ctx.stroke();
                                  }
                                  X+=5;
                                  let timer = setTimeout(drawDerivative, 200);
                              }
                                  
    }