Расчётнаяработа

« ПОДИСЦИПЛИНЕ МОДЕЛИРОВАНИЕИ АНАЛИЗПРОГРАММНОГО

»ОБЕСПЕЧЕНИЯ : НАТЕМУ ПРОЕКТИРОВАНИЕИ

РАЗРАБОТКАПРОГРАММНОГОПРОДУКТА

-10 Выполнила студентка группыПОС б . .Шашалевич ЕВ

. . . .Руководитель ст преп Гудаев ОА

2

Цифровой калейдоскоп растровогоколлажа : КлассПО WEB- .служба

: Тема Программный робот автоматической генерации плаката . современного фигуративного искусства

: Назначение Ключевые слова облака тегов используются для 2D автоматической генерации растрового изображения

.фигуративного цифрового коллажа : Функции Программа подбирает из Интернета двенадцать

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

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

X программа далее вырезает спрайт с отступом в пикселей по . границе контура объекта Окончательно программа на чистом

, W H, , растровом полотне размера на размещает спрайты . , иллюстрирующие слова из фразы Причем спрайты

располагаются на полотне случайным образом или , неслучайным в виде пирамиды спрайты перекрывают друг

, 20% друга масштабируются на коэффициент от размера, , Y, спрайта а самое главное граница спрайта заданной ширины

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

3

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

3

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

4

1 , На рисунке перечислены объекты которые присутствуют в создании цифрового: калейдоскопа

;ключевые слова из облака тегов ;фигуры .спрайты

, Пользователь вводит набор слов далее 12 , программа подбирает из интернета картинок

которые иллюстрируют каждое в отдельности. слово На картинках программа находит контуры

, геометрически сложных объектов и вырезает спрайт с отступом Х .пикселей

5

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

6

2 « ». На рисунке изображена сущность Фигуры . Фигуры могут быть двухмерными и трёхмерными

Но для данного калейдоскопа нужны толькодвухмерные:

;квадрат ;ромбокружностьтреугольник .овал

7

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

8

3 , На рисунке представлены процессы которые . выполняются в программе Они необходимы для

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

9

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

4 « На рисунке представлена сущность Компоновка ». растрового полотна

: « Она включает такие компоненты Порядок », « », « расположения спрайта Перекрытие Масштабирование

20% », « спрайта на от его размера Размытие границ спрайта , с прозрачностью с заданнойшириной Y ». к краю

« » Сущность Порядок расположения спрайта включает « » « ».два компонента Случайный и В виде пирамиды

11

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

5 « На рисунке представлена сущность Растровое». :полотно Оно содержит такие атрибуты

;расширение ;размеры .название

: «Растровое полотно может храниться в форматах JPG», «PNG», «BMP», «GIF».

:Также у него есть размеры ;ширина .высота

13

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

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

создания цифрового калейдоскопа растрового. коллажа

15

Список сущностей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

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. JPG3.2.2. PNG3.2.3. GIF3.2.4. BMP

3.3. Название

17

18

IDEF0 Диаграммы

18

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

На контекстной диаграмме Idef0, которая изображена на рисунке 7, в общем описывается

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

слов и также желаемый размер растрового, полотна которое будет создано программой

. , автоматически Коллаж создаётся по алгоритму . который реализован в программе

20

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

8 На рисунке описываются процессы . создания цифрового калейдоскопа Чтобы получить картинки необходимо ввести слова или

, 12 . фразу по этим словам робот найдёт картинок Далее на этих картинках программа находит

контуры сложных геометрических объектов и вырезает спрайты с отступом . в Х пикселей Далее

.компонуется калейдоскоп

22

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

9 На рисунке описан процесс получения. картинок Пользователь с помощью клавиатуры

, пишет слова далее программа с помощью поисковой системы ищет картинки по заданным

12 словам в интернете и выбирает картинок для .создания коллажа

24

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

10 На рисунке описан процесс создания. спрайта Программный робот проводит

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

.Х пикселей по границе контура

26

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

11 На рисунке подробно описаны процессы компоновки цифрового калейдоскопа растрового

. коллажа Пользователю необходимо ввести : . размеры растрового полотна ширину и высоту

Для создания коллажа программа редактирует , слайды и потом размещает их на чистом

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

28

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

2 Процесс редактирования спрайта включает: . процесса масштабирование и размытие краёв 20% Спрайты масштабируются на от текущего

. , своего размера Затем граница спрайта заданной Y, ширины размывается к краю спрайта с

прозрачностью по убыванию коэффициента- .альфа канала до нуля Эти процессы продемонстрированы на рисунке

12.

30

Диаграммы DFD

31

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

