Автоматный подход к реализации анимации в визуализаторах алгоритмов Текст научной статьи по специальности «Компьютерные и информационные науки»

ОБРАЗОВАНИЕ

Казаков Матвей Алексеевич, Шалыто Анатолий Абрамович

АВТОМАТНЫЙ ПОДХОД К РЕАЛИЗАЦИИ АНИМАЦИИ В ВИЗУАЛИЗАТОРАХ АЛГОРИТМОВ

ВВЕДЕНИЕ

Визуализаторы алгоритмов широко используются в процессе преподавания дискретной математики и теории классических вычислительных алгоритмов [1-3].

Визуализатор - программа, иллюстрирующая выполнение алгоритма при определенных исходных данных [4].

В работе [5] рассматривался метод построения визуализаторов на основе автомата Мили, а также предлагалась технология формального преобразования вычислительного алгоритма в визуализатор. Аналогичным образом логика визуализаторов может строиться на основе автомата Мура.

Ранее визуализатор рассматривался как дискретная последовательность статических иллюстраций, что в большинстве

случаев достаточно для обучения. Однако в некоторых алгоритмах статических иллюстраций мало. Примером такого алгоритма может служить пирамидальная сортировка (сортировка с помощью кучи) [6], так как процессы передвижения значений между вершинами дерева, в виде которого представлен массив, наиболее наглядно демонстрируются при помощи анимации.

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

1. АВТОМАТНЫЙ ПОДХОД К ПОСТРОЕНИЮ ВИЗУАЛИЗАТОРОВ БЕЗ АНИМАЦИИ

В работе [5] описана автоматная технология построения визуализаторов алгоритмов, состоящая из следующих этапов.

1. Постановка задачи, которую решает визуализируемый алгоритм.

2. Решение задачи в словесно-математической форме.

3. Выбор визуализируемых переменных.

4. Анализ алгоритма для визуализации. Анализируется решение с целью определения того, что и как отображать на экране.

5. Алгоритм решения задачи.

6. Реализация алгоритма на выбранном языке программирования. На этом шаге производится реализация алгоритма, его отладка и проверка работоспособности.

7. Построение схемы алгоритма по программе.

8. Преобразование схемы алгоритма в граф переходов автомата, реализующего алгоритм, который может быть как автоматом Мили, так и автоматом Мура [8, 9].

9. Преобразование автомата реализующего алгоритм в автомат визуализации.

10. Выбор интерфейса визуализатора.

11. Сопоставление иллюстраций и комментариев с состояниями автомата (иллюстрации формируются компонентом программы, называемым «рисовальщик»).

12. Архитектура программы визуали-затора.

13. Программная реализация визуа-лизатора.

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

2. ДОПОЛНИТЕЛЬНЫЕ ЭТАПЫ ДЛЯ ОБЕСПЕЧЕНИЯ АНИМАЦИИ В ВИЗУАЛИЗАТОРАХ

Для построения визуализатора с анимацией предлагается применять четыре типа автоматов:

- автомат, реализующий алгоритм

(формируется на восьмом этапе, указанном выше);

- автомат визуализации (формируется на девятом этапе, указанном выше);

- преобразованный автомат визуализации;

- автомат анимации.

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

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

Динамическая иллюстрация состоит из набора промежуточных статических иллюстраций, отображаемых на экране автоматом анимации через определенные промежутки времени. Это приводит к динамическому изменению иллюстрации в анимационном состоянии.

2.1. ДОПОЛНИТЕЛЬНЫЕ ЭТАПЫ

ТЕХНОЛОГИИ ДЛЯ ОБЕСПЕЧЕНИЯ АНИМАЦИИ

Для автоматов Мура анимацию естественно проводить (так же, как и формирование статических изображений и комментариев) в состояниях - несмотря на то, что в визуализаторе анимируемые процессы «текут», в автомате каждый из них реализует-

послефо6а&ел<1Ло о&а&игеские иллюстрации 6 клфуом ооСмяШи...

Рисунок 1. Формирование состояний автомата визуализатора.

ся только в одном состоянии. Для введения анимации в визуализатор расширим технологию за счет следующих шагов:

a) выбор состояний автомата визуализации, в которых выполняется анимация (такие состояния будем назвать анимационными);

