---
# System prepended metadata

title: Учебная практика 2022. Понедельник 27.06 и Вторник 28.06.  Вводные указания и ссылки. Математический автопортрет
tags: [Day, Practice]

---

#  Учебная практика 2022. Понедельник 27.06 и Вторник 28.06.  Вводные указания и ссылки. Математический автопортрет

[TOC]

 
 #  Задание практики на понедельник 27.06 и вторник 28.06.
 
 ## A. Задания на визуализацию
 ### 1. Создать  HTML страницу c ФИО и фото в профиль
 
 Создать одиночную HTML страницу c названием, в котором есть Ваше Имя и Фамилия, на сайте  replit.com, в которой указываются 
   Ваши *Фамилия Имя Отчество + Название Вашей специальности+ Курс+*
   
   Ваше *Фото в профиль* 
  ![](https://i.imgur.com/ev9eOLW.png)

  Cсылки на сайт shadertoy.com c реализованной Вами с помощью неявных функций в пиксельном шейдере (адаптированный вариант использования языка GLSL)
  
  ### 2. Создать математическую визуализацию  *Лошарика* на языке GLSL
  
   Математическая визуализация  *Лошарика*
    
   ![](https://i.imgur.com/IwFH0wJ.png)
 
 ### 3. Создать математическую визуализацию  *Буратино* или *Сверчка* на языке GLSL
  
   Математическая визуализация  *Буратино* или *Сверчка*
    
   ![](https://i.imgur.com/HETV1AE.png)

 ### 4. Создать математическую визуализацию  Вашего *Имени и Фамилии* на языке GLSL
    
   Математическая визуализация  Вашего *Имени и Фамилии* 
  ![](https://i.imgur.com/JQEys3V.png)

### 5. Создать математическую визуализацию  Вашего *Автопортрета в профиль* на языке GLSL
  
   Математическая визуализация Вашего *Автопортрета в профиль* (автопортрет должен быть узнаваем - будет сравниваться с Вашим фото)
  ![](https://i.imgur.com/aguA3Bf.png)

### 6. Создать математическую визуализацию  *Ковра Аполлония* на языке GLSL

   Математическая визуализация *Ковра Аполлония** с произвольными начальными касающимися окружностями
    [How to compute and draw Apollonian gasket](https://en.wikibooks.org/wiki/Fractals/Apollonian_fractals#Notation) 
 ![](https://i.imgur.com/Xm6K9x6.png)
![](https://i.imgur.com/btbyWrq.png)

 ## B. Описание выполненной работы
 Описание выполненной работы выполнить на сайте hackmd.io на странице с названием "Учебная практика 2022. Понедельник 27.06 (или Вторник 28.06).  Фамилия Имя Отчество". Ссылки на описание проделанной (возможно, неполной) работы прислать в группу  telegram "Practice 2022" не позднее 23:59 понедельника 27.06 и вторника 28.06 соответственно.
 
## C. Зарегистрироваться на сайте overleaf.com
Зарегистрироваться на сайте overleaf.com и ознакомиться с примером оформления [Отчета о практике](https://www.overleaf.com/read/sxxcpnkgqdph) 
  


# Пример кода и результата работы шейдера для ShaderToy

## Код
```glsl=1
void mainImage( out vec4 fragColor, in vec2 fragCoord ){
    // Normalized pixel coordinates (from -1 to 1)
    vec2 uv  = 1.0-2.0*fragCoord/iResolution.xy;
    // x, y  are normalized [-1; 1] coordinates variables
     float   x = uv.x;
     float   y = uv.y;
    
    // x1, y1 and x2, y2  are shifted coordinates
      float   x1 = x - 0.3;
      float   y1 = y + 0.3;
      float   x2 = x + 0.3;
      float   y2 = y + 0.1;
    
     // Two amplified implicit functions Residuals for circles:
      float    с1 = (0.1 -(x1*x1 + y1*y1))*16.0;
      float    с2 = (0.1 -(x2*x2 + y2*y2))*16.0;
     // Union of two circles implicit functions Residuals
       float    с = max(с1,с2);
        
      // Coloring implicit functions Residuals c1  and union c  
         vec3    col = vec3(0,с1,с);
       // Output fragment color -->  to screen pixels
                  fragColor = vec4(col,1.0);
}
```
## Результат
![](https://i.imgur.com/ZgqTpGm.png)



# [Оформление кода](https://en.wikipedia.org/wiki/Indentation_style)

Для представления программного кода и объяснения его функционирования следует либо вместе с кодом представлять его [блок-схему](https://en.wikipedia.org/wiki/Flowchart) - смотри пример:
![](https://upload.wikimedia.org/wikipedia/commons/0/06/For-loop-diagram.png)
или следующий пример, выполненный средствами языка MD:
```flow
st=>start: Start:>http://flowchart.js.org[blank]
e=>end:>https://github.com/joshlk/hackmd/blob/master/public/features.md

i=>inputoutput: input something...
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:>http://www.google.com
io=>inputoutput: output something...
para=>parallel: parallel tasks

st->i->op1->cond
            cond(yes)->io->e
            cond(no)->para
                      para(path1, bottom)->sub1(right)->op1
                      para(path2, top)->op1
```
Либо выполнить его **форматирование, отражающее  важные зависимости** между участками кода. 

## Требования к форматированию кода
1) Отражение **зависимости строк кода по данным** - сдвиг вправо на 1 пробел относительно строки, от  которой зависит текущая строка (*контрольным признаком таких зависимостей является невозможность перестановки строк кода без нарушения правильной работы программы*)
2) Отражение **зависимости участков кода по управлению (в операторах if()..., for()..., do{...}..., while()... и т.п.)**  - сдвиг вправо на 2 пробела управляемого блока  относительно строки с заголовком оператора
3) Отражение **зависимости функций друг от друга (функциональные зависимости)**  - сдвиг вправо на 4 пробела функций относительно зависимых функций
4) Выделение **функций, обрабатывающих события,** (а также функций-колбэков и асинхронных функций) - сдвиг вправо не менее, чем на 4 пробела от левого края с комментарием ```////```, подчеркивающим характер функции - обработчика события
5) Отделение одних, **непосредственно связанных по смыслу**, участков кода от других пустыми строками
6) **Комментарии** непосредственно связанных по смыслу участков кода
7) Использовать **аналогичный подход для форматирования наборов структур и классов**, в частности, отношения включения-композиции (*has*) и наследования (*is*) - рассматривать как отношения зависимости по метаданным, отношения использования (*use*) функционала других классов - рассматривать как отношения функциональных зависимостей.

:::info
*Примечание*. Для сложных, рекурсивно завязаных друг на друга структур данных, классов и функций, (например, при использовании паттернов проектирования), следует выделить осмысленные остовные деревья зависимостей и использовать для них вышеуказанные правила с указанием точек выхода в рекурсию. 
:::

## Пример оформления кода с отступами
```glsl=1
#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

    float mytime(float x){
                return x/10.0;
    }
    
void main() {
         float t = mytime(u_time);
          gl_FragColor = vec4(mod(t,1.0), 0.5, 0.0, 1.0);
}
```
В этом примере форматирования кода строки {7,8,9}, описывающие функцию mytime(), сдвинуты на 4 пробела относительно функции main(), поскольку main() *функционально зависит* от mytime() и вызов функции mytime() происходит во время работы функции main() в строке 12.
 
 Строка 13 сдвинута на 1 позицию относительно строки 12, поскольку результат работы оператора присваивания в строке 12 используется для задания цвета в строке 13.  Между строками 12 и 13, таким образом, есть *зависимость по данным*.

## Пример  блок-схемы
![](https://i.imgur.com/0IcvsZW.png)

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

1.  <a href="https://pixel-canvas-graphics-b.glitch.me/"> Математическое введение и пример реализации пиксельной шейдерной программы для Shader Toy</a>
2.  <a href="https://www.shadertoy.com/view/tdScDh"> Непосредственный пример визуализации на сайте shadertoy.com</a> 
3. <a href="https://thebookofshaders.com/?lan=ru"> Начальное знакомство и первые эксперименты с подмножеством языка GLSL для пиксельных шейдеров</a>   
4.  <a href="https://open-graphics-service.glitch.me/"> Сервисная страница, облегчающая снятие координат с фотографий и рисунков</a>
5.   <a href="https://hackmd.io/c/book-example/%2Fs%2Ffeatures">Образцы использования и описания версии языка MD на сайте hackmd.io </a>
6.   [Краткая справочная страница по использованию математического MathJax оформления на страницах hackmd.io](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
7.    [How to compute and draw Apollonian gasket](https://en.wikibooks.org/wiki/Fractals/Apollonian_fractals#Notation)
[Example](https://www.shadertoy.com/view/3sSyDG)
[Draw-an-Apollonian-gasket Challenge](https://codegolf.stackexchange.com/questions/38450/draw-an-apollonian-gasket)
7. https://math.stackexchange.com/questions/1342795/how-to-convert-the-parametric-equation-into-implicit-form
