# Учебная практика 2022. Понедельник 27.06 и Вторник 28.06. Вводные указания и ссылки. Математический автопортрет
[TOC]
# Задание практики на понедельник 27.06 и вторник 28.06.
## A. Задания на визуализацию
### 1. Создать HTML страницу c ФИО и фото в профиль
Создать одиночную HTML страницу c названием, в котором есть Ваше Имя и Фамилия, на сайте replit.com, в которой указываются
Ваши *Фамилия Имя Отчество + Название Вашей специальности+ Курс+*
Ваше *Фото в профиль*
Cсылки на сайт shadertoy.com c реализованной Вами с помощью неявных функций в пиксельном шейдере (адаптированный вариант использования языка GLSL)
### 2. Создать математическую визуализацию *Лошарика* на языке GLSL
Математическая визуализация *Лошарика*
### 3. Создать математическую визуализацию *Буратино* или *Сверчка* на языке GLSL
Математическая визуализация *Буратино* или *Сверчка*
### 4. Создать математическую визуализацию Вашего *Имени и Фамилии* на языке GLSL
Математическая визуализация Вашего *Имени и Фамилии*
### 5. Создать математическую визуализацию Вашего *Автопортрета в профиль* на языке GLSL
Математическая визуализация Вашего *Автопортрета в профиль* (автопортрет должен быть узнаваем - будет сравниваться с Вашим фото)
### 6. Создать математическую визуализацию *Ковра Аполлония* на языке GLSL
Математическая визуализация *Ковра Аполлония** с произвольными начальными касающимися окружностями
[How to compute and draw Apollonian gasket](https://en.wikibooks.org/wiki/Fractals/Apollonian_fractals#Notation)
## 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://en.wikipedia.org/wiki/Indentation_style)
Для представления программного кода и объяснения его функционирования следует либо вместе с кодом представлять его [блок-схему](https://en.wikipedia.org/wiki/Flowchart) - смотри пример:
или следующий пример, выполненный средствами языка 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, таким образом, есть *зависимость по данным*.
## Пример блок-схемы
# Ссылки для работы и самостоятельного ознакомления:
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
Sign in with Wallet
Connect another wallet