90412

РАЗРАБОТКА WEB–СИСТЕМЫ ИМИТАЦИОННОГО МОДЕЛИРОВАНИЯ

Дипломная

Экономическая теория и математическое моделирование

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

Русский

2015-06-04

3.74 MB

3 чел.

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

«КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

(ФГБОУ ВПО «КубГУ»)

Кафедра математического моделирования

ДОПУСТИТЬ К ЗАЩИТЕ В ГАК

Заведующий кафедрой

академик РАН, д. ф.-м. н., профессор

      В.А.Бабешко  

               (подпись)                       (инициалы, фамилия)

          2014 г.

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ (ДИПЛОМНАЯ)

РАБОТА

РАЗРАБОТКА WEB–СИСТЕМЫ ИМИТАЦИОННОГО МОДЕЛИРОВАНИЯ

Работу выполнила    Г.Н.Шляева

(подпись, дата) (инициалы, фамилия)

Факультет компьютерных технологий и прикладной математики 

Специальность    010501 – Прикладная математика и информатика  

Научный руководитель

канд. физ.-мат наук, доцент  М.С.Капустин

(подпись, дата) (инициалы, фамилия)

Нормоконтролёр

канд. физ.-мат наук, доцент  М.С.Капустин

(подпись, дата) (инициалы, фамилия)

Краснодар 2014
РЕФЕРАТ

Дипломная работа 45 с., 20 рисунков, 17 источника, 4 приложения.

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

Цели работы:

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

В работе использованы возможности javascript библиотек – JQuery, Arbor, Tween.

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


СОДЕРЖАНИЕ


ВВЕДЕНИЕ

Имитационное моделирование неуклонно становится эффективным средством для совершенствования процессов проектирования и модернизации сложных систем. Многие годы имитационное моделирование успешно применялось при обучении системному анализу в ВУЗах и выполнении крупных научных проектов для анализа, оценки и прогнозирования вариантов решений. Кроме учебного и научного использования имитационного моделирования появляется все больше примеров практических применений моделей в экономической и социальной сферах.

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

Использование визуализации при имитационном моделировании систем трудно переоценить. Визуализация результатов моделирования (построение графиков, блок-схем, диаграмм) помогает восприятию и интерпретации результатов моделирования.

Информационные технологии дают возможность работать с различными визуальными моделями и решать сложные задачи с очень большим числом параметров.


  1.  Системы имитационного моделирования

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

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

  •  AnyLogic – программное обеспечение для имитационного моделирования сложных систем и процессов, позволяющее поддерживать направление агентного моделирования, дискретно-событийного моделирования и разработки системной динамики (разрабатывается российской компанией XJ Technologies) [2];
  •  GPSS – язык объектно-ориентированного программирования, используемый для имитационного моделирования систем массового обслуживания, различных информационных процессов и разработки имитационных моделей в сети интернет [3];
  •  Arena – разрабатываемое компанией Systems Modeling Corporation программное обеспечение для имитационного моделирования, позволяющее создать компьютерные модели, используя которые можно адекватно представить очень многие реальные системы;
  •  Plant Simulation – программная среда имитационного моделирования систем и процессов, предназначенная для оптимизации материалопотоков, загрузки ресурсов, логистики и метода управления для всех уровней планирования от целого производства и сети производств до отдельных линий и участков;
  •  SimBioSys: C++ – оболочки агентно-базового эволюционного моделирования в биологических и общественных науках;
  •  Системы моделирования SWARM и его расширения MAML (Multi-Agent Modeling Language) для моделирования искусственного мира;
  •  Пакеты Ascape (Agent Landscape) и RePast (Recursive Porous Agent Simulation Toolkit), написанные на платформе языка Java, для поддержки агентно-базового моделирования;
  •  SPSS, Statistica, PilGrim, Z-Tree – системы моделирования для исследования экономических статистических явлений и процессов ;
  •  Simulink интерактивный инструмент для моделирования, имитации и анализа динамических систем. Он дает возможность строить графические блок-диаграммы, имитировать динамические системы, исследовать работоспособность систем и совершенствовать проекты. Simulink полностью интегрирован с MATLAB, обеспечивая немедленный доступ к широкому спектру инструментов анализа и проектирования. Simulink также интегрируется с Stateflow для моделирования  поведения, вызванного событиями. Эти преимущества делают Simulink наиболее популярным инструментом для проектирования систем управления и коммуникации, цифровой обработки и других приложений моделирования;
  •  SIMBIGRAPH – система имитационного моделирования для агентного моделирования;
  •  Simulab расширяемая, переносимая система многоподходного имитационного моделирования, объединяющая парадигмы системной динамики, динамических систем, дискретно-событийного и агентного моделирования в одном языке программирования и единой среде разработки. 

Каждая система имитационного моделирования, как узкоспециализированная, так и многоцелевая, имеет свои преимущества и недостатки. Для большей наглядности более подробно были рассмотрены возможности нескольких систем имитационного моделирования.

  1.  Система имитационного моделирования AnyLogic

AnyLogic – программное обеспечение для имитационного моделирования сложных систем и процессов, разработанное российской компанией «Экс Джей Текнолоджис». Программа обладает графической средой пользователя и позволяет использовать язык Java для разработки моделей.

