1. Расчётная работа
ПО ДИСЦИПЛИНЕ «МОДЕЛИРОВАНИЕ И АНАЛИЗ
ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ»
НА ТЕМУ: ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА
ПРОГРАММНОГО ПРОДУКТА
Выполнила студентка группы ПОС-10б Шашалевич Е.В.
Руководитель ст. преп. Гудаев О.А.

2. Цифровой калейдоскоп растрового коллажа
 Класс ПО: WEB-служба.
 Тема: Программный робот автоматической генерации плаката
современного фигуративного искусства.
 Назначение: Ключевые слова облака тегов используются для
автоматической генерации растрового 2D изображения фигуративного
цифрового коллажа.
 Функции:
Программа
подбирает
из
Интернета
двенадцать
картинок, иллюстрирующих каждое в отдельности слово заданной
пользователем фразы или набора слов. Далее программа на картинках
обнаруживает контуры больших и геометрически сложных объектов.
Произведя сегментацию, программа далее вырезает спрайт с отступом в
X пикселей по границе контура объекта. Окончательно программа на
чистом растровом полотне, размера W на H, размещает
спрайты, иллюстрирующие слова из фразы. Причем, спрайты
располагаются на полотне случайным образом или неслучайным в виде
пирамиды, спрайты перекрывают друг друга, масштабируются на
коэффициент 20% от размера спрайта, а самое главное граница
спрайта, заданной ширины Y, размывается к краю спрайта с
прозрачностью по убыванию коэффициента альфа-канала до нуля.
2

3. Концептуальная
модель
3
3

4. Рисунок 1 – Объекты
4

5. На рисунке 1 перечислены объекты, которые
присутствуют в создании цифрового калейдоскопа:
 ключевые слова из облака тегов;
 фигуры;
 спрайты.
Пользователь вводит набор слов, далее программа
подбирает из интернета 12 картинок, которые
иллюстрируют каждое в отдельности слово. На картинках
программа находит контуры геометрически сложных
объектов, и вырезает спрайт с отступом Х пикселей.
5

6. Рисунок 2 – Фигуры
6

7. На рисунке 2 изображена сущность «Фигуры». Фигуры
могут быть двухмерными и трёхмерными. Но для
данного калейдоскопа нужны только двухмерные:
квадрат;
ромб;
окружность
треугольник
овал.
7

8. Рисунок 3 – Процессы
8

9. На рисунке 3 представлены процессы,
которые
выполняются в программе. Они необходимы для
генерации коллажа. Эти процессы включают:
 ввод слов пользователем;
 поиск изображения;
 сегментация;
 создание спрайта;
 создание растрового полотна;
 разместить спрайты на полотне.
9

10. Рисунок 4 – Компоновка растрового полотна

11. На рисунке 4 представлена сущность «Компоновка растрового
полотна».
Она включает такие компоненты: «Порядок расположения
спрайта», «Перекрытие», «Масштабирование спрайта на 20% от его
размера», « Размытие границ спрайта с прозрачностью, с заданной
шириной Y к краю».
Сущность «Порядок расположения спрайта» включает два
компонента «Случайный» и «В виде пирамиды».
11

12. Рисунок 5 – Растровое полотно

13. На рисунке 5 представлена сущность «Растровое полотно». Оно
содержит такие атрибуты:
 расширение;
 размеры;
 название.
Растровое полотно может храниться в форматах: «JPG», «PNG»,
«BMP», «GIF».
Также у него есть размеры:
 ширина;
 высота.
13

14. Рисунок 6 – Общая схема

15. На рисунке 6 изображена общая интеллект
карта, которая описывает объекты и процессы для
создания цифрового калейдоскопа растрового коллажа.
15

16. Список сущностей
1. Объекты
1.1. Слова из фразы
1.2. Спрайт
1.3. Фигуры
1.3.1. Двухмерные
1.3.2. Квадрат
1.3.3. Треугольник
1.3.4. Ромб
1.3.5. Окружность
1.3.6. Овал
2. Процессы
2.1. Ввод слов пользователем
2.2. Поиск изображений
2.3. Сегментация
2.4. Создание спрайта
2.5. Создать растровое полотно
16

17. 2.6. Скомпоновать спрайты на полотне
2.6.1. Перекрытие
2.6.2. Масштабирование спрайта на 20% от его размера
2.6.3. Размытие границы с заданной шириной Y к краю
2.6.4. Порядок расположения
2.6.4.1. Случайный
2.6.4.2. В виде пирамиды
3. Растровое полотно
3.1. Размеры
3.1.1. Ширина
3.1.2. Высота
3.2. Расширение
3.2.1. JPG
3.2.2. PNG
3.2.3. GIF
3.2.4. BMP
3.3. Название
17