b) построение преобразованного автомата визуализации путем замены каждого из анимационных состояний тремя состояниями, в первом из которых производятся преобразования данных, во втором выполняется анимация, соответствующая анимационному состоянию, а в третьем -отображается статическая иллюстрация;

c) разработка анимационного автомата (выполняется один раз для всех визу-ализаторов, проектируемых по этой технологии);

ё) обеспечение взаимодействия между преобразованным автоматом визуализации и анимационным автоматом;

е) разработка и реализация функции вывода каждой динамической иллюстрации, зависящей от состояния автомата визуализации и шага анимации.

2.2. ФОРМАЛИЗАЦИЯ ПОСТРОЕНИЯ АВТОМАТА ВИЗУАЛИЗАЦИИ

До перехода к более подробному рассмотрению новых этапов изложим, в чем состоит девятый этап технологии (рисунок 1).

На этом этапе в каждое визуализируемое состояние вводится выходное воздействие 10, осуществляющее формирование статического изображения и комментария в рассматриваемом состоянии. Различия в изображениях и комментариях формализуются с помощью функции Ес(8), описанной ниже, параметром которой является номер состояния Б, а обозначение С ука-

зывает, что это статическая функция. В каждом состоянии, формирующем выходное воздействие z0, переход к следующему состоянию осуществляется по событию e0 (нажатие клавиши «шаг» в интерфейсе визуализатора).

2.3. ВВЕДЕНИЕ В АВТОМАТ ВИЗУАЛИЗАЦИИ АНИМАЦИОННЫХ СОСТОЯНИЙ

Поясним каждый из вновь вводимых этапов а-е.

На этапе а выполняется выбор анимационных состояний в соответствии с особенностями алгоритма и принятыми решениями по анимации на четвертом этапе исходной технологии («Анализ алгоритма для визуализации»). Так как в алгоритме пирамидальной сортировки, который используется ниже в качестве примера, наибольший интерес представляет процесс движения элементов по вершинам «пирамиды», то состояния, в которых происходит переход, и будут выбраны в качестве анимационных.

На этапе b в автомате визуализации для получения преобразованного автомата визуализации каждое анимационное состояние формально заменяется тремя состояниями (рисунок 2).

Опишем это преобразование. Предположим, что состояние S выбрано для визуализации. Предположим также, что в этом состоянии изменяются значения визуализируемых переменных v1, ... , v . При этом переменной v¿ присваивается значение выражения < expr¿ >. Преобразование состоит в замене выбранного состояния на три состояния - S' (операционное состояние), SA (анимационное состояние) и S (завершающее состояние).

В состоянии S' значения переменных v1, ... , vn предварительно сохраняются в переменных old_v1, ... , old_vn, а также проводятся все действия, выполняемые в состоянии S автомата визуализации.

В состоянии S' преобразованного автомата визуализации, в отличие от состояния S исходного автомата этого типа, не происходит ожидания события, а выполняется переход в одно из состояний SA или S.

Переход в состояние SA производится, если переменная xlA принимает значение true (анимация включена). Анимация осуществляется, пока преобразованный автомат визуализации находится в состоянии SA. При входе в это состояние осуществляется запуск автомата анимации при помощи события e1A: старт и отображается иллюстрация Fa(S, 0), соответствующая началу анимации.

Выход из состояния анимации и переход в состояние S происходит, как по событию e0 (нажатие клавиши), так и по событию e3A (окончание анимации), и сопровождается сигналом e2A: стоп. Таким образом, обеспечивается как автоматическое, так и ручное завершение анимации.

Как отмечено выше, состояние S является завершающим. В нем выполняется отображение статической иллюстрации Fc (S). Отметим, что поскольку в преобразованном анимационном автомате присутствуют действия на дугах, то этот автомат является смешанным автоматом.

Следует отметить, что при выключении анимации (переменная xlA принимает значение false) преобразованный автомат визуализации становится изоморфным исходному автомату визуализации. Поэтому включение анимации может рассматриваться именно как расширение исходного визу-ализатора, а не его преобразование.

2.4. ПОСТРОЕНИЕ АВТОМАТА АНИМАЦИИ

На этапе c строится автомат анимации (рисунок 3). Следует отметить, что он

Ири ixofe улейное лЛимлх^ии,,,

является смешанным автоматом, поскольку содержит действия, как на дугах, так и в вершинах графа перехода.