Система имеет ряд преимуществ:

  •  Богатый набор функций распределения позволяет создавать сложные стохастические модели;
  •  Сильная экспериментальная база, встроенная поддержка моделирований Монте-Карло и передовых форм оптимизации дает большое разнообразие подходов моделирования;
  •  AnyLogic включает в себя возможность создания интерактивной анимации для улучшения наглядности моделей;
  •  Автоматическое создание Java апплетов позволяет легко разместить модели в сети;
  •  AnyLogic написан на языке программирования Java, поэтому он является мультиплатформенным программным продуктом. Среда разработки и модели работают на Windows, Mac OS и Linux;
  •  Модель AnyLogic может использоваться как отдельное Java приложение полностью независимое от среды разработки.

Графическая среда AnyLogic включает в себя следующие элементы:

  •  Блок-схемы используются для построения алгоритмов (рисунок 1). Применяется в дискретно-событийном моделировании (маршрутизация звонков) и агентном моделировании (для логики решений агента).

Рисунок 1 – Action charts

  •  Карта состояний в основном используется в агентных моделях для определения поведения агентов. Но также часто используется в дискретно-событийном моделировании, например для симуляции машинных сбоев (рисунок 2).

Рисунок 2 – Statecharts 

  •  Диаграмма потоков и накопителей применяется при разработке моделей, используя метод системной динамики (рисунок 3).

Рисунок 3 – Stock & Flow Diagrams

  •  Процессные диаграммы (рисунок 4) основная конструкция, используемая для определения процессов в дискретно-событийном моделировании [4].

Рисунок 4 Process flowcharts

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

  1.   Система имитационного моделирования Arena

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

Основой технологии моделирования Arena являются язык моделирования SIMAN и анимационная система Cinema Animation. Отличается гибкими и выразительными средствами моделирования. Отображение результатов моделирования в Arena выполняется с использованием Cinema Animation. Процесс моделирования организован следующим образом. Сначала пользователь шаг за шагом строит в визуальном редакторе программы Arena модель. Затем система генерирует по ней соответствующий код на SIMAN, после чего автоматически запускается Cinema Animation.

Arena состоит из блоков моделирования (модули) и операций (сущности) (рисунок 5). Сущности двигаются между модулями по мере их обслуживания [5].

Рисунок 5 – Модель обработки документа

  1.  Система имитационного моделирования SimuLab

SimuLab представляет собой набор библиотек, подключать которые можно к любой системе имитационного моделирования, обладающей открытым программным интерфейсом (например, к Anylogic 6). Однако у SimuLab есть и собственная среда разработки и моделирования (рисунок 6). Она предоставляет пользователю интерфейс для быстрого создания моделей с помощью блок-схем, описывающих логику поведения модели и позволяющих моделировать любые объекты реального мира.

Рисунок 6 – Окно среды моделирования SimuLab

Как сама среда моделирования, так и все ее библиотеки реализованы на языке Java, что позволяет пользователю работать с simuLab в любой операционной системе и на различных по архитектуре процессорах, для которых существует Java Runtime Environment (JRE).

Среди особенностей SimuLab можно выделить следующие:

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

– возможность подключать библиотеки к любой СИМ, обладающей открытым программным интерфейсом;

– повышенная скорость на проведение имитационных и оптимизационных экспериментов (в 4-5 раз по сравнению с другими СИМ);

– система SimuLab обладает богатым инструментарием iFace для создания на ее основе комплексных систем поддержки принятия решений (СППР);

– 3D визуализатор thirD автоматизирует создание реалистичной 3D анимации на основе уже готовой 2D анимации модели (рисунок 7);

– система SimuLab обладает расширенным набором структур для моделирования больших сетей [6].

Рисунок 7 – Примеры 3D визуализации моделей

  1.  Система имитационного моделирования Simbigraph

Система ориентирована на моделирование больших сетей типа Интернет, широко распространённых как в технических (физико-химические микроструктуры, транспортные сети мегаполиса, сеть ссылок web-страниц и.др.) так и в социальных науках (сеть распространения инфекций, сеть пользователей пользующихся программой шифрования PGP, социальная сеть, сети рекомендаций и др.).

Система имитационного моделирования SIMBIGRAPH разработана в объектно-ориентированном стиле (рисунок 8).

Рисунок 8 – Диаграмма классов Simbigraph

Система имитационного моделирования Simbigraph предназначена для решения актуальных задач системного анализа больших сетей и решеток. Разработка системы имитационного моделирования Simbigraph позволила пользователям использовать последние достижения авторов системы в области имитационного моделирования и теории случайных графов (рисунок 9) [7].

Рисунок 9 – Агентная модель инфекции в случайном графе

  1.  Система Forio. Имитационное моделирование в Web

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

Одним из примеров является среда разработки Forio. Система позволяет зарегистрированным пользователям разрабатывать собственные модели онлайн или импортировать их из других систем, а затем предоставлять к ним доступ любым пользователям Интернет.

Forio создает программные продукты, которые позволяют моделировать, исследовать данные и производить прогнозный анализ (рисунок 10).

Forio Contour является новой библиотекой JavaScript, которая обеспечивает легкий в использовании набор общих визуализаций, плюс является фреймворком для их расширения. Contour является свободной  библиотекой с открытым кодом на основе D3 (JavaScript-библиотека для обработки и визуализации данных), с подробной документацией и простыми в изучении примерами. Contour способна отображать тысячи точек в миллисекунду, и предназначенна для сложных визуализаций данных и информационных панелей [8].

