# **Учебная практика 2022. Четверг 30.06**

Мулярчук Владислава Сергеевна
[TOC]
# Отчет проделанной роботы:
# Присутствовала конференции

# *Задание №1*
«canvas Графики f(x)»
Создать хостинге replit.com html приложение, в котором реализовать на языке javascript класс Graph1D, предназначенный для расчета и отрисовки на канве (canvas) графиков вещественных функции

## Cсылка на роботу
https://replit.com/@Vladislava-Sier/HighlevelWetInstance#script.js
## Код к роботе к странице javascript

var ctx = my_canvas.getContext('2d');
var x = -10;
var x_min = -10
var x_max = 10;
var y_min = -10;
var y_max = 10;
var X = 0, Y = 0;
var W = 256;
var H = 256;

    function drawGraph() {
   draw();
 for(X=0; X<W; X+=0.05) {
  x = x_min + (x_max-x_min)*X/W;
    let str = formula.value;
     y = eval(str); 
   Y = H*(y-y_max)/(y_min-y_max);
  ctx.fillRect(X, Y, 1,1);
 }
    }

    function draw() {
for(i = 1;i < Math.abs(y_min)+Math.abs(y_max);i++) {  //горизонтальные линии
ctx.moveTo(0, H*(Math.abs(i)/(Math.abs(y_min) + Math.abs(y_max))));
ctx.lineTo(W, H*(Math.abs(i)/(Math.abs(y_min) + Math.abs(y_max))));
ctx.stroke();
  ctx.strokeStyle = "lightgreen";
}
for(i = 1;i < Math.abs(x_min)+Math.abs(x_max);i++) {  //вертикальные линии
ctx.moveTo(W*(Math.abs(i)/(Math.abs(x_min) + Math.abs(x_max))), 0);
ctx.lineTo(W*(Math.abs(i)/(Math.abs(x_min) + Math.abs(x_max))), H);
ctx.stroke();
  ctx.strokeStyle = "lightgreen";
 }
                    
    }

# *Задание №5 из файла 1 *
математической визуализацией Автопортрета в профиль (автопортрет должен быть узнаваем - будет сравниваться с Вашим фото)

## Ссылка на роботу
https://www.shadertoy.com/view/fsdfD7
## Код к роботе

  float udSegment( in vec2 p, in vec2 a, in vec2 b )
    {
    vec2 pa = p-a;
    vec2 ba = b-a;
     //ограниченое значение между двумя значениями которое считает скалярное произведение двух векторов и делит на другое скалярное произведение
       float h = clamp(dot(pa,ba) / dot(ba,ba), 0.0, 1.0 );
        return length(pa-h*ba);
     }

//из двух точек создаем линию
 
    float lineSegment(in vec2 p1, in vec2 p2, in vec2 sc)
    {
//размер линий
     vec2 relocate = vec2(100., -100.);
      vec2 v1 = vec2( 80.* p1.x, -80. * p1.y);
        v1 += relocate;
      vec2 v2 = vec2(80. * p2.x, -80.0 * p2.y);
        v2 += relocate;
         return udSegment( sc, v2, v1 );
}


void mainImage( out vec4 fragColor, in vec2 fragCoord ) //вывод и ввод
{
    // массив из точок координаты которых взяли с помощью сайта
    
    vec2 points[24];
     points[0]  = vec2(2.4,0.77000);
     points[1]  = vec2(3.03, 0.47000);
     points[2]  = vec2(3.35, 0.16700);
     points[3]  = vec2(3.38 ,-0.40000);
     points[4]  = vec2(3.34 ,-0.62000);
     points[5]  = vec2(3.46 ,-0.92000);
     points[6]  = vec2(3.47 ,-0.99000);
     points[7]  = vec2(3.33, -0.97000);
     points[8]  = vec2(3.34 ,-1.1600);
     points[9]  = vec2(3.28 , -1.1900);
     points[10] = vec2(3.29 ,-1.2600);
     points[11] = vec2(3.22 ,-1.3100);
     points[12] = vec2(3.17, -1.4700);
     points[13] = vec2(3.1 , -1.5300);
     points[14] = vec2(2.67  ,-1.5300);
     points[15] = vec2(2.48, -2.0400);
     points[16] = vec2(1.99 , -1.9700);
     points[17] = vec2(1.4 ,-2.1700);
     points [18] = vec2(1.15 , -2.5700);
     points[19] = vec2(0.94 , -2.5500);
     points [20] = vec2( 1.07 ,-2.0000);
     points [21] = vec2(1.58 , 0.17000);
     points [22] = vec2(2.04 , 0.65000);
     points [23] = vec2(2.4  , 0.73000);
    
    
    vec2 sc = vec2(fragCoord.x, iResolution.y - 2.*fragCoord.y);
    
    vec3 col = vec3(0,0,0);
    //толщина линии
    float thick = 3.;
    
    // соединяем точки  в линии
    for(int i = 1; i < points.length(); ++i){
        float d = lineSegment(points[i-1], points[i], sc) - thick;
            col +=  smoothstep(2.5,0.,d); //находим неизвестные промежуточные значения- интерполяция
    }
      
     fragColor = vec4(col,1.0);
}

## Результат и оригинал