Из рассмотрения этого рисунка следует, что автомат предназначен для изменения значения переменной step, которая хранит номер шага анимации.

Автомат анимации формирует выходные воздействия и событие:

z1A: запустить таймер - запускает таймер, который через период времени T генерирует событие eTA;

z0A: вывести FA(S№ step) - информирует «рисовальщик» о необходимости перерисовать иллюстрацию;

e3A: конец анимации - сигнализирует о том, что анимация закончилась.

Анимационный автомат реагирует на следующие события:

e1A: старт - автомат визуализации перешел в состояние, в котором должна начаться анимация;

Состояние S

v, = <expr,>; Vn = <expr„>; z0: вывести FC(S)

e0

Состояние S'

old_v1 = vf; v1 = <expr,>;

old_v„ = vn; Vn = <expr„>;

^e0

x1.

Состояние SA

1 !X1a

/ Состояние S \

V z0: вывести FC(S) J

z0A: вывести FA(S, 0) е1д: старт

e0 || e3A e2A: стоп

Рисунок 2. Преобразование анимационного состояния.

0: Начало/Пауза

Э1.

step = 0

F(state) ® ■

е2д

1: Шаг еТд: t > T 2: Следующий

V 2: иначе едЭ: конец step++; z1a: за пустить

z0a: вывести Fa(So, step) 1 : step < n - 1 v тай мер J

Рисунок 3. Автомат анимации.

е2А: стоп - автомат визуализации перешел в состояние, в котором анимация должна закончиться;

еТА - событие от таймера, по которому осуществляется переход к следующему шагу анимации.

Описанный автомат является универсальным и может быть использован в любом визуализаторе.

На этапе й автомат визуализации и автомат анимации связываются посредством событий и выходных воздействий, как показано на рисунке 4.

2.5. ОБЕСПЕЧЕНИЕ ОТОБРАЖЕНИЯ АНИМАЦИИ

На этапе е стандартная функциональность «рисовальщика» сопоставления номера состояния с текстовым комментарием и статической иллюстрацией расширяется. В режиме анимации «рисовальщик» принимает на вход значение номера шага. Другими словами, если функция ¥с реализует статические иллюстрации, а функция ГА - динамические (анимационные) иллюстрации, то

_"¿^"•¿У'У1 ii~l• l"1 t-'-lT L"1 L1 Г.1 iTl1 L.1.74 ■ ПL- Г Г~С -'и j-jijhan Г|"р'

при переходе от статики к анимации осуществляется преобразование вида:

FS (state); Fa (state, step).

При этом справедливы следующие соотношения: FS (state) = F (state); (1)

Fa (state,0) = FS (state -1); (2) Fa (state, N) = FS (state) (3) Соотношение (1) отражает тот факт, что преобразованный автомат визуализации формирует статические иллюстрации, совпадающие с иллюстрациями исходного автомата. Соотношения (2, 3) показывают, что формирование динамических (анимационных) иллюстраций в состоянии state происходит таким образом, что начальная анимационная иллюстрация совпадает со статической иллюстрацией в предыдущем состоянии автомата, а конечная - со статической иллюстрацией в состоянии state.

2.6. ВВЕДЕНИЕ НОВЫХ ЭТАПОВ В ТЕХНОЛОГИЮ

Из изложенного следует, что «рисовальщик» в визуализаторе в общем случае будет реализовываться посредством не одного, а двух операторов switch. При этом первый оператор switch будет соответствовать статическим иллюстрациям, а второй -динамическим.

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

10. Выбор состояний, в которых будет выполняться анимация.

11. Замена каждого из выбранных состояний тремя состояниями.

12. Использование автомата анимации.

13. Обеспечение взаимодействия между преобразованным и анимационным автоматами.

Рисунок 4. Схема связей автомата анимации.

14. Выбор интерфейса визуализатора.

15. Сопоставление иллюстраций и комментариев с состояниями автомата.

16. Обеспечение выбора в каждом анимационном состоянии статического либо динамического изображения, зависящего не только от состояния основного автомата, но и от номера шага анимации.

17. Архитектура программы визуали-затора.

18. Программная реализация визуа-лизатора.

3. ПОСТРОЕНИЕ ВИЗУАЛИЗАТОРА

ДЛЯ АЛГОРИТМА ПИРАМИДАЛЬНОЙ СОРТИРОВКИ