Рисунок 10 – Инвестиции

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


  1.  Web-приложение для имитационного моделирования

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

Разработанная система состоит из двух частей: клиентской и серверной (рисунок 11). Клиентская часть отвечает за взаимодействие с пользователем, а также за отображение процесса моделирования в браузере. Серверная часть отвечает за загрузку и обработку необходимой информации для моделирования.

Рисунок 11 – Архитектура web-приложения

  1.  Серверная часть

Серверная часть реализована на языке PHP. Серверная часть управляет процессом сохранения необходимой информации и ее чтением, предоставляя клиентской части структуру модели в текстовом или JSON-формате [9]. Когда пользователь загружает необходимые файлы, PHP-скрипт помещает их в директорию upload/ и считывает в переменные необходимые данные для клиентской части. Так как данные сохраняются на сервере, то для экономии пространства перед каждой загрузкой новых данных производится отчистка директории upload/.

  1.  Клиентская часть

Клиентская часть представляет собой JavaScript приложение, которое с помощью библиотек jQuery [10], Graphics, Arbor и Tween отображает структуру модели в окне браузера, и при необходимости визуализирует процесс обработки модели во времени.

После загрузки всех необходимых файлов на сервер происходит загрузка страницы, которая отображает модель. Визуализацией графа, а именно его компоновкой в браузере занимается библиотека Arbor [11]. Для отображения модели используется технология HTML5 Canvas [12]. Этот элемент поддерживается всеми популярными браузерами последних версий. Динамическая визуализация осуществляется при помощи библиотеки Tween [13].

Во время загрузки страницы визуализирующей модель вызывается функция start(). Функция инициализирует систему arbor (здесь задаются физические параметры системы, такие как жесткость ребер, сила отталкивания узлов друг от друга, возможность перемещать узлы при помощи перетаскивания), устанавливает средство рендеринга для элемента canvas, на котором будет происходить отрисовка.

После визуализации графа пользователь может запустить его динамическую обработку по нажатию на кнопку «Reload». При нажатии на кнопку инициализируется функция redraw(), которая преобразует данные, полученные с сервера, в объект и передает в функцию init(), затем вызывается функция animate(). В функции init() задается алгоритм перерисовки ребер графа. Данные для обработки представляются в виде массива, который передается как параметр конструктору класса Tween. Экземпляр Tween задает последовательность кадров (от источника к цели), задавая свойства, такие как скорость рисования, время ожидания перед следующим шагом, траектория движения. Функция animate() вызывает встроенную функцию

 requestAnimationFrame(), которая обеспечивает встроенный API для запуска любых типов анимации в браузере [14]. Также в init() обновляется экземпляр Tween.

  1.  Описание приложения

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

Рисунок 12 – Стартовая страница

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

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

Для запуска отображения процесса обработки модели во времени пользователю нужно нажать кнопку «Reload». Процесс реализуется путем перерисовки ребер графа.

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

После обработки модели пользователь может либо перейти на стартовую страницу для загрузки новой модели по нажатию кнопки «Home», либо закрыть страницу.

  1.  Примеры визуализации имитационных моделей

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

  1.  Модель работы отдела банка

Рассмотрим отдел банка. В банке есть два менеджера, отвечающие за два различных типа операций: выдачу инвестиций и работу со счетом. К менеджерам в очереди стоят посетители. После обслуживания менеджером каждый клиент идет в кассу, получая либо сдавая деньги. Очередь в кассу общая. Целью исследования является оценка эффективности системы, то есть нахождение числовых значений характеристик, описывающих качество обслуживания системой потока посетителей [4]. Расчет был произведен в одной из систем имитационного моделирования. На основе предоставленных данных была построена модель системы (рисунок 13).

Рисунок 13 – Модель работы отдела банка

Клиенты приходили в банк с установленным интервалом времени. Было задано среднее время работы каждого менеджера и кассира.  Каждый клиент имел свой цвет. Данные были использованы для отображения работы банка во времени. В некоторый момент времени модель выглядела следующим образом (рисунок 14).

Рисунок 14 – Динамическая обработка модели

  1.  Модель работы участка цеха

Необходимо промоделировать работу участка цеха, состоящего из нескольких станков и обрабатывающего два типа деталей. В таблице 1 представлено распределение выполняемых операций по станкам А1, А2 и А3 (операции 1-3 обрабатывают первый тип далей). Интервалы времени между поступлениями деталей и времени выполнения операций распределены равномерно. Информация о времени поступления и выполнения операций заданы в таблице 2 и таблице 3. Необходимо определить для восьмичасового рабочего дня среднюю загрузку каждого станка, среднее время обработки деталей, какова длина очередей на обработку для станков, какой размер склада необходим для данного потока деталей [15]. Модель была построена на языке GPSS.

Таблица 1 – Распределение операций по станкам

Вариант

Операция 1

Операция 2

Операция 3

Операция 4

Операция 5

Операция 6

Пример

A1

A2

A3

A1

A3

A2

1

A1

A2

A3

A3

A2

A1

2

A1

A2

A

A3

A1

A2

3