13 На рисунке нарисована контекстная диаграмма DFD, которая кратко описывает

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

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

.калейдоскопа

33

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

Чтобы создать коллаж необходимо найти и 12 , выбрать в интернете изображений которые

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

. .спрайты Они компонуются в коллаж 14.Эти процессы показаны на рисунке

35

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

Чтобы получить изображения необходимо . ввести слова По заданным словам в интернете

. подбираются картинки Из множества картинок 12 . выбирается штук Данные процессы 15.отображены на рисунке

37

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

16 Диаграмма на рисунке показывает процессы . создания спрайтов На полученных картинок

программа ищет контуры геометрически , сложных объектов далее по контуру с отступом в

.Х пикселей по границе вырезается спрайты

39

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

Диаграмма DFD 17 на рисунке подробно описывает процессы компоновки цифрового

. калейдоскопа растрового коллажа По заданным . размерам создаётся чистое растровое полотно

Перед размещением на полотно спрайты 20% масштабируются на от своего текущего

, , размера далее граница спрайта заданной Y, ширины размывается к краю спрайта с

прозрачностью по убыванию коэффициента- . альфа канала до нуля

В конце изменённые спрайты размещаются на чистом растровом полотне или в случайном

, . . порядке или в виде пирамиды Коллаж готов

41

42

Диаграммы UML

42

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

18 На рисунке изображена диаграмма . вариантов использования Она описывает

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

: Для этого пользователю необходимо ввести, , слова размеры растрового полотна значение

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

44

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

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

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

На рисунках 19.1-19.3 изображена диаграмма. деятельности Она описывает последовательность

, работы программы и компонентов которые . взаимодействуют между собой Каждое состояние

на диаграмме деятельности соответствует , выполнению некоторой элементарной операции а

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

. предыдущем состоянии

48

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

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

Web- браузера пользователь взаимодействует сWeb- , . приложением перемещаясь по окнам В

, системе существуют окна которые выводят , сообщения пользователю и окна ввода с помощью

которых можно ввести необходимые параметры в. систему

50

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

Рисунок 21.2 – Диаграмма последовательности

( 2)Часть 52

На рисунке 21.1-21.2 изображена диаграмма. последовательности На ней изображаются

, только те объекты которые непосредственно участвуют во взаимодействии и не показываются

возможные статические ассоциации с другими. объектами В данной диаграмме пользователь

, взаимодействует с программой программа . взаимодействует с поисковой системой

Программа вырезает спрайт и размещает их на.полотне

53

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

54

На рисунке 22 изображена диаграмма. классов Она служит для представления

статической структуры приложения в -терминологии классов объектно

. ориентированного программирования , Диаграмма классов отражает взаимосвязи между

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

.типы отношений между ними

55

56

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

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

23 На рисунке изображен прототип главной формы Web- , сайта на котом размещено Web-

приложение для создания цифрового . калейдоскопа растрового коллажа Чтобы

, начать создавать коллаж необходимо нажать на «кнопку Start your kaleidoscope».

58

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

24 На рисунке изображен прототип формыWeb- , сайта которая позволяет ввести слова для

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

60

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

25 На рисунке изображен прототип формыWeb- , сайта которая выводит сообщение

пользователю о процессе поиска картинок по . введённым словам На этой форме присутствует

« », кнопка Отмена нажав на которую можно .отменить создание цифрового калейдоскопа

62

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

26 На рисунке изображен прототип формыWeb- , сайта которая выводит сообщение

пользователю о процессе создания спрайтов по . найденным картинкам На этой форме

« », присутствует кнопка Отмена нажав на которую можно завершить создание цифрового

.калейдоскопа

64

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

27 На рисунке изображен прототип формыWeb- , сайта которая выводит сообщение

: « !». пользователю Спрайты созданы Далее программа запрашивает атрибуты для создания .растрового полотна

66

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

На рисунке 28 изображен прототип формыWeb- , сайта которая позволяет ввести размеры для

. создания растрового полотна Размеры: . включают значение ширины и высоты Для

« ».подтверждения нажать кнопку Ок

68

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

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

70

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

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

72

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

На рисунке 31 изображен прототип формыWeb- , сайта которая запрашивает ввод значения

. ширины размытия границ спрайта Для « ».подтверждения нажать кнопку Ок

74

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

На рисунке 32 изображен прототип формыWeb- , сайта которая выводит сообщение для

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

На этой форме присутствует кнопка« », Отмена нажав на которую можно отменить

.создание цифрового калейдоскопа

76

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

На рисунке 33 изображен прототип формыWeb- , сайта которая выводит сообщение об

успешном создании цифрового калейдоскопа .растрового коллажа

78

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