Продемонстрируем технологию на примере построения визуализатора алгоритма пирамидальной сортировки. Этот алгоритм является решением общей задачи внутренней сортировки массива.

3.1. ПОСТАНОВКА ЗАДАЧИ СОРТИРОВКИ (В ОБЩЕМ ВИДЕ)

Задача сортировки состоит в упорядочивании последовательности записей таким образом, чтобы значения ключевого поля составляли неубывающую последовательность [7]. В настоящей работе рассматривается более конкретный случай сортировки массива целых чисел. Задан массив а, состоящий из п элементов. Требуется реализовать алгоритм, который располагает элементы массива а в неубывающем порядке.

3.2. РЕШЕНИЕ ЗАДАЧИ НА ОСНОВЕ АЛГОРИТМА

ПИРАМИДАЛЬНОЙ СОРТИРОВКИ

Приведем словесную формулировку решения этой задачи.

Суть алгоритма пирамидальной сортировки заключается в построении и поддержании так называемой «кучи» или «пирамиды» [6]. Пирамида - это двоичное дерево, значения элементов в котором следуют правилу: значение родительского элемента больше или равно значению обоих дочерних элементов.

Основным механизмом для поддержки и построения «пирамиды» является «погружение»:

- элемент «пирамиды» сравнивается с обоими дочерними элементами;

- если один или оба элемента оказываются больше, чем вершина, то вершина обменивается с большим из дочерних элементов;

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

До начала решения массив представляется в виде двоичного дерева. При этом предполагается, что элемент с номером i в качестве левого и правого дочерних узлов в дереве имеет элементы с номерами 2i + 1 и 2i + 2.

Решение задачи предлагается строить в два этапа:

- на первом этапе осуществляется первичное построение «пирамиды». Для этого осуществляется последовательное «погружение» всех элементов, начиная с элемента с номером n/2 до первого включительно;

- на втором этапе все элементы последовательно исключаются из «пирамиды» путем перемещения наибольшего элемента, находящегося в вершине «пирамиды», за ее пределы. При этом на освободившееся место наибольшего элемента перемещается элемент из конца «пирамиды». Другими словами, если hsize - это текущий размер «пирамиды», то шаг состоит из уменьшения hsize на 1 и обмена элементов с номерами 0 и hsize. В конце шага для поддержания «пирамиды» элемент с вершины «погружается». По окончании (n - 1)-го шага из «пирамиды» будут исключены все элементы кроме одного, а элементы массива будут расположены в неубывающем порядке.

3.3. ВЫБОР ВИЗУАЛИЗИРУЕМЫХ ПЕРЕМЕННЫХ

Предлагается визуализировать следующие переменные:

array - массив элементов; с - текущая вершина; cmax - вершина с большим элементом при сравнениях;

hsize - количество элементов в массиве, которые входят в «пирамиду» на данном шаге алгоритма.

3.4. ВЫБОР АЛГОРИТМА ВИЗУАЛИЗАЦИИ

Предлагается визуализировать следующие особенности алгоритма для обеспе-

чения возможности наилучшего разъяснения его действия:

- процесс сравнения вершины с обоими дочерними;

- обмены элементов;

- оставшаяся часть «пирамиды».

3.5. АЛГОРИТМ РЕШЕНИЯ ЗАДАЧИ

Приведем алгоритм решения задачи на псевдокоде [6]:

1 hsize — длина a

2 usize — длина a/2

3 while true do

4 if usize > 0 then

5 usize — usize - 1

6 else if hsize > 1 then

7 hsize — hsize - 1

8 обменять элементы1 0 и hsize

9 else break

10 c = usize

11 while true do

12 cmax = наибольший из c, left(c), right(c)

13 if cmax != c then

14 обменять элементы c и cmax

15 c = cmax

16 else break

17 return результат

3.6. РЕАЛИЗАЦИЯ АЛГОРИТМА НА ЯЗЫКЕ JAVA

Перепишем программу, записанную на псевдокоде, с помощью языка Java (см. листинг 1).

В этой программе операции ввода/ вывода не приведены, так как их будет выполнять визуализатор. Простейшие операции swap() и max() опущены, поскольку их реализация не является существенной.

3.7. ПОСТРОЕНИЕ СХЕМЫ АЛГОРИТМА ПО ПРОГРАММЕ

Построим по тексту программы схему алгоритма (рисунок 5).