A1

A2

A3

A1

A2

A3

4

A1

A2

A3

A2

A1

A3

5

A1

A2

A3

A2

A3

A1

6

A2

A1

A3

A1

A2

A3

Таблица2 Интервалы времени поступления деталей

Пример

1

2

3

4

5

6

7

8

30

25

20

15

10

30

15

35

20

 

Таблица 3 Интервал времени выполнения операций

Вариант

Операция 1

Операция 2

Операция 3

Операция 4

Операция 5

Операция 6

Пример

5

20

10

7

17

19

1

22

6

17

16

7

12

2

13

14

6

18

13

8

3

18

10

14

20

27

10

4

12

15

18

10

5

20

5

17

22

8

16

12

22

6

12

30

7

13

15

13

Для каждого примера была визуализирована своя модель. Модель первого примера изображена на рисунках 15-16.

 

Рисунок 15 – Схема модели

Каждая деталь имеет свой цвет.

Рисунок 16 – Маршрут обработки деталей

Входные файлы данных для визуализации и обработки модели представлены в приложении В.

  1.  Модель движения автобуса по маршруту

Модель имитирует движение автобусов по двум маршрутам. Целью такого исследования может быть, например, загрузка автобуса, возможная прибыль, оценка необходимости введения дополнительных автобусов. Расчет модели производился на языке GPSS [16]. На основе результатов исследования было визуализировано поведение модели во время эксперимента (рисунок 17).

Рисунок 17 – Схема движения автобусов

Маршрут каждого автобуса выделяется своим цветом, меняя интенсивность в зависимости от загрузки автобуса пассажирами. Была задана периодичность движения автобусов по маршрутам, среднее время ожидания пассажиров на остановке (рисунок 18).

Рисунок 18 – Маршруты движения автобусов

  1.  Модель социальной сети

Эта модель иллюстрирует распространение информации в простой социальной сети. Модель формируется из фиксированного числа пользователей, которые производят обмен сообщениями друг с другом. Каждый пользователь имеет индивидуальное имя. Основная цель этой модели является оценка информационного распространения процесса обмена сообщений в простой социальной сети [17]. Каждая цепочка сообщений генерируется через заданный промежуток времени. Отправка сообщений для каждого пользователя выделяется индивидуальным цветом (рисунок 19-20).

Рисунок 19 – Модель социальной сети

Рисунок 20 – Процесс обмена сообщениями

Приложение создавалось для наглядного представления результатов систем имитационного моделирования, не обладающих средствами визуализации.

Код вынесен в приложение Г.


ЗАКЛЮЧЕНИЕ

В ходе работы были рассмотрены возможности современных систем имитационного моделирования и актуальность внедрения веб-ориентированных интерфейсов для систем имитационного моделирования в современной жизни. Разработано веб-приложение, визуализирующее структуру имитационной модели и принцип ее работы в динамике. Разработка велась на языке PHP и JavaScript, с использованием библиотек Tween, Arbor, Graphics, jQuery и элемента HTML5 Canvas. В качестве примеров были визуализированы модели из таких областей применения, как: производство, системы массового обслуживания, социальная динамика, городской транспорт.


СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

  1.  Имитационное моделирование. Теория и практика [Электронный ресурс]. URL: http://immod.gpss.ru/static/materialy_konferencii.html (дата обращения: 5.05.2014).
  2.   Инструмент многоподходного имитационного моделирования AnyLogic [Электронный ресурс]. URL:http:// http://www.anylogic.ru (дата обращения: 5.05.2014).
  3.  Cоветов, Б.Я. Моделирование систем. Практикум, 5-е издание / Б.Я. Советов, С.А. Яковлев.  Высшая школа, 2003.  – 293 с.
  4.  Карпов, Ю. Г. Имитационное моделирование систем. Введение в моделирование с AnyLogic 5 / Ю.Г. Карпов. СПб: БХВ-Петербург, 2006. 400 с.
  5.  Замятина, О.М. Система имитационного моделирования Arena 7.0. Basic Process Panel / О.М. Замятина, Н.Г. Саночкина. Томск: ТПУ, 2005. 24 с.
  6.  Задорожный, В.Н. Мультиагентное моделирование микромира / В.Н. Задорожный, Е.Б. Юдин. – Омск: ОмГТУ, 2009.   179 с.
  7.  Ганеева, М.И. Построение агентных моделей в системе моделирования SIMBIGRAPH / М.И. Ганеева, Д.А. Огнев, Е.А. Пендер. Омск: ОмГТУ, 2011. – 105 с.
  8.  Forio [Электронный ресурс]. URL: http://www.forio.com (дата обращения: 11.05.2014).
  9.  JSON – Википедия [Электронный ресурс]. URL: http://ru.wikipedia.org/wiki/JSON (дата обращения: 11.05.2014).
  10.  Русская документация по jQuery [Электронный ресурс]. URL: http://jquery-docs.ru (дата обращения: 11.05.2014).
  11.  Arbor.js [Электронный ресурс]. URL: http://arborjs.org (дата обращения: 11.05.2014).
  12.  Oсновы HTML5: Часть 4. Завершающий штрих – Canvas [Электронный ресурс]. URL: http://www.ibm.com/developerworks/ru/library/wa-html5fundamentals4 (дата обращения: 11.05.2014).
  13.  TweenJS [Электронный ресурс]. URL: http://www.createjs.com/#!/TweenJS (дата обращения: 11.05.2014).
  14.  Что такое requestAnimationFrame()? [Электронный ресурс]. URL: http://html5.by/blog/what-is-requestanimationframe (дата обращения: 11.05.2014).
  15.  Имитационное моделирование систем массового обслуживания на языке GPSS [Электронный ресурс]. URL: http://gpss.h11.ru/norenkov.php#c11 (дата обращения: 11.05.2014).
  16.  Сочнев А.Н. Имитационное моделирование движения маршрутных автобусов // Современные научные исследования и инновации. – Май 2012. - № 5 [Электронный ресурс]. URL: http://web.snauka.ru/issues/2012/05/12603 (дата обращения: 11.05.2014).
  17.  Pedestrian dynamics [Электронный ресурс]. URL: http://www.runthemodel.com/models/pedestrian_dynamics (дата обращения: 11.05.2014).
  18.  

