УДК 62-50+531.3
МОДЕЛИРОВАНИЕ И АНИМАЦИЯ ХОДЬБЫ ПЛОСКИХ МОДЕЛЕЙ ШАГАЮЩИХ АППАРАТОВ
В.А. Телегин, М.И. Кайгородцев
Предложены алгоритмы моделирования и анимации ходьбы шагающих аппаратов, описанных в статье [1]. Продемонстрировано применение для этих целей свободно распространяемых информационных технологий (SVG, CSS, JavaScript). Для построения среды имитационного моделирования ручного управления ходьбой применена архитектура MVC. Описан опыт использования полученных результатов в учебном процессе.
Введение. В статье [1] синтезировано множество структурных схем шагающих аппаратов, которые можно моделировать шарнирными механизмами на плоскости (далее ША), а также в зависимости от подвижности корпуса в трёхопорном состоянии выделены три класса кинематических схем (КС) и предложены схемы кинематических расчётов в процессах подготовки и выполнения шага. Настоящая статья является продолжением статьи [1]. Здесь на примерах изложена методика визуализации ША в статике и динамике, предложены подходы для реализации ручной и автоматической анимации движений ША и описана среда имитационного моделирования системы ручного управления ходьбой.
Для визуального моделирования и анимации движений ША предлагается использовать язык разметки двухмерной векторной графики (SVG) в паре с каскадными таблицами стилей (CSS), а также язык программирования JavaScript (JS). Архитектуру MVC (Model-View-Control) эффективно использовать для определения структуры XML-приложения, особенностей кодирования SVG-моделей ША, их представления (визуализации на Web-странице) и удобного ручного управления ими. Эти технологии рекомендуются для использования по следующим причинам. Во-первых, из-за их простоты. Во-вторых, из-за их Web-ориентации. В-третьих, они взаимно дополняют друг друга. В-четвёртых, они бесплатны (распространяются свободно). Литературы по CSS, JavaScript и MVC достаточно много. Книг по SVG на русском языке практически нет, однако много информации на специализированных сайтах. Мы можем рекомендовать книгу [2], где на стр. 567-572 изложены минимальные сведения по SVG и приведены Web-ресурсы, относящиеся к SVG.
1. Схемы ША. Звенья рассматриваемых IIIА образуют друг с другом шарниры, оси вращения которых параллельны друг другу и перпендикулярны плоскости движения ША. В состав ША входят корпус и ноги. Каждая нога образует с корпусом шарнир, центр которого называется точкой подвеса ноги. На одном или двух концах нога имеет стопу. Звено ноги, заканчивающееся стопой, называется голенью. Если у ноги более одного звена, то предшествующее голени звено называется бедром. Устройство стопы и механизмы её связи с концами ног позволяют ей находиться в двух возможных состояниях - в опорном и в переносном. В опорном состоянии стопа образует с опорной поверхностью шарнир. При переходе в переносное состояние стопа поднимается над опорной поверхностью и вместе с концом ноги получает возможность перемещаться в новое опорное состояние для подготовки к очередному шагу. На рисунках КС изображены их виды сверху. Поэтому конструкции стоп и механизмы их связи с концами ног не показаны (элементы связи стоп с концами ноги не видны). Для рассматриваемых здесь задач в изображении этих механизмов нет необходимости. Сама стопа в опорном состоянии изображена залитым (тёмным) кругом, а в переносном - не залитым (белым) кругом. Шарнир изображается белым кругом с толщиной линии в три раза меньшей, чем у стопы. Эти особенности кодируются в стилевом файле ctr.css.
Из возможного многообразия ША здесь рассматриваются только те, у которых ноги имеют один тип или относятся к двум разным типам. Тип ноги может быть (см. таблицу) однозвенным (тип 1), двухзвенным (тип 2), трёхпарным (тип 3), четырёхпарным (тип 4) или пятипарным (тип 5). В первой строке таблицы приведены номера типов ног. Во второй строке - названия этих типов, и в третьей - их изображение на рисунках КС.
Перечисленные свойства рассматриваемых ША связаны с ограничениями, которые учитывались в процессе синтеза их структурных схем. На рис. 91, 92, 93 статьи [1] представлены расчётные схемы для каждого из трёх возможных классов ША. Эти рисунки и связанные с ними обозначения здесь используются для описания алгоритмов ходьбы рассматриваемых ША.
Таблица
Типы ног ША
1 2 3 4 5
Однозвенная Двухзвенная Трёхпарная Четырёхпарная Пятипарная
нога нога нога нога нога
о # I О—^ и
С каждым звеном ноги жестко связана ось абсцисс системы координат (СК) с началом в шарнирной точке. С целью уменьшения громоздкости рисунков условимся эти СК не изображать, но при этом помнить, что для ноги первого типа ось абсцисс (далее ось) направлена в центр стопы. Для ноги второго типа ось бедра направлена в шарнирную точку голени, а ось голени направлена в центр стопы. Для ноги третьего типа ось направлена перпендикулярно прямолинейным участкам звена в сторону полукруга. Для ноги четвёртого типа ось бедра направлена в шарнирную точку голени, а ось голени направлена перпендикулярно прямолинейным участкам в сторону полукруга. Для ноги пятого типа ось бедра направлена перпендикулярно прямолинейным участкам в сторону полукруга, а оси каждой голени направлены в центры своих стоп.
2. SVG-модели ног. Для визуализации и анимации ША удобно использовать язык SVG. Как в любом XML-словаре элементы (теги) SVG отражают предметную область, т. е. интуитивно понятны и для их практического применения достаточно познакомиться с несколькими примерами, что мы и сделаем.
Для визуализации ША в статике достаточно использовать группирующий элемент <g> (от слова group - группа) и следующие графические элементы (ГЭ): <circle> (окружность) - для разметки шарниров и стоп, <line> (линия) - для разметки однопарных и двухпарных звеньев ноги или многопарного корпуса с совмещёнными точками подвеса ног, <polygon> (полигон, многоугольник) - для разметки многопарных корпусов изображаемых многоугольниками, <path> (путь) - для разметки ног и многопарного корпуса, в представлении которых используются криволинейные отрезки, например, дуги окружностей.
В листинге 1 приведён SVG-документ, содержащий разметку однозвенной ноги. Если открыть файл (noga l.svg) с этой разметкой в браузере, то на Web-странице появится рисунок как в первой ячейке третьей строки таблицы [1].
Листинг 1. SVG-разметка однозвенной ноги.
<?xml version="1.0"?>
<?xml-stylesheet href-"str.css" type="text/css"?>
<svg version="l.l" viewBox=”0 0 300 300” width="300" height— "300" xmlns="http://www. w3. org/2000/svg">
<g transform="translate(100,150) rotate(-90)">
<g id=”qn” transform="rotate(135)">
<line class="zveno" x2="J00"/>
<circle class="sharnir" r="15"/>
<circle class="stopa" cx="100" r="15"/>
</g>
</g>
</svg>
Здесь первая строка является стандартной для всех XML-документов и содержит минимальный набор кода: указана только XML-версия. Во второй строке указана ссылка на внешний стилевой файл str.css и размечен его тип (содержимое стилевого файла приведено в листинге 5). В
О
-*Х
Рис. 1
следующих трёх строках описан корневой элемент SVG-документа, содержащий пять атрибутов. В первом атрибуте указана SVG-версия. Атрибут viewBox задаёт область просмотра документа. Первые два числа в значении атрибута представляют собой координаты х=0 и у=0 левого верхнего угла области просмотра. Атрибут width задаёт ширину изображения, атрибут height - высоту изображения. Последний атрибут указывает, что в названиях SVG-тегов префикс не используется, а значением этого атрибута является типовой адрес SVG-pecypca.
В элемент <svg> вложен группирующий элемент <g>. Значением его атрибута transform являются параметры (100,150) сдвига (translate) всей группы относительно области просмотра и угол (90) поворота {rotate) этой группы, где 100 - горизонтальный сдвиг (вправо), 150 - вертикальный сдвиг (вниз), 90 - угол поворота против хода часовой стрелки. Эти параметры позволят в дальнейшем разметить точки подвеса ног к корпусу ША и указать начальные углы поворота ног относительно корпуса. Описанную группу условимся называть группой подвеса ноги. Здесь углы (по умолчанию) измеряются в градусах, сдвиги (линейные перемещения) - в относительных единицах. Положительный знак угла в разметке соответствует повороту по ходу часовой стрелки. Поэтому, чтобы наблюдать на мониторе положительный поворот звена (против хода часовой стрелки), необходимо в разметке указывать отрицательные значения углов.
В группу подвеса ноги, т. е. в первый элемент <g>, вложен второй группирующий элемент. Он имеет атрибут id, значением которого является уникальный идентификатор угла поворота ноги (в листинге 1 это - qn). Число после символа q равно уникальному номеру звена. Значением атрибута transform является угол поворота звена вокруг начала своей оси. В процессе анимации это значение будет меняться автоматически (программным путём), т. е. либо на основе SVG-разметки анимации, либо при помощи JS-кода. Поэтому описанную группу условимся называть группой вращения ноги относительно группы подвеса ноги.
В группу вращения ноги, т. е. во второй элемент <g>, вложены три ГЭ. Первый из них отнесён к классу zveno и размечает линию (стержень звена). Начало линии имеет координаты х1 =0, yl =0. Конец линии имеет координаты *2=100, у2=0, т. е. это горизонтальная прямая длиной в 100 ед. (нулевые значения атрибутов в разметке ГЭ можно опускать, что здесь и сделано для уменьшения объёма кода). Второй ГЭ отнесён к классу shamir и размечает окружность (образ шарнира ША) с центром в точке с координатами сх=0, су- 0 и радиусом г=15 ед. Последний ГЭ отнесён к классу stopa и размечает окружность (образ стопы) с центром в точке с координатами сх=100, су=0 и радиусом г=15 ед. Все координаты указаны относительно СК группы вращения ноги. Важно понимать, что при изменении значения числа в скобках после кода rotate повернётся вся нога.
Ось абсцисс СК ноги здесь не размечена, но согласно определению она начинается в шарнирной точке и направлена в центр стопы, т. е. направлена из начала в конец ГЭ <line>.
На рис. 1 изображены некоторые детали взаимодействия элементов описанной разметки.
Более сложный пример содержит следующий листинг. Здесь и далее в листингах SVG-моделей не приводятся первые три и последняя строки, описанные в листинге 1.
Листинг 2. SVG-разметка двухзвенной ноги.
<g transform="translate(l00,300) rotate(0)">
<g id= ”ql ” tramform="rotate(0) ">
<line class="zveno" x2="100"/>
<circle class="shamir" r="15"/>
<g transform~"translate(100,0) rotate(0)">
<g id=”q2” tramform="rotate(0)">
<line class="zveno" x2="100"/>
<circle class="shamir" r—'15"f>
<circle class="stopa" cx="100" r~"15"/>
</g> </g> </g> </g>
В листинге 2 применена группа подвеса ноги с атрибутом transform="translate(100,300) rotated) ", группа вращения бедра ноги с id-"ql", группа подвеса голени к бедру с атрибутом trans-form="translate(100,0) rotate(O)" и группа вращения голени относительно бедра с id="q2". Использование вложенных друг в друга группирующих элементов позволяет моделировать любые структуры ША. Здесь оси абсцисс СК звеньев ноги согласованы с разметками ГЭ <line>, т. е. их
Рис. 2 Рис. 3
Л
Рис. 4 Рис. 5
начала совпадают, а направления определяются концевыми точками линий. На рис. 2-5 изображены результаты загрузки этого файла в браузере для следующих значений атрибутов transform групп вращения бедра и голени: rotate(0), rotate(0) (рис. 2); rotate(-90), rotate(-90) (рис. 3); rotate (90), rotate(0) (рис. 4); rotate(90), rotate(90) (рис. 5).
В следующем листинге 3 для разметки трёхпарной ноги использован ГЭ <path>.
Если в листинге 3 вместо ГЭ <path> использовать ГЭ <line х1="~100" х2="100">, то трёхпарная нога будет выглядеть как на рис. 6, в котором шарнир воспринимается как сложный, т. е. связывающий два подвижных звена, что неправильно (не это имеется ввиду). Поэтому для разметки звена трёхпарной ноги используется ГЭ <path>. В значении его атрибута d="m0,-100 10,75а25,25 0 0,1 0,5010,75"кодируется вид пути. Здесь использованы три команды -т, I, и а.
Листинг 3. SVG-разметка трёхпарной ноги.
<g transform="translate(200,200) rotate(0)">
<g id= ”ql" transform="rotate(0) ">
<path class="zveno" d="m0,-10010,75a25,25 0 0,1 0,5010,75"/>
<circle class="sharnir" r="l5"/>
<circle class="stopa" cx="-100" r="15"/>
<circle class="stopa" cx="100" r="15"/> </g> </g>
Рис. 8
За командой m следуют координаты (0, -100) начала пути в СК группы вращения с id= ”ql ”, содержащей рассматриваемый путь.
За командой / следуют параметры (0, 75) сдвига конца первого вертикального отрезка пути относительно его начала, которое совпадает с началом пути, здесь 0 - сдвиг по горизонтали, 75 -сдвиг по вертикали вниз.
За командой а следуют семь чисел (25, 25 0 0, 1 0, 50), которые кодируют эллиптическую дугу, проходящую из конца предшествующего участка пути в точку с параметрами сдвига (0, 50) относительно этого конца. Размер и ориентация дуги определяются двумя радиусами (25, 25), что соответствует окружности (как частному случаю эллипса), и углом, который указывает, как эллипс в целом повёрнут относительно текущей СК. Значение угла кодируется третьим числом, в нашем случае это - ноль. Центр эллипса вычисляется автоматически для удовлетворения ограничений, наложенных флагами (предпоследней парой чисел - 0, 1). Существует четыре различные дуги (два разных эллипса, каждый с двумя различными изгибами дуги), которые можно провести через две точки. Флаг большой дуги (первое число пары) и флаг изгиба (второе число пары) указывают, какая из четырех типов дуг будет нарисована. Из четырех кандидатов дуги два представляют большую дугу (не менее 180 градусов), и два представляют малую дугу (не более 180 градусов). Если флаг большой дуги равен единице, то будет выбрана одна из больших дуг, иначе (флаг большой дуги равен нулю) будет выбрана одна из меньших дуг. Если флаг изгиба равен единице, то дуга будет нарисована в направлении «положительного угла». Значение, равное нулю, заставляет рисовать дугу в направлении «отрицательного угла».
За второй командой I следуют параметры сдвига (0, 75) конца второго вертикального отрезка пути относительно конца эллиптической дуги.
Представление описанной разметки приведено в третьей ячейке третьей строки таблицы 1. Согласно определению ось трёхпарной ноги направлена перпендикулярно линии, соединяющей две стопы в выпуклую сторону эллиптической дуги. Если в группе вращения ноги числовое значение атрибута transform будет равно 90, то нога примет положение на рис.7, если это значение равно -90, то нога примет положение как на рис. 8.
Разметка SVG-моделей остальных типов ног осуществляется путём комбинирования приведённых разметок.
3. Структура и пример SVG-модели ША. Для кинематических расчётов в процессах подготовки и выполнения каждого шага используется опорная система координат (ОСК) [1]. Поэтому разметка ША начинается с группирующего элемента, имеющего атрибут id= "ОСК”. В значениях атрибута transform этого элемента используются числа (X, Y, Q), описывающие положение ОСК в абсолютной системе координат с началом в левом верхнем углу монитора. Здесь X- гори-
W >-> Щ Рис. 6
Рис. 7
зонтальный сдвиг ОСК вправо, Y - вертикальный сдвиг ОСК вниз, Q - поворот ОСК вокруг своего начала. Например, в атрибуте transform="translate(250,100) rotate(-45)" размечены следующие значения этих параметров: Х=250, У=100, Q=45.
Группирующий элемент с id="xy”, вложенный в предшествующий элемент <g>, в своём атрибуте transform содержит координаты (х, у) начала СК жёстко связанной с корпусом в ОСК. Эту группу будем называть группой переноса корпуса. Она содержит ещё один элемент <g> с id="q". Эту группу будем называть группой вращения корпуса вокруг начала своей СК, так как в атрибуте transform этот группирующий элемент содержит угол, откладываемый от оси абсцисс ОСК до оси абсцисс системы координат корпуса (СКК). Этот <g>-элемент в качестве дочерних содержит, во-первых, один из ГЭ разметки корпуса, во-вторых, группу подвеса для каждой ноги. Значением атрибута transform /'-й по порядку группы подвеса ноги являются координаты точки подвеса /-Й ноги в СКК и угол поворота оси первого звена ноги, откладываемый от оси абсцисс СКК. Группа подвеса ноги содержит разметку соответствующей ноги (см. листинги 1-3).
Пример разметки SVG-модели ША приведён в листинге 4. Ось корпуса здесь не размечена, но подразумевается, что её начало находится в точке подвеса задней ноги и направлена она в точку подвеса передней ноги. В разметке у каждой группы вращения имеется свой уникальный /¿/-атрибут (атрибут идентификатор). Значением этого атрибута является обозначение (имя) угла поворота соответствующего звена ноги. В листинге 4 приняты следующие идентификаторы групп вращения: q - угол поворота оси корпуса, откладываемый от оси абсцисс ОСК, q\ - угол поворота оси передней (трёхпарной) ноги, откладываемый от оси корпуса, q2 - угол поворота оси задней (трёхпарной) ноги, откладываемый от оси корпуса, q3 - угол поворота оси бедра средней (поддерживающей) ноги, откладываемый от оси корпуса, q4 - угол поворота оси голени средней ноги, откладываемый от оси бедра. В SVG-разметке анимации ША эти атрибуты используются для связи каждого элемента анимации с соответствующей группой вращения. Путём изменения атрибута transform в группе переноса корпуса, в группах вращения корпуса и звеньев его ног осуществляется анимация SVG-модели ША. Представление рассматриваемой разметки браузером для разных значений атрибутов перечисленных групп изображено на рис. 9-12.
Листинг 4. Фрагмент SVG-разметки ША. ГП - группа подвеса
<g id=”OCK” transform="translate(300,300) rotate(0)">
<g id= ”xy ” transform="translatef10,30) ">
<g id=”q” transform="rotate(45)">
<path class-"zveno" d=" m0,-10010,75a25,25 00,1 0,5010,75 "/>
<g transform="translate(l 00,0) rotate(O) "> // ГП передней ноги <g id= ”ql ” transform="rotate(45) "> //поворот передней ноги <path class="zveno" d=" mO,-l0010,75a25,25 0 0,1 0,50l0,75"/>
<circle class—"sharnir"r="15"/>
<circle class="stopa" cx="100"r—"15”/>
<circle class="stopa" cx="-100"r=" 15"/> </g> </g>
<g transform="translate(-100,0) rotate(0)"> // ГП задней ноги <g id= ”q2 ” transform="rotate(-45) "> //поворот задней ноги <path class="zveno"d="mO,-10010,75a25,25 0 0,1 0,50l0,75"/>
<circle class-"sharnir"r="15"/>
<circle class="stopa" cx="100" r="15"/>
<circle class="stopa" cx="-100"r="15"/> </g> </g>
<g transform="translate(0,0)" rotate(0)> //ГП средней ноги <g id=”q3” transform="rotate(45)"> //поворот бедра <line class ="zveno"x2~"100"/>
<circle class= "sharnir”r— "15"/>
<g transform="translate(100,0) ">
<g id=”q4” transform="rotate(0)">//поворот голени <line class = "zveno " x2="100 "/>
<circle class="sharnir"r="15"/>
<circle class—'stopa" cx="100" r="15"/>
</g></g></g> </g> <7g>
Рис. 9
У-Ч ......>-4......../"N4
yr
Рис. 10
Рис. 11
Рис. 12
В приведённых разметках стилевое оформление КС описано во внешнем CSS-файле str.css, содержимое которого представлено в листинге 5.
Листинг 5. Содержимое стилевого файла str.css.
.sharnir {strоке-width: 3; fill: white; stroke: black;}
.stopa {stroke-width: 9; fill: red; stroke: black;}
.zveno {stroke-width: 6; stroke: black}
.korpus {stroke-width: 8; fill: red; stroke: black}
Здесь в начале каждой строки после точки указано значение атрибута class ГЭ из стилизуемого SVG-документа. Далее в фигурных скобках через точку с запятой перечислены стилевые пары, т. е. название (имя) стиля и его значение, разделённые друг от друга двоеточием. В листинге 5 используются следующие три стиля: stroke-width - толщина линии, которой изображается ГЭ, fill - цвет заливки замкнутых фигур, stroke - цвет линии. Из стилевых значений видно, что толщина линии ГЭ, с помощью которого изображается стопа, в три раза больше, чем у линии которой изображается шарнир.
4. SVG-анимация SVG-моделей ША. Для разметки процессов перемещения корпуса ША и вращений звеньев подвешенных к нему ног можно использовать несколько подходов. Архитектуре MVC соответствует подход, в котором не нарушается код SVG-модели ША. Поэтому в элементах анимации (ЭА) рекомендуется использовать ссылки на идентификатор анимируемого элемента. В этом случае ЭА <animateTransform> можно размещать независимо от кода SVG-модели ША. Например, если в конце листинга 4, разместить ЭА
<animateTransform xlink:href="#ql" attributeName="transform" type="rotate"
from="0" to="60" begin="2s" dur="10s"/>, то через две секунды (begin="2s") после загрузки в браузер этого листинга передняя нога (xlink:href="#ql") в течении десяти секунд (dur=”10s") повернётся (attributeName="transform" type="rotate,r) относительно корпуса на 60 градусов (from="0" to="60") по ходу часовой стрелки. Здесь в скобках указаны атрибуты и их значения, размечающие описанный функционал. ЭА <animateTransform xlink:href="#xy" attributeName="transform" type~"translate"
values="0,0;l 10,105;0,0" begin="2s" dur="10s"/>, размечает поступательное перемещение (attributeName="transform” type="translate”) корпуса (xlink:href="#xy") вдоль линии из точки с координатами (0, 0) в точку с координатами (110, 105) и обратно (values="0,0; 110,105; 0,0”).
Для анимации звеньев в открытых ветвях, например, звеньев ноги, находящихся в состоянии переноса стопы в новое опорное положение, достаточно использовать описанный здесь подход. Вращения контурных звеньев ША являются зависимыми. В них повороты должны быть согласованы со связями. Учёт произвольных связей только средствами SVG-разметки в общем случае затруднителен. Для громоздких кинематических расчётов рекомендуется дополнительно использовать язык программирования. Но для анимации простых походок некоторых ША можно обойтись только SVG-средствами.
Для разметки трёхсекундной анимации рассматриваемого ША из положения на рис. 11 в положение на рис. 12 плоскопараллельным шагом, т. е. когда ось корпуса не вращается, достаточно применить к SVG-модели в листинге 4 следующие ЭА
<animateTransform id= "XY"xlink:href= "#xy" attributeName= "transform" type="translate"
values="l00,-100; 120,-83; 145,-67; 168,-56; 170,-50; 182,-48 "dur="3s"begin="0s"/> <animateTransform id= "Q1"xlink:href= "#ql" attributeName="transform" type="rotate"
from="0" to="60" dur="3s"begin="0s"/> <animateTransform id="Q2"xlink:href="#q2" attributeName="transform" type="rotate"
from="0" to="60" dur= "3s"begin= "Os"/> <animateTransform id="Q3"xlink:href="#q3" attributeName= "transform" type^"rotate"
values="-45, -49, -53, -57, -61, -65"dur="3s"begin="0s"/>
<animateTransform id="Q4"xlink:href="#q4"attributeName="transform"type="rotate"
values="-l 15, -112, -109, -108, -107, -106"dur="3s"begin="0s"/>
Здесь считается, что максимальный размах передней и задней ноги с учётом конструктивных ограничений составляет 120°, т. е. от -60° до 60°. Для разметки числовых значений координат начала СКК и углов поворота звеньев средней ноги используются атрибуты values="набор
значений". Наборы значений вычисляются заранее и заносятся в качестве значений атрибута values соответствующего ЭА.
Более общим является подход, когда анимируемые значения всех переменных записываются в атрибут values ЭА animateTransform. Поэтому с целью последующего программного формирования и записи этих значений в атрибуты values рекомендуется идентифицировать каждый ЭА, что мы и сделали, присвоив ЭА идентификаторы XY, Q, Q1, Ql, Q3, Q4. Эти идентификаторы используются для эффективного поиска ЭА и связи JS-функций, вычисляющих анимируемые значения с атрибутами values найденных ЭА. Способ формирования и записи значений в атрибуты values описан в конце следующего раздела.
5. JS-анимация SVG-моделей ША. Вычисление набора значений углов поворота контурных звеньев ША перед их SVG-анимацией удобно осуществлять при помощи соответствующего JS-кода. Для ручной подготовки и выполнения шага удобно иметь средство, позволяющее перемещать корпус и поворачивать звенья подвешенных ног путём «кликов» мышкой по соответствующим элементам имитируемой панели управления или видимым элементам управляемого объекта. В листинге 6 приведён JS-код, позволяющий осуществлять повороты звеньев ног любого ША относительно его корпуса и изменять состояния каждой стопы путём «кликов» кнопками мыши во внутренние области соответствующих кругов.
Листинг 6. JS-код ручной анимации SVG-моделей ША
window. onload=assignKeys; var dq = 5; // приращение угла поворота шарнира
// Функция изменения угла поворота шарнира
function q(evt) { var cir = evt.target; varX = cir.parentNode; if (evt.button == 1) d=-dq; else d = dq; db=parseFloat(cir.getAttribute('q))+d; cir.setAttribute('q',db);
X.setAttribute('transform', 'rotate('+db+')); }
// Функция изменения состояния стопы function stp(evt) {varX= evt.target; s = X.getAttribute('fill); if(s == 'white)X.setAttribute('fill', 'red') elseX.setAttribute('fill', 'white');}
// Функция настройки ручной анимации
function assignKeysQ { var keys = document.getElementsByTagName('circle'); for(var i=0; i<keys.length; i++) {var key=keys.item(i); var c=key.getAttribute('class'); if (c == 'sharnir) {key.setAttribute('onclick', 'q(evt)');
var qstr=key.parentNode.getAttribute('transform); key.setAttribute('q',qstr.substring(7,qstr.length-1));} else {key.setAttribute('onclick','stp(evt)'); key.setAttribute('fill','red');} } }
Здесь по событию «конец загрузки документа в окно» {window.onload) вызывается функция assignKeysf) настройки ручной анимации, которая выполняет следующие действия: формирует список key элементов <circle> из загруженного SVG-документа; в элементы класса sharnir заносит атрибуты onclick=”q(evt) ”, которые обеспечивают вызов функции q(evt) после каждого «клика» кнопкой мыши на шарнирной окружности; в элементы класса sharnir заносит также XML-атрибуты q= ’’целое число”, где целое число берётся из атрибута transform группы вращения звена, и в дальнейшем используется функцией q(evt) в качестве текущего значения угла поворота этого звена; в остальные элементы заносит атрибуты onclick=”stp(evt)’\ которые вызывают функцию stp(evt) после каждого «клика» кнопкой мыши на окружности класса stopa, а также атрибуты fill=”red”, что обеспечивает изменение состояния стопы. Вызов функции q(evt) при нажатии левой кнопки мыши приводит к увеличению угла поворота звена на dq=5 градусов. Вызов функции q(evt) при нажатии любой другой кнопки мыши приводит к уменьшению текущего угла поворота звена на 5 градусов. Вызов функции stp(evt) при нажатии левой кнопки мыши приводит к изменению цвета заливки круга стопы с красного на белый и наоборот.
Аналогично устроены и другие JS-функции, обеспечивающие необходимый функционал для ручной и автоматической анимации ходьбы ША. Например, метод обрабатываемого SVG-документа getElementById(“Q3”).setAttribute(“values”, calcQ3Q) находит в SVG-модели анимации ЭА с id=”Q3” и в его атрибут values записывает результат вызова JS-функции calcQ3(), которая вычисляет требуемые значения углов поворота бедра средней ноги относительно корпуса и возвращает их в виде строки, выполняющей роль значения атрибута values. После аналогичных операций со всеми ЭА можно запускать SVG-анимацию всей SVG-модели ША.
Важно обратить внимание на то, что разработанный JS-код программным путём настраивает любой экземпляр статической SVG-модели ША для её подготовки к ручной и автоматической
анимации. Например, создавая события onclick программным путём, можно использовать код в листинге 6 для автоматической анимации ША, но код для выбора последовательности действий и логики автоматического управления должен разрабатываться дополнительно. Таким образом, не меняя SVG-модели ША, создан код для ручного управления ходьбой, который можно использовать для имитации автоматического управления.
6. Имитация ручного управления ходьбой ША. В кинематических расчётах процессов подготовки и выполнения шага используется общий для всех ША выбранного класса JS-объект OCKSJ, где j - число подвижностей корпуса в трёхопорном состоянии ША, и частный JS-объект, который отражает кинематические особенности исследуемого ША. Например, частный объект S2312 соответствует SVG-модели ША (в листинге 4) с двумя трёхпарными ногами и одной двузвенной поддерживающей ногой (костылём). Принцип кодирования схем ША описан в статье [1]. Объект OCKSJ служит для описания и изменения положения ОСК относительно абсолютной СК. Он содержит объекты, которые обеспечивают изменение положений корпуса относительно ОСК и контурных звеньев ног относительно корпуса. Частный JS-объект служит для описания и изменения положений переносных звеньев ног относительно корпуса.
В качестве интерфейсных элементов имитируемого пульта ручного управления рекомендуется использовать видимые части КС ША. Это может быть сам ША или его копия (клон).
Для ША с одноподвижным корпусом роль управляющего элемента может выполнять шарнир поводка. Каждый «клик» по этому шарниру приводит к перемещению корпуса и контурных звеньев его ног относительно ОСК. Величины этих перемещений зависят от заданного квантового угла поворота поводка, например, dq=5 (градусов). Переносные звенья ног можно вращать независимо друг от друга способом, который описан в предшествующем разделе. Изменение состояния стоп удобно осуществлять «кликами» левой кнопкой мыши на круге, представляющем соответствующую стопу.
Для ША с двухподвижным корпусом можно использовать JS-код, позволяющий при помощи нажатой кнопки мыши перетаскивать корпус в новое положение (без изменения ориентации относительно ОСК). Однако расчёты по громоздким формулам с различными тригонометрическими функциями не позволяют просто и эффективно осуществлять такой способ имитации управления поступательным перемещением корпуса. Проще использовать JS-код обработки клавиш, например, за клавишами «стрелка вверх», «стрелка вниз» закрепить управление поступательным перемещением корпуса вдоль оси ординат ОСК, а за клавишами «стрелка вправо», «стрелка влево» закрепить управление поступательным перемещением корпуса вдоль оси абсцисс ОСК.
Для ША с трёхподвижным корпусом аналогично при помощи клавиш можно управлять поступательным перемещением корпуса относительно ОСК и его поворотом вокруг начала СКК.
В процессе ручного управления перемещением ША значения всех переменных параметров движения сохраняются в оперативной памяти и при необходимости их можно запомнить, например, записав в качестве значений атрибута values соответствующих ЭА. Такой подход позволяет вручную формировать, запоминать, редактировать и автоматически воспроизводить процессы ходьбы исследуемых ША.
Следует заметить, что для построения программных движений (ПД) ША такой подход является наиболее эффективным. Он аналогичен известному способу формирования ПД манипуляционных систем роботов по первому циклу, в котором оператор перемещает захват манипулятора (или кинематически подобного задающего устройства) вдоль программной траектории. При этом в памяти программоносителя записываются значения непосредственно управляемых углов поворота звеньев. Аналитическая разработка ПД манипуляторов является достаточно сложной (в вычислительном смысле) задачей. Аналитическая разработка ПД ША ещё сложнее из-за наличия нескольких замкнутых контуров и открытых ветвей, возможных столкновений контурных и переносных звеньев друг с другом и с корпусом, необходимости учёта внешней среды и препятствий и других особенностей ША.
Действительно, только расчетным путём очень сложно сформировать ПД, например, ША на рис. 9. Можно или нет, не переставляя среднюю ногу, избежать столкновений её звеньев с задней ногой в процессе завершения начатого (на рис. 9) полного шага? Из рис. 10 видно, что столкновение может произойти, если звенья ног находятся на одном уровне. Если же звенья средней ноги по уровню ниже крайних ног и в положении на рис. 10 стопы крайних ног левого борта нахо-
дятся в переносном состоянии, то такого столкновения можно избежать. Возможен также вариант изменения конфигурации звеньев средней ноги, т. е. перевод их из положения на рис. 10 (коленкой назад) в положение на рис. 11 (коленкой вперёд). Для анализа подобных состояний ША очень важно иметь ручной режим управления его ходьбой.
7. MVC-архитектура среды имитационного моделирования ША. Для создания эффективного программного обеспечения процессов расчёта и моделирования ходьбы использована архитектура MVC (Model - модель, View - визуализация или представление, Control - управление), которая позволяет полностью разделить весь код на три независимые части - модель исследуемой системы, представление системы и графического пользовательского интерфейса, а также управление поведением системы. Согласно принципам архитектуры MVC представление выполняет две основные задачи. Во-первых, предоставляет визуальный интерфейс пользователя для вызова событий, обрабатываемых контроллером. Во-вторых, осуществляет своё обновление в соответствии с изменившейся моделью. Интерактивные средства среды имитационного моделирования определяют программисты, дизайнеры и художники. Если эти специалисты в разных лицах, то представление становится областью сталкивания их интересов и предметных областей. Неразумно (неэффективно) предлагать дизайнеру писать код, а программиста привлекать к рисованию. Желательно максимально разделить их деятельность и минимизировать области их пересечения. Для этого коды SVG, CSS и JS должны располагаться в отдельных файлах. Но размещение кодов модели, представления и управления в отдельных файлах - это только необходимое условие. Желательно также, чтобы эти файлы и содержащиеся в них коды поддерживались независимо друг от друга. Согласно принципам MVC представление и модель не должны непосредственно взаимодействовать друг с другом, поэтому у нас они разделены.
Логика и управление описываются в анимационных SVG-элементах и JS-коде, которые у нас не пересекаются друг с другом. Для того, чтобы разделить контроллер и представление, использован код присоединения обработчиков событий к SVG-элементам программными средствами (см., например, функцию assignKeysO листинга 6). Вместо реализации встроенного обработчика использованы атрибуты id, class и JS-код автоматического встраивания анимационных атрибутов в группы переноса (для корпуса) и вращения (для корпуса и звеньев ног). Модель отображается в структуре JS-объектов и SVG-разметке ША. Особенности визуализации (представления внешнего вида ША на Web-странице монитора или на других устройствах) описываются в глобальных (внешних) стилевых таблицах. Логика и управление анимацией описаны в моделях процессов, а также в SVG-элементах анимации и JS-функциях.
8. Использование описанных методик в учебном процессе проводится на кафедре «Системы управления и математическое моделирование» Электротехнического факультета (ЭТФ) филиала ЮУрГУ в г. Миассе в курсе «Практическое программирование» (7-й семестр) для специальности «Управление и информатика в технических системах» в лабораторных и самостоятельных работах студентов. С появлением и быстрым развитием XML-технологий, эффективных архитектур и паттернов проектирования программного обеспечения возникли и ежегодно увеличиваются (на ЭТФ) задания по их использованию в лабораторных и самостоятельных работах студентов. Многовариантность структурных и кинематических схем ША позволяют формулировать практически не повторяющиеся задания для разметки SVG-моделей ША, устройств ручного управления ходьбой, ландшафта опорной поверхности и путей перемещения корпуса ША, препятствий на этих путях и многого другого.
Заключение. Предложенные SVG-модели ША, описанные методики их анимации и архитектура построения среды имитационного моделирования 1ИА позволяют на начальных этапах проектирования новых ША визуально исследовать кинематические возможности их ходьбы.
Литература
1. Телегин, А.И. Структурный синтез и кинематический анализ плоских моделей шагающих аппаратов / А.И Телегин // Вестник ЮУрГУ. Серия «Машиностроение». - 2008. - Вып. 11. -№10 (110). - С. 3-14.
2. Дейтел, Х.М. Как программировать на XML /ХМ. Дейтел, ПДж. Дейтел, Т.Р. Ниетто, Т.М. Лиин, П. Садху. Пер. с англ. - М.: ЗАО «Издательство БИНОМ», 2005. - 944 с.