3.8. ПРЕОБРАЗОВАНИЕ СХЕМЫ АЛГОРИТМА В АВТОМАТ МУРА

Следуя методу, приведенному в работе [8], построим автомат Мура, соответствующий приведенной выше схеме алгоритма (рисунок 6).

Листинг 1. /**

* Реализация алгоритма пирамидальной сортировки. */

private void solve() {

// Размер пирамиды в рамках массива hsize = a.length;

// Количество вершин, которые надо «погрузить» usize = a.length / 2; while (true) {

if (usize > 0) {

// Первый этап - упорядочивание usize—; } else if (hsize > 1){

// Второй этап - обмен вершины пирамиды с последним элементом // и уменьшение размера пирамиды, hsize—;

swap(0, hsize); } else {

// Конец. Все вершины отсортированы break;

}

// Начинаем с usize:

// - на первом этапе - последний «непросеянный» элемент // - на втором этапе - всегда вершина (usize = 0) int c = usize; while (true) {

// «Погружение». Выбираем максимум из элемента и дочерних int cmax = max(c, left(c), right(c)); // Если элемент не является максивальным if (cmax != c) {

// то обмениваем его с максимумом // и продолжаем «погружение» swap(c, cmax); c = cmax; } else {

// иначе переходим к следующему шагу break;

}

}

}

}

Исходя из схемы алгоритма на рисунке 5, выделим девять состояний. В состоянии 1 осуществляется инициализация алгоритма. В состоянии 2 выполняется переход к следующему элементу на первом этапе алгоритма. В состояниях 3 и 4 элемент с вершины «пирамиды» переносится в конец и размер «пирамиды» уменьшается. Состояние 5 отвечает за выбор первой вершины для упорядочивания, в состоянии 6 выбирается мак-

симальный элемент среди текущей вершины и дочерних, а в состоянии 7 выполняется обмен текущего элемента и максимального. Состояние 8 является конечным.

3.9. ПРЕОБРАЗОВАНИЕ АВТОМАТА, РЕАЛИЗУЮЩЕГО АЛГОРИТМ В АВТОМАТ ВИЗУАЛИЗАЦИИ

В соответствии с преобразованием (рисунок 1), автомат (рисунок 6), преобра-

Рисунок 5. Схема алгоритма пирамидальной сортировки.

зуется в автомат визуализации (рисунок 7). При этом состояние 2 не является существенным для визуализации и, как следствие, не демонстрируется учащемуся, о чем свидетельствует отсутствие ожидания события е0 в этом состоянии.

3.10. ВЫБОР СОСТОЯНИЙ, В КОТОРЫХ БУДЕТ ВЫПОЛНЯТЬСЯ АНИМАЦИЯ

В алгоритме пирамидальной сортировки наиболее важным для динамического отображения является процесс обмена значений в вершинах, что визуально представляется как движение элементов по «пирамиде». Такими состояниями являются состояния с номерами 4 и 7.

3.11. ЗАМЕНА КАЖДОГО ИЗ АНИМАЦИОННЫХ СОСТОЯНИЙ ТРЕМЯ СОСТОЯНИЯМИ

В соответствии с преобразованием (рисунок 2), заменим состояния 4 и 7 тройками состояний, в первом из которых запоминается номер предыдущей вершины, во втором формируется событие на-

0: Начало

2: hsize > 1 Г 1: Инициализация Л 3: иначе 8: Конец

hsize = а.!епдИ; usize = а.!епдИ / 2 ^ -►

1: иэЕе > 0

3: Следующий 2: Следующий

hsiz е -- usiz е --

1 г 1 1 г

4: Пе ренос 1 5:Упорядочивание

swap (0, hsize) с = и size

3: ИэЕе > 1

6: Выбор максимума

2: иэ|Ее >

стах = 4: иначе

тах(с, !еК(с), пд|11(с))

7: Обмен

swap(c, стах); с = стах

1: тахс != с

ч

Рисунок 6. Автомат Мура, реализующий алгоритм пирамидальной сортировки.

'Иод. илмоа&)Ь(щией массива ... о&обрлф<ао&с& &екс&о&ие комментарии...

0: Начало

z0: вывести Fc(0)

e0

e0 && hsize > 1 1: Инициализация