ПРИЛОЖЕНИЕ А

{

 nodes:{

                1:{'color':'yellow','shape':'dot','label':'source1'},

                2:{'color':'yellow','shape':'dot','label':'source2'},

                3:{'color':'orange','shape':'dot','label':'queue1'},

    4:{'color':'orange','shape':'dot','label':'queue2'},

    5:{'color':'brown','shape':'dot','label':'kas1'},

    6:{'color':'brown','shape':'dot','label':'kas2'},

    7:{'color':'grey','shape':'dot','label':'sink'}

              },

   edges:{

                1:{ 3:{'directed':1}},

    2:{4:{'directed':1}},

    3:{5:{'directed':1}},

    4:{6:{'directed':1}},

     6:{7:{'directed':1}},

      5:{7:{'directed':1}}

              }

}

ПРИЛОЖЕНИЕ Б

{ stream:{

                1:{'color':'green','speed':3000},

                3:{'color':'green','speed':3000, 'delay':0},

    5:{'color':'green','speed':3000, 'delay':5000},

    7:{}

              },

stream:{

                2:{'color':'yelow', 'speed':3000},

    4:{'color':'yelow', 'speed':3000, 'delay':0},

    6:{'color':'yelow', 'speed':3000, 'delay':4500},

    7:{}

              },

stream:{

                1:{'color':'blue','speed':3000},

                3:{'color':'blue','speed':3000, 'delay':2000},

    5:{'color':'blue','speed':3000, 'delay':5000},

    7:{}

              },

stream:{

               2:{'color':'#99ff66', 'speed':3000},

    4:{'color':'#99ff66', 'speed':3000, 'delay':1000},

    6:{'color':'#99ff66', 'speed':3000, 'delay':4000},

    7:{}

              },

stream:{

               1:{'color':'brown','speed':3000},

                3:{'color':'brown','speed':3000, 'delay':5000},

    5:{'color':'brown','speed':3000, 'delay':5000},

    7:{}

              },

stream:{

               2:{'color':'#66ccff', 'speed':3000},

    4:{'color':'#66ccff', 'speed':3000, 'delay':2000},

    6:{'color':'#66ccff', 'speed':3000, 'delay':5000},

    7:{}

              },

stream:{

               1:{'color':'red','speed':3000},

                3:{'color':'red','speed':3000, 'delay':7000},

    5:{'color':'red','speed':3000, 'delay':5000},

    7:{}

              },

stream:{

               2:{'color':'orange', 'speed':3000},

    4:{'color':'orange', 'speed':3000, 'delay':4000},

    6:{'color':'orange', 'speed':3000, 'delay':4000},

    7:{}

              }

            }

ПРИЛОЖЕНИЕ В

init.json

{

nodes:{

                1:{'color':'yellow','shape':'dot','label':'source1'},

                2:{'color':'yellow','shape':'dot','label':'source2'},

                3:{'color':'grey','shape':'rect','label':'A1'},

    4:{'color':'grey','shape':'rect','label':'A2'},

    5:{'color':'grey','shape':'rect','label':'A3'}

              },

   edges:{

                1:{ 3:{'directed':1}},

    2:{3:{'directed':1}},

    3:{4:{'directed':1}},

    4:{5:{}},

     3:{5:{}}

              }

}

redraw.json

{ period: {'speed':3000}

stream:{

                1:{'color':'green','speed':1000},

                3:{'color':'blue','speed':1000, 'delay':22000},

    4:{'color':'brown','speed':1000, 'delay':11000},

    5:{'color':'yellow','speed':1000, 'delay':8000},

    3:{'color':'orange','speed':1000, 'delay':13000},

    5:{'color':'black','speed':1000, 'delay':15000}

    4:{}

              },

stream:{

                2:{'color':'green','speed':1000},

                3:{'color':'#33ffcc','speed':1000, 'delay':22000},

    4:{'color':'#9933ff','speed':1000, 'delay':11000},

    5:{'color':'#66ff66','speed':1000, 'delay':8000},

    3:{'color':'red','speed':1000, 'delay':13000},

    5:{'color':'#990000','speed':1000, 'delay':15000}

    4:{}

              }             }

ПРИЛОЖЕНИЕ Г

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Network diagram</title>

<style>

#canv {

 width:100%;

 height:100%;

 }

 #but1{

