Редактирование: Визуализация базовых сортировок, алгоритмов

==Описание==

Визуализация алгоритмов, базовых сортировок на языке программирования JavaScript

Исполнители: [[Цветкова Дарья, Сазыкин Георгий, Васин Данила| Цветкова Дарья, Сазыкин Георгий, Васин Данила]]

Группа 3630103/00001 Кафедра Теоретической механики


==Визуализация==
{{#widget:Iframe |url=https://georgie9999.github.io/Sortandlog/ |width=100% |height=100% |border=0 }}

==Введение==
Данный курсовой проект “Ресурс с визуализацией сортировок и базовых алгоритмов” предназначен для ознакомления и понимания, какие существуют сортировки. Сама визуализация сортировок показывает принцип их работы, а также плюсы и минусы каждой из них. Также представлена работа числа Фибоначчи и Капрекара.

==Актуальность==

Сортировки используются во всех областях программирования (базы данных или математические программы) для упорядочения некоторого множества элементов, поэтому не коснуться данной темы невозможно, чтобы стать успешным программистом.
Визуализация игры «камень-ножницы-бумага» несёт развлекательный характер. Показывает работу функции Math.random.
Визуализация числа Капрекара:
- демонстрация свойств чисел;
Визуализация чисел Фибоначчи:
- демонстрация рекурсии.

==Теория==

В этом курсовом проекте мы затронули такие сортировки:

- глупая (stupid);

- гномья (gnome);

- пузырьковая (bubble);

- шейкерная (shake);

Последовательности:

- число Фибоначчи;

- число Капрекара;

Stupid sort (глупая сортировка): пробегаемся по массиву (по порядку!) и, встретив два неотсортированных «соседа», меняем их местами. После этого возвращаемся в начало и опять бежим до тех пор, пока не встретим следующих неотсортированных «соседей», если же массив отсортирован, наша работа закончена.

Gnome sort (гномья): алгоритм данной сортировки разработан гномами, сортировавшими садовые горшки (шутка!). У нас есть массив, в котором сравниваются 2 рядом стоящих элемента, если они расположены в порядке, который мы хотим получить в конце, то идём дальше, если нет – меняем местами и переходим на предыдущий. Однако бывают случаи, когда предыдущего элемента нет, тогда мы идём вперед до тех пор, пока массив не закончится. Важно! Сортировка начинается со второго элемента массива.

Bubble sort (сортировка пузырьком): также она называется сортировкой простыми обменами. Её принцип действия заключается в прохождении по массиву от начала и до конца. В результате первого прохода на второе место уходит максимальный элемент. Например: сортировка из 2 элементов: 5, 2. Сравниваем 5 и 2, 5 > 2 => меняем местами и получаем 2, 5. По сути, мы берем первые 2 элемента массива, сравниваем их, если они стоят в неправильном порядке – меняем местами и потом уже рассматриваем 2 элемент с 3 и так до последнего. После первого пробега делаем все то же самое, чтобы получить отсортированный массив.

Shake sort (шейкерная/коктейльная сортировка): принцип работы похож на пузырьковую, только пробегаться по массиву надо туда-сюда. Рассматриваем первые 2 элемента, если они отсортированы – идем дальше, если нет – меняем местами и тоже идем дальше. После того, как мы нашли максимальный элемент массива, бежим в обратную сторону, попутно сравнивая каждые 2 элемента. Важно! Отсортированные (боковые) элементы мы уже не трогаем.

Числа Фибоначчи: элементы числовой последовательности, в которой каждое последующее число равно сумме двух предыдущих чисел.

Число Капрекара: 6174
Выбираем любое четырехзначное число, в котором разряды не повторяются. После этого переставляем цифры так, чтобы получить самое большое число и самое маленькое – вычитаем и повторяем операцию с полученным числом до тех пор, пока не получим 6174. Пример: 1789.

9871-1789=8082

8820-0288=8532

8532-2358 =6174!

==Особенности реализации==

function stupidSort(){
if (T[i]<T[i-1]){
var tmp = T[i];
T[i] = T[i-1];
T[i-1] = tmp;
i = 0;
}
i++;
return i;
} 
console.log(stupidSort(T));

Для визуализации сортировок не был использован цикл for(необходимый сортировкам в частности).

function draw(){
	if (i==0){
		i=150;
	}
	ctx.clearRect(0,0,w,h);
	ctx.font = "small-caps 170px STXinwei"
	ctx.fillStyle = "DarkSlateBlue"
	ctx.fillText(z, 200, 250);
	ctx.fillText(x, 200+i, 250);
	i= i-2;
	n= n-2;
	if (n<=0){
		i=150;
		x=0;
		y=1;
		ctx.clearRect(0,0,w,h);
			ctx.fillText(z, 300, 250);
	}

}

function Fibb()
{
if(i==0){
console.log(x);
console.log(y);

  z = x + y;
  x = y;
  y = z;
}
}

Числа Фибоначчи появляются на экране с помощью отрисовки каждого шага, конечный результат - появление следующего числа Фибоначчи.

==Распределение работы==
http://tm.spbstu.ru/%D0%A1%D0%B0%D0%B7%D1%8B%D0%BA%D0%B8%D0%BD_%D0%93%D0%B5%D0%BE%D1%80%D0%B3%D0%B8%D0%B9 - работа с дизайном и технической составляющей проекта
http://tm.spbstu.ru/%D0%A6%D0%B2%D0%B5%D1%82%D0%BA%D0%BE%D0%B2%D0%B0_%D0%94%D0%B0%D1%80%D1%8C%D1%8F - работа с дизайном

==Вывод==

Подводя итоги курсовой работы, мы можем сказать, что поставленная задача была выполнена, а также достигнуты сопутствующие ей цели. В ходе выполнения данного проекта был получен ценный опыт работы с необходимым инструментарием языка JavaScript, а также мы научились использовать CSS для анимации и работать в группе.