18. IDEF0
Диаграммы
18
18

19. Рисунок 7 – Контекстная диаграмма IDEF0
19

20. На контекстной диаграмме Idef0, которая
изображена на рисунке 7, в общем описывается процесс
создания цифрового калейдоскопа растрового коллажа.
Для его создания необходимо пользователю ввести фразу
или набор слов и также желаемый размер растрового
полотна,
которое
будет
создано
программой
автоматически. Коллаж создаётся по алгоритму, который
реализован в программе.
20

21. 21
Рисунок 8 – Создание цифрового калейдоскопа

22. На рисунке 8 описываются процессы создания
цифрового калейдоскопа. Чтобы получить картинки
необходимо ввести слова или фразу, по этим словам
робот найдёт 12 картинок. Далее на этих картинках
программа находит контуры сложных геометрических
объектов и вырезает спрайты с отступом в Х пикселей.
Далее компонуется калейдоскоп.
22

23. Рисунок 9 - Процесс получения картинок
23

24. На рисунке 9 описан процесс получения картинок.
Пользователь с помощью клавиатуры пишет слова, далее
программа с помощью поисковой системы ищет
картинки по заданным словам в интернете и выбирает 12
картинок для создания коллажа.
24

25. Рисунок 10 – Создание спрайта
25

26. На рисунке 10 описан процесс создания спрайта.
Программный робот проводит сегментацию, т.е. ищет
контуры геометрически сложных объектов, и вырезает
спрайт с отступом в Х пикселей по границе контура.
26

27. Рисунок 11 – Процессы компоновки коллажа
27

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

29. Рисунок 12 – Редактирование спрайта
29

30. Процесс редактирования спрайта включает 2
процесса: масштабирование и размытие краёв. Спрайты
масштабируются на 20% от текущего своего размера.
Затем граница спрайта, заданной ширины Y, размывается
к краю спрайта с прозрачностью по убыванию
коэффициента альфа-канала до нуля.
Эти процессы продемонстрированы на рисунке 12.
30

31. Диаграммы DFD
31

32. Рисунок 13 – Контекстная диаграмма DFD
32

33. На рисунке 13 нарисована контекстная диаграмма
DFD, которая кратко описывает процесс создания
цифрового калейдоскопа. Для этого пользователю
необходимо ввести слова в программу, а программа с
помощью поисковой системы ищет картинки для
создания калейдоскопа.
33

34. Рисунок 14 – Создание цифрового калейдоскопа

35. Чтобы создать коллаж необходимо найти и выбрать в
интернете 12 изображений, которые иллюстрируют
введённые пользователем слова. Далее из изображений
программой вырезаются спрайты. Они компонуются в
коллаж.
Эти процессы показаны на рисунке 14.
35

36. Рисунок 15 – Получить картинки
36

37. Чтобы получить изображения необходимо ввести
слова. По заданным словам в интернете подбираются
картинки. Из множества картинок выбирается 12 штук.
Данные процессы отображены на рисунке 15.
37

38. Рисунок 16 – Создать спрайты
38

39. Диаграмма на рисунке 16 показывает процессы
создания спрайтов. На полученных картинок программа
ищет контуры геометрически сложных объектов, далее
по контуру с отступом в Х пикселей по границе
вырезается спрайты.
39

40. Рисунок 17 – Скомпоновать коллаж
40

41. Диаграмма DFD на рисунке 17 подробно описывает
процессы
компоновки
цифрового
калейдоскопа
растрового коллажа. По заданным размерам создаётся
чистое растровое полотно.
Перед
размещением
на
полотно
спрайты
масштабируются на 20% от своего текущего размера,
далее граница спрайта, заданной ширины Y, размывается
к краю спрайта с прозрачностью по убыванию
коэффициента альфа-канала до нуля.
В конце изменённые спрайты размещаются на чистом
растровом полотне или в случайном порядке, или в виде
пирамиды. Коллаж готов.
41

42. Диаграммы UML
42
42

43. Рисунок 18 – Диаграмма вариантов использования
43

44. На рисунке 18 изображена диаграмма вариантов
использования.
Она
описывает
функциональное
назначение системы. Данная программа предназначена
для создания цифрового калейдоскопа растрового
коллажа. Для этого пользователю необходимо ввести:
слова, размеры растрового полотна, значение ширины
размытия границы и выбрать порядок размещения
спрайтов на полотне.
44

45. Рисунок 19.1 – Диаграмма деятельности (Часть 1)

46. Рисунок 19.2 – Диаграмма деятельности (Часть 2)

47. Рисунок 19.3 – Диаграмма деятельности (Часть 3)