background: #3399ff;

padding: 7px 30px;

  font-size:13px;

font-weight: bold;

color:#fff;

text-align: center;  

border:solid 1px #73c8f0;

border-radius: 5px;}

</style>

</head>

<body onload="Start()">

 <script src="js/jquery.min.js"></script>

 <script src="js/arbor.js"></script>  

  <script src="js/graphics.js" ></script>

  <script src="js/tween.min.js"></script>

 <script src="js/RequestAnimationFrame.js"></script>

 <script>

 var ma = <?

//удалим содержимое директории upload/

$handle = opendir ('upload/');

while(false !== ($file = readdir ($handle)))

               if($file != "." && $file != "..") unlink ('upload/'.$file);

closedir ($handle);

$fileElementName = $_FILES['myfile'];

    $i = 0;

    $j = 0;

    $files_count = sizeof($fileElementName["name"]);

    $mas = array();

    for ($i = 0; $i < $files_count; $i++) {

     $b=  $fileElementName["tmp_name"][$i];

     if (substr($fileElementName["type"][$i],0,5) == "image"){

      $mas[$j] = $fileElementName["name"][$i];

      $j++;

      }

     

     move_uploaded_file($fileElementName['tmp_name'][$i], "upload/" . $fileElementName['name'][$i]);

    }

    echo json_encode($mas);

   ?>;

var a = <?$p=file_get_contents("upload/init.json"); echo $p; ?>;

var b = <?$p=file_get_contents("upload/redraw.json"); echo json_encode($p); ?>;

 

var mas = new Array();

var i = 0;

$.each(ma,function(name, value){ mas[i]= String(value);i++;});

 

var ar = new Array();

for (var q=0;q<mas.length;q++){

ar[q] = new Image();

ar[q].src='upload/'+mas[q];

}

 var nodeBoxes = {};    

 function findArrVal(arr,value) {

 for (var ind=0;ind<arr.length;ind++){

  if (arr[ind].substr(0,arr[ind].length-4) == value) {return ind;}

  }

 }

 

function Renderer(canvas)