Из^е = а.1епдИл; изЕе = а.1епдИл / 2; е0: вывести Рс(1) 3: e0 ^ 8: Конец ^

^ z0: вывести Fc(8)

i

1: e0 && usize > 0

3: Следующий

hsize --; z0: вы вести Fc(3)

2: Следующий

usize --; z0: вывести Fc(2)

e0

-J

1

4: П еренос e0 5: Упорядочивание

swap (0, hsize); ► с = из^е;

^ z0: вывести Fc(4) ^ ^ е0: вывести Рс(5) ^

e0

1

f 6: Выбор максимума

3: e0 && hsize > 1 cmax =

4.

max (c, left(c), right(c)); z0: вывести Fc(6)

2: e0 && usize >

0

4: e0

1: e0 && maxc != c

e0

7: Обмен

swap (c, cmax); c = cmax z0: вывести Fc(7)

Рисунок 7. Автомат визуализации.

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

3.12. ИСПОЛЬЗОВАНИЕ АВТОМАТА АНИМАЦИИ

Как отмечалось выше, для анимации используется стандартный автомат (рисунок 3).

3.13. ОБЕСПЕЧЕНИЯ ВЗАИМОДЕЙСТВИЯ МЕЖДУ ПРЕОБРАЗОВАННЫМ И АНИМАЦИОННЫМ АВТОМАТАМИ

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

3.14. ВЫБОР ИНТЕРФЕЙСА ВИЗУАЛИЗАТОРА

В верхней части визуализатора (рисунок 8) приводится следующая информация:

- в верхней части экрана изображена «пирамида». При этом ребра изображаются

Q

© ef Ь

ПКСВ © © © ® © ®

| U U л ш | 11 1* '1■1•hМ»1»1»1"1

.Г IIUM.H л МнН ПУГЛЖГМ. И.Ч-Гr+riH iMM 31

I Кг | Г ЬОП □ ^-iw* I tat* I 0Пме.5М0

Рисунок 8. Интерфейс визуализатора.

0:Начало

z0: вывести Fc(0)

e0

2: e0 && hsize > 1

L

^ 3: Следующий ^

1: Инициализация

hsize = a.length; usize = a.length / 2; z0: в ывести Fc(1)

3: e0

8: Конец

z0: вывести Fc(8) e4:конец

hsize --; z0: вы вести Fc(3) e0

1: e0 && usize > 0

x1a

4а: Анимация переноса

z0A: вывести FA(4,0) е1д; старт

f--"

4': Начало переноса

swap (0, hsize);

2: Следующий

usize -- ; z0: вывести Fc(2)

!x1a

e0 || e3A С

4: П еренос

z0: вы вести Fc(4)

e0

5: Упорядочивание

c = usize; z0: вывести Fc(5)

e0

3: e0 && hsize > 1

1: e0 && стах != c

Г

6: Выбор максимума

-s, 2: e0 && usize > 0

cmax = max (c, left(c), rig ht(c)); z0: вывести Fc(6)

4: e0

e0

7': Начало обмена 7: Обмен

о Ш с = с; swa р (с, стах); с = стах !X1a z0: вывести Fc(7) ^-J

7а: Анимация обмена

z0a: вывести Fa(7,0) е1д; старт

7

e0 || e3A

е2А: стоп

Рисунок 9. Преобразованный автомат визуализации.

лишь между элементами, входящими в текущий момент в «пирамиду»;

- темным цветом отмечена текущая вершина, а серым цветом отмечена одна или две дочерние вершины, участвующие либо в операциях сравнения, либо обмена;

- в нижней части визуализатора находится текущее состояние массива, в котором цвета ячеек повторяют цвета соответствующих элементов в «пирамиде», что помогает следить за изменениями не только в самой «пирамиде», но и в массиве, соответствующем этой «пирамиде»;

- полужирным шрифтом в массиве отмечена отсортированная часть.

Под иллюстрацией массива динамически отображаются текстовые коммента-

рии, соответствующие текущим состояниям автомата визуализации. Например, на рисунке 8 изображен комментарий, соответствующий состоянию 6. Под комментарием расположены элементы управления. Следует отметить, что по сравнению с обычным визуализатором появляется флаг управления анимацией:

«>>» - сделать шаг алгоритма; «Заново» - начать алгоритм сначала; «Анимация» - отображать или не отображать анимацию;

«Авто» - перейти в автоматический режим;