48. На рисунках 19.1-19.3 изображена диаграмма
деятельности. Она описывает последовательность
работы
программы
и
компонентов,
которые
взаимодействуют между собой. Каждое состояние на
диаграмме деятельности соответствует выполнению
некоторой элементарной операции, а переход в
следующее
состояние
срабатывает
только
при
завершении этой, операции в предыдущем состоянии.
48

49. Рисунок 20 – Диаграмма компонентов
49

50. На рисунке 20 изображена диаграмма компонентов.
Она описывает особенности физического представления
системы. С помощью
Web-браузера пользователь
взаимодействует с Web-приложением, перемещаясь по
окнам. В системе существуют окна, которые выводят
сообщения пользователю и окна ввода, с помощью
которых можно ввести необходимые параметры в
систему.
50

51. Рисунок 21.1 – Диаграмма последовательности
(Часть 1)
51

52. Рисунок 21.2 – Диаграмма последовательности
(Часть 2)
52

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

54. Рисунок 22 – Диаграмма классов
54

55. На рисунке 22 изображена диаграмма классов. Она
служит для представления статической структуры
приложения в терминологии классов объектноориентированного
программирования.
Диаграмма
классов отражает, взаимосвязи между главной формой
приложения и другими формами, а также описывает их
внутреннюю структуру и типы отношений между ними.
55

56. Прототип
интерфейса
56

57. Рисунок 23 – Главная форма Web-приложения

58. На рисунке 23 изображен прототип главной
формы Web-сайта, на котом размещено Web-приложение
для создания цифрового калейдоскопа растрового
коллажа. Чтобы начать создавать коллаж, необходимо
нажать на кнопку «Start your kaleidoscope».
58

59. Рисунок 24 – Форма ввода слов
59

60. На рисунке 24 изображен прототип формы Webсайта, которая позволяет ввести слова для поиска. Слова
необходимо вводить через «,» . Или можно ввести фразу.
60

61. Рисунок 25 – Процесс поиска изображений
61

62. На рисунке 25 изображен прототип формы Webсайта, которая выводит сообщение пользователю о
процессе поиска картинок по введённым словам. На этой
форме присутствует кнопка «Отмена», нажав на которую
можно отменить создание цифрового калейдоскопа.
62

63. Рисунок 26 – Процесс создания спрайтов
63

64. На рисунке 26 изображен прототип формы Webсайта, которая выводит сообщение пользователю о
процессе создания спрайтов по найденным картинкам.
На этой форме присутствует кнопка «Отмена», нажав на
которую можно завершить создание цифрового
калейдоскопа.
64

65. Рисунок 27 – Сообщение «Спрайты готовы!»
65

66. На рисунке 27 изображен прототип формы Webсайта, которая выводит сообщение пользователю:
«Спрайты созданы!». Далее программа запрашивает
атрибуты для создания растрового полотна.
66

67. Рисунок 28 – Форма ввода размеров полотна
67

68. На рисунке 28 изображен прототип формы Webсайта, которая позволяет ввести размеры для создания
растрового полотна. Размеры включают: значение
ширины и высоты. Для подтверждения нажать кнопку
«Ок».
68

69. Рисунок 29 – Сообщение «Создание полотна»
69

70. На рисунке 29 изображен прототип формы Webсайта, которая выводит сообщение пользователю о процессе
создания растрового полотна. На этой форме присутствует
кнопка «Отмена», нажав на которую можно отменить
создание цифрового калейдоскопа.
70

71. Рисунок 30 – Форма выбора порядка размещения спрайтов

72. На рисунке 30 изображен прототип формы Webсайта, которая просит выбрать порядок размещения
спрайтов на полотне. Спрайты могут размещаться в
случайном порядке, либо в виде пирамиды. Для
подтверждения выбора нажать кнопку «Ок»
72

73. Рисунок 31 – Форма ввода ширины размытия границы

74. На рисунке 31 изображен прототип формы Webсайта, которая запрашивает ввод значения ширины
размытия границ спрайта. Для подтверждения нажать
кнопку «Ок».
74

75. Рисунок 32 – Сообщение «Процесс создания калейдоскопа

76. На рисунке 32 изображен прототип формы Webсайта, которая выводит сообщение для пользователя о
процессе создания цифрового калейдоскопа.
На
этой
форме
присутствует
кнопка
«Отмена», нажав на которую можно отменить создание
цифрового калейдоскопа.
76

77. Рисунок 33 – Вывод сообщения «Калейдоскоп создан»

78. На рисунке 33 изображен прототип формы Webсайта, которая выводит сообщение об успешном
создании цифрового калейдоскопа растрового коллажа.
78

79. Спасибо за
внимание!!!