{

 var canvas = $(canvas).get(0);

 var ctx = canvas.getContext("2d");

 var gfx = arbor.Graphics(canvas);

 var particleSystem = null;

 var that = {

  init:function(system){

   //начальная инициализация

   particleSystem = system;

   particleSystem.screenSize(canvas.width, canvas.height);

   particleSystem.screenPadding(80);

   that.initMouseHandling();

  },

     

  redraw:function(){

   //действия при перересовке

           gfx.clear();

      

     

     particleSystem.eachNode( //теперь каждую вершину

    function(node, pt){  //получаем вершину и точку где она

       var label = node.data.label||""

       var w = ctx.measureText(""+label).width + 10

       if (!(""+label).match(/^[ \t]*$/)){

      pt.x = Math.floor(pt.x)

      pt.y = Math.floor(pt.y)

       }else{

      label = null

       }

       if (node.data.color=='none') {ctx.fillStyle = '#333333'} else {ctx.fillStyle=node.data.color}

     if (node.data.shape=='image'){

        ctx.drawImage(ar[findArrVal(mas,node.data.label)],pt.x, pt.y,50,50);       

      if (label){

      ctx.font = "12px Helvetica"

      ctx.textAlign = "center"

      ctx.fillStyle = "black"

      ctx.fillText(label||"",  pt.x+11, pt.y-5)

      nodeBoxes[node.name] = [pt.x, pt.y, w,w]

      }

     }

     else if (node.data.shape=='dot'){

     if (node.data.color=='none') {ctx.fillStyle = '#333333'} else {ctx.fillStyle=node.data.color}

      gfx.oval(pt.x-10, pt.y-10, 20,20, {fill:ctx.fillStyle})

      nodeBoxes[node.name] = [pt.x-10, pt.y-10, w,w]

      ctx.fillStyle = "black"

      if (label) {ctx.fillText(label||"",  pt.x, pt.y-12);}

     }else{

     if (node.data.color=='none') {ctx.fillStyle = '#333333'} else {ctx.fillStyle=node.data.color}

       gfx.rect(pt.x-w/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle})

       nodeBoxes[node.name] = [pt.x-w/2, pt.y-11, w, 22]

       ctx.fillStyle = "black"

       if (label) {ctx.fillText(label||"",  pt.x, pt.y-12);}

      }

   });  

   

   particleSystem.eachEdge( //отрисуем каждую грань

    function(edge, pt1, pt2){ //будем работать с гранями и точками её начала и конца

      var weight = !isNaN(edge.data.weight) ? parseFloat(weight) : 1;

      var color = !isNaN(edge.data.color) ? parseString(edge.data.color) : "rgba(100,0,50, .5)";

      var tail = intersect_line_box(pt1, pt2, nodeBoxes[edge.source.name]);

      var head = intersect_line_box(tail, pt2, nodeBoxes[edge.target.name]);

 

     ctx.strokeStyle = "rgba(100,0,50, .8)"; //грани будут чёрным цветом с некой прозрачностью

     ctx.lineWidth = 1; //толщиной в один пиксель

     ctx.beginPath();  //начинаем рисовать

     ctx.moveTo(tail.x, tail.y)

     ctx.lineTo(head.x, head.y)

     ctx.stroke()

        ctx.restore()

          

      // draw an arrowhead if this is a -> style edge

     if (edge.data.directed){

        ctx.save()

        // move to the head position of the edge we just drew

        var wt =  1

        var arrowLength = 6 + wt

        var arrowWidth = 2 + wt

        ctx.fillStyle = color

        ctx.translate(head.x, head.y);

        ctx.rotate(Math.atan2(head.y - tail.y, head.x - tail.x));

        // delete some of the edge that's already there (so the point isn't hidden)

        ctx.clearRect(-arrowLength/2,-wt/2, arrowLength/2,wt)

        // draw the chevron

        ctx.beginPath();

        ctx.moveTo(-arrowLength, arrowWidth);

        ctx.lineTo(0, 0);

        ctx.lineTo(-arrowLength, -arrowWidth);

        ctx.lineTo(-arrowLength * 0.8, -0);

        ctx.closePath();

        ctx.fill();

      ctx.restore()

     }

   });  

  },

 

  initMouseHandling:function(){ //события с мышью

   var dragged = null;   //вершина которую перемещают

   var handler = {

    clicked:function(e){ //нажали

     var pos = $(canvas).offset(); //получаем позицию canvas

     _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); //и позицию нажатия кнопки относительно canvas

     dragged = particleSystem.nearest(_mouseP); //определяем ближайшую вершину к нажатию

     if (dragged && dragged.node !== null){

      dragged.node.fixed = true; //фиксируем её

     }

     $(canvas).bind('mousemove', handler.dragged); //слушаем события перемещения мыши

     $(window).bind('mouseup', handler.dropped);  //и отпускания кнопки

     return false;

    },

    dragged:function(e){ //перетаскиваем вершину

     var pos = $(canvas).offset();

     var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);

 

     if (dragged && dragged.node !== null){

      var p = particleSystem.fromScreen(s);

      dragged.node.p = p; //тянем вершину за нажатой мышью

     }

 

     return false;

    },

    dropped:function(e){ //отпустили

     if (dragged===null || dragged.node===undefined) return; //если не перемещали, то уходим

     if (dragged.node !== null) dragged.node.fixed = false; //если перемещали - отпускаем

     dragged = null; //очищаем

     $(canvas).unbind('mousemove', handler.dragged); //перестаём слушать события

     $(window).unbind('mouseup', handler.dropped);

     _mouseP = null;

     return false;

    }

   }

   // слушаем события нажатия мыши

   $(canvas).mousedown(handler.clicked);

  },

     

 }

  // helpers for figuring out where to draw arrows (thanks springy.js)

   var intersect_line_line = function(p1, p2, p3, p4)

   {

     var denom = ((p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y));

     if (denom === 0) return false // lines are parallel

     var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x)) / denom;

     var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x)) / denom;

     if (ua < 0 || ua > 1 || ub < 0 || ub > 1)  return false

     return arbor.Point(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));

   }

   var intersect_line_box = function(p1, p2, boxTuple)

   {

     var p3 = {x:boxTuple[0], y:boxTuple[1]},

         w = 20//boxTuple[2],

         h = 20//boxTuple[3]

     var tl = {x: p3.x, y: p3.y};

     var tr = {x: p3.x + w, y: p3.y};

     var bl = {x: p3.x, y: p3.y + h};

     var br = {x: p3.x + w, y: p3.y + h};

     return intersect_line_line(p1, p2, tl, tr) ||

           intersect_line_line(p1, p2, tr, br) ||

           intersect_line_line(p1, p2, br, bl) ||

           intersect_line_line(p1, p2, bl, tl) ||

           false

   }

 return that;

}

function Start(){

   var sys = arbor.ParticleSystem(1,000, 600,0.9);

       sys.parameters({gravity:true});

sys.parameters({dt:0.5});  

 sys.renderer = Renderer("#canv");//начинаем рисовать в выбраной области

sys.graft(a);  

};

function  redraw(){

    var nm = b.split(';');

   for (var i=0; i<nm.length;i++){nm[i]=JSON.parse(nm[i]);}

   init(nm);

   animate();

}

function init(mas) {

    var x0=nodeBoxes[mas[0].name][0],

     y0=nodeBoxes[mas[0].name][1];

    var xx = new Array();

    var yy = new Array();    

    for (var i=1; i<mas.length-1; i++){

     xx[i-1] = nodeBoxes[mas[i].name][0]

     yy[i-1] = nodeBoxes[mas[i].name][1]

    }     

    var canvas = $("#canv").get(0);

    var context = canvas.getContext( '2d' );    

    context.lineWidth = 2;

    context.strokeStyle = "#00ff00";

    var obj = { x: x0, y: y0,old: { x: x0, y: y0}};

  mtween = new TWEEN.Tween( obj ).to( { x: xx, y: yy }, 9000);

    mtween.interpolation(TWEEN.Interpolation.Linear);

    mtween.easing( TWEEN.Easing.Linear.None );

    mtween.delay( 10 );

    mtween.onComplete(function(){mtween.stop()});

    mtween.onUpdate( function() {     

     context.beginPath();

     context.moveTo( this.old.x, this.old.y );

     context.lineTo( this.x, this.y );

     context.closePath();

     context.stroke();

     this.old.x = this.x;

     this.old.y = this.y;

    }).start();

  }

  function animate() {

   requestAnimationFrame( animate );

   TWEEN.update();

  }