«<», «>» - изменить паузу между автоматическими шагами алгоритма.

3.15. СОПОСТАВЛЕНИЕ ИЛЛЮСТРАЦИЙ И КОММЕНТАРИЕВ С СОСТОЯНИЯМИ АВТОМАТА

Для наглядности визуализации алгоритма предлагается акцентировать внимание на следующих элементах.

В состоянии 0 отображается исходный массив, расположенный в виде дерева (рисунок 10).

В состоянии 1 вершины связываются в «пирамиду» посредством соединения соответствующих элементов ребрами (рисунок 11).

В состоянии 3 последний элемент массива исключается из «пирамиды» (рисунок 12), а в состоянии 4 происходит обмен исключенного элемента и элемента на вершине «пирамиды» (рисунок 13).

Состояние 5 соответствует началу «погружения» вершины (рисунок 14).

Состояние 6 (рисунок 8) соответствует процессу сравнения элемента с правым и левым дочерними элементами, а состояние 7 соответствует обмену элемента с большим из дочерних элементов (рисунок 15).

©

О €>

® © ® ®

1ЧЧЧ ЧЧЧЧ ЧЧЧ"1Ч Ч"1"1

(ЗСГО®-^. Акч-дач« ПШ^ВИ АЯ-И-Ь

[ :■:■ | [ 1 Пь-"'»' [ ]

Рисунок 10. Иллюстрация в состоянии 0.

7м) (V} Щр

® © © Ь ¿5 о © ©

Чкн

Ш1' Ге И111 И 14« И 1 Ч1 I Ч » 1 аЧ »1

ПИКТОМ ГКСГМ1НН

I ПС |_|Аини<1 Лир | |. | ДО ||

Рисунок 12. Иллюстрация в состоянии 3.

| ** I »ОУ ЩЛ*^^ |Т| Д>1

Рисунок 11. Иллюстрация в состоянии 1.

! ТГг,;-

мГ *

© С © © ©

I Г 1* I ]| I ш | 1 1 в 11 | ■ | 1 1 Ч Ч* Ш-1"

ОЬРЯНИ *ГС- ■: М1 1.-1-Г-п. 1 ■ 41' 1Г ¿йК1

| ^ 1 т™

Рисунок 13. Иллюстрация в состоянии 4.

йй

Т Т ч!}

(5 ® Щ © © © © ©

НКЕ<

I 1Н 11 | [■ | М 1* Ч ■ И 1 3 1 щ \ш | V | "1

Л НЧ'М-чН'Ч I

| ="* | И™ □ Ш (Т| Пет» та

Рисунок 14. Иллюстрация в состоянии 5. Рисунок 15. Иллюстрация в состоянии 7.

Рисунок 16. Иллюстрация в состоянии 8.

Рисунок 17. Динамическая иллюстрация.

Автомат Визуализации

(Ао)

Пользователь

Таймер

Автомат интерфейса

(А-,)

Начало анимации е1А е2А е4 еО Шаг визуализации

Конец анимации

Конец 210 21 1 Инициализация

Клавиша Авто Включить режим авто

е10 Выключить режим авто

Клавиша Заново 212

е11 Включить шаг и авто

213 214

Таймер 110 Выключить шаги авто

115

Запустить таймер

Автомат Визуал изации (Ао)

Визуал изатор

Таймер

Рисунок 18. Схема взаимодействия автомата интерфейса визуализатора

Состояние 8 является конечным и отображает отсортированный массив (рисунок 16).

3.16. ОБЕСПЕЧЕНИЕ ВЫБОРА В КАЖДОМ АНИМАЦИОННОМ СОСТОЯНИИ СТАТИЧЕСКОГО ЛИБО ДИНАМИЧЕСКОГО ИЗОБРАЖЕНИЯ

Для отображения динамических иллюстраций, вершины, участвующие в обме-

е11 210

Рис.унок 19. Диаграмма переходов автомата интерфейса визуализатора.

не, отображаются на соединяющем их ребре (рисунок 17).

3.17. АРХИТЕКТУРА ПРОГРАММЫ ВИЗУАЛИЗАТОРА

Для реализации пользовательского интерфейса сформирован еще один автомат, реализующий поведение интерфейса визуализатора. Схема взаимодействия этого автомата приведена на рисунке 18.

Как следует из этого рисунка, автомат взаимодействует с автоматом визуализации и управляет интерфейсом визуализатора. Таймер используется для реализации функции Авто. Диаграмма переходов интерфейсного автомата приведена на рисунке 19.

Схема взаимодействий преобразованного ав-

4: Конец

214

е4 <

212

г 2: Авто

v

еА1 j к

е2А

/- 3: Пауза

v

\ М0 ео

Рисунок 20. Схема взаимодействия преобразованного автомата визуализации.

томата визуализации изображена на рисунке 20.

Схема взаимодействия всех компонент визуализатора представлена на рисунке 21.

3.18. ПРОГРАММНАЯ РЕАЛИЗАЦИЯ ВИЗУАЛИЗАТОРА

20а

Рисовальщик

Автомат анимации (Аа)

Т

Таймер

Г

I I

| е0

е1А,

I

Автомат визуал изации (А0)

Пользователь

Для реализации визуализа-торов предлагается использовать специальную библиотеку для реализации систем взаимодействующих автоматов. Основным принципом, заложенным в библиотеку, является прямое изоморфное преобразование схем автоматов Мили/Мура и схем их взаимодействия в специальные классы. При этом вся прикладная работа по запуску и взаимодействию автоматов осуществляется этой библиотекой. Преимуществом библиотеки является возможность реализации, в том числе, и распределенной системы автоматов.

Исходные коды и пример визуализа-тора приведены на сайте http://is.ifmo.ru в разделе «Статьи».

ЗАКЛЮЧЕНИЕ

В статье предложен формализованный подход к реализации визуализаторов алгоритмов с анимацией, улучшающий восприятие алгоритмов обучающимися, что особенно важно при дистанционном обучении. Он расширяет технологию построения визуали-заторов алгоритмов на основе автоматного подхода, предложенную в работе [5].

е10,е11

Т1

е2,

I е4

\/

Автомат интерфейса пользователя

(А1)

—Л-г

40 I '

210, 211, 212, 213, 214 "

В изуализатор

215

Таймер

Рисунок 21. Схема взаимодействия компонент визуализатора.

Литература

1. Интернет-школа программирования. http://ips.ifmo.ru

2. Казаков М.А., Мельничук О.П., Парфенов В.Г. Интернет школа программирования в СПбГИТМО (ТУ). Реализация и внедрение // Материалы Всероссийской научно-методической конференции «Телематика-2002». СПб.: 2002, с. 308-309. http://tm.ifmo.ru/tm2002/db/doc/get thes.php?id=170

3. Столяр С.Е., Осипова Т.Г., Крылов И.П., Столяр С.С. Об инструментальных средствах для курса информатики // Труды II Всероссийской конференции «Компьютеры в образовании». СПб.: 1994.

4. Казаков М.А., Столяр С.Е. Визуализаторы алгоритмов как элемент технологии преподавания дискретной математики и программирования // Материалы международной научно-методической конференции «Телематика-2000». СПб.: 2000.

5. Казаков М.А., Шалыто А.А. Использование автоматного программирования для реализации визуализаторов // Компьютерные инструменты в образовании. СПб.: 2004. № 2, с. 19-33. http:// is.ifmo.ru/works/art vis/

6. Кормен Т., Лайзерсон Ч., Ривест Р. Алгоритмы. Построение и анализ. М.: МЦМНО, 2000.

7. Ахо А., Хопкрофт Д., Ульман Д. Структуры данных и алгоритмы. М.: «Вильямс», 2000.

8. Шалыто А.А., Туккель НИ. Преобразование интеративных алгоритмов в автоматные // Программирование. 2002. № 5. http://is.ifmo. ru/works/iter/

9. Шалыто А.А. SWITCH-технология. Алгоритмизация и программирование задач логического управления. СПб.: Наука, 1998. http://is.ifmo.ru/books/switch/1

Казаков Матвей Алексеевич, аспирант кафедры «Компьютерные технологии» Санкт-Петербургского государственного университета информационных технологий, механики и оптики (СПбГУ ИТМО), капитан команды СПбГУ ИТМО, занявшей третье место на командном чемпионате мира по программированию ACM 199811999гг.,

Шалыто Анатолий Абрамович, доктор технических наук, профессор, заведующий кафедрой «Технологии программирования» СПбГУ ИТМО.

© 1авторы, 2005. Our authors: 2005.