</script>

 <canvas id="canv" width="1260" height="600"></canvas>

   <div>

  <input type="button" id="but1"  value="reload" style="position:absolute;bottom:50px;left:50px;" onclick="test()"></input>

<a href="http://site/index.html"><input type="button" id="but1" value="Home" style="position:absolute;bottom:50px;right:50px;"></input></a>

 </div>  </body></html>


 

А также другие работы, которые могут Вас заинтересовать

30804. Способы укладки Б-смеси. Требования при укладке Б-смеси в конструкции с уплотнением 16.62 KB
  Способы укладки Бсмеси. Требования при укладке Бсмеси в конструкции с уплотнением. Основные требования к укладке бетонной смеси: Ограничение высоты падения бетонной смеси плиты до 1м колонны 5 м остальное 2м Послойная укладка с уплотнением каждого слоя; Для обеспечен. Задача процесса уплотнения бетонной смеси состоит в предельной упаковке различных по форме и величине частиц составляющих многокомпонентный конгломерат бетонной смеси.
30805. Уплотнение бетонной смеси вибрированием. Типы вибраторов. Признаки достаточности 16.61 KB
  По способу воздействия на уплотняемую бетонную смесь различают вибраторы глубинные поверхностные и наружные прикрепляемые тисками к опалубке Глубинные вибраторы выполняют с электро или пневмодвигателем встроенным в наконечник вибробулава с электродвигателем вынесенным к ручке и с вынесенным к ручке двигателем и гибким валом. При бетонировании мало и средне армированных конструкций применяют глубинные вибраторы с встроенным в корпус вибровозбудителем вибробулавы диаметром 76 114 и 133 мм с частотой от 5700 до 11000 мин....
30806. Устройство рабочих швов 13.91 KB
  В изгибаемых конструкциях рабочие швы располагают в местах с наименьшим влиянием на прочность конструкции. В колоннах швы устраивают на уровне верха фундамента у низа прогонов балок или подкрановых консолей; в колоннах безбалочных перекрытий у низа или верха вута в рамах между стойкой и ригелем. При подготовке к очередному бетонированию швы обрабатывают через 8.
30807. Уход за бетоном в процессе твердения. Распалубливание конструкций 16.32 KB
  Открытую поверхность бетона прежде всего предохраняют от вредного воздействия прямых солнечных лучей ветра и дождя. Если поверхность бетона предварительно была укрыта влагоемкими материалами брезентом матами песком и др. В жарком сухом климате если не обеспечить благоприятных температурновлажностных условий твердения прочность бетона снижается на 15. В начальный период ухода за бетоном не следует обильной поливкой сразу после укладки нарушать структуру твердеющего бетона.
30808. Бетонирование массивов и фундаментов 14.03 KB
  В фундаменты и массивы в зависимости от объема заглубления высоты и других особенностей бетонную смесь укладывают по следующим технологическим схемам: с разгрузкой смеси из транспортного прибора непосредственно в опалубку с передвижного моста или эстакады с помощью вибропитателей и виброжелобов бетоноукладчиков бетононасосов бадьями с помощью кранов. В ступенчатые фундаменты с общей высотой до 3 м и площадью нижней ступени до 6 м2 смесь подают через верхний край опалубки предусматривая меры против смещения анкерных болтов и закладных...
30809. Бетонирование полов 15.33 KB
  Для осуществления процесса укладки плиты разбивают на карты. Если толщина плит меньше 05 м то разбивку на карты и укладку бетона ведут в таком порядке: Площадь делят на картыполосы по 34м Устанавливают по краям полос маячные доски. При большей толщине плиты разбивают на параллельные карты шириной 5. Карты бетонируют подряд т.
30810. Сетевые и локальные СУБД 12.74 KB
  Существенной проблемой СУБД такого типа является синхронизация копий данных именно поэтому для решения задач требующих совместной работы нескольких пользователей локальные СУБД фактически не используются. К сетевым относятся файлсерверные клиентсерверные и распределенные СУБД. В файлсерверных СУБД все данные обычно размещаются в одном или нескольких каталогах достаточно мощной машины специально выделенной для этих целей и постоянно подключенной к сети.
30811. Процес нормализации баз данных 16.04 KB
  Например задано следующее отношение: ПРЕДМЕТ Код предмета. Переведем атрибут с повторяющимися значениями в новую сущность назначим ей первичный ключ Код преподавателя и свяжем с исходной сущностью ссылкой на ее первичный ключ Код предмета. В результате получим две сущности причем во вторую сущность добавятся характеризующие ее атрибуты: ПРЕДМЕТ Код предмета. Название Цикл Объем часов; ПРЕПОДАВАТЕЛЬ Код преподавателя ФИО Должность Оклад Адрес Код предмета.
30812. ПОТОКИ И ПРОЦЕССЫ 13.25 KB
  Процесс обеспечивает программу всем что ей нужно для работы включая один поток. Этот стандартный поток основной поток используется для выполнения кода программы. Основной поток типичного процесса начинает работу с точки входа и продолжает выполняться в соответствии со всеми циклами условными операторами и вызовами функций. Основной поток завершается вместе с завершением процесса.