Дисциплина "Моделирование и анализ программного обеспечения"

1. Лабораторная
работа №1
© Гудаев О.А.
по дисциплине
«Моделирование
и анализ
программного
обеспечения»
2013

2. Лабораторная работа №1
Тема: Фабрика Blockly.
Цель: Научится составлять спецификацию
программ в виде операторных схем.
Практическая реализация операторной
схемы фабрикой Blockly.
Проектирование графического языка
для компьютерной технологии WebGL.
2

3. Задание:
Разработать блок Blockly для структуры или функции
для компьютерной технологии HTML5 и её
библиотеки Canvas согласно задания из таблицы 1.
Разрабатываемый блок должен относится к заданной
в таблице 1 категории, содержать текстовое и
графическое изображение в SVG формате, иметь
помощь в html файле с указанием автора блока,
описанием библиотечной функции WebGL или
HTML5 структуры.
Примечание: блок должен иметь коннекторсклеиватель для предыдущего и последующего
блока.
3

4. Оформление отчета
на SlideShare разместить презентацию, содержащую
слайды (5 баллов) :
1. Исходный текст SVG-файла для блока с функцией
или структурой;
2. Изображение SVG-файла;
3. Изображение Вашего блока в масштабах 100%, 120%,
160%;
4. Исходный текст JavaScript’a создания блока
5. Результат генерации блоком кода на JavaScript.
*дополнительные баллы (3 балла):
1. Заголовок HTML-документа с проверкой подключения
WebGL;
2. Блок завершения Html-документа;
3. Блок создания фрейма Canvas;
4. Закрытие фрейма Canvas.
4

5. Таблица 1. Варианты заданий
(номер варианта = номер по журналу):
№
Категория
Реализовать функцию WebGL или структуру HTML
1
WebGL2D
Рисование линии заданного стиля
2
WebGL2D
Рисование облака точек из списка заданного радиуса
3
WebGL2D
Рисование прямоугольника по 4 точкам заданных списком без заливки
4
WebGL2D
Рисование квадрата с заданной стороной заданный списком, без заливки
5
WebGL2D
Рисование прямоугольника по 4 точкам заданных списком залитым
сплошным цветом
6
WebGL2D
Рисование квадрата с заданной стороной заданный списком, с заливкой
7
WebGL2D
Рисование эллипса по 2 центрам и радиусу, списком без заливки
8
WebGL2D
Рисование эллипса по 2 центрам и радиусу, залитым сплошным цветом
9
WebGL2D
Рисовать окружность, заданную центром и радиусом без заливки
10
WebGL2D
Рисовать окружность, заданную центром и радиусом с сплошной заливкой
11
WebGL2D
Вывод текста
12
HTML5
Объявление структуры создание сцены
13
HTML
Проверка браузера на наличия поддержки WebGL
5

6. Таблица 1. Варианты с 14 по 27
№
Категория
Реализовать функцию WebGL или структуру HTML
14
HTML5
Создание структуры источника света
15
WebGL3D
Нарисовать сферу
16
WebGL3D
Куб
17
WebGL3D
Конус
18
WebGL3D
Призму
19
WebGL3D
Цилиндр
20
WebGL3D
Вывод текста
21
WebGL3D
Нарисовать точки из списка в виде сфер
22
Canvas
Создать Canvas-структуру – ортогональную камеру
23
Canvas
Задание RGB-цвета
24
Canvas
Создание списка двухмерных координат
25
Canvas
Создание списка трехмерных координат
26
Canvas
Создать Canvas-структуру – перспективной камеры
27
HTML
Создание 2 блока: заголовок HTML, окончание HTML.
Примечания: Координаты начала рисования геометрической фигуры задать списком
из двух целых чисел. Поэтому все разрабатываемые WebGL блоки должны иметь этот
список в качестве входного аргумента (не использовать текстовые параметры блока).
6

7. Методические указания. Практика
Изучите работу WebGL на примерах. Инсталлируйте браузер Chrome или
Opera. Для проверки поддержки WebGL в браузере Opera наберите в
командной строке opera:gpu или opera:config и поиск ключевого слова
«WebGL». Для проверки поддержки WebGL в браузере Google Chrome
наберите в командной строке «chrome://gpu-internals». Инсталлируйте
xampp-win32-1.7.1-installer.exe - локальный Web-сервер из
джентльменского набора XAMPP. Не меняйте папку установки, а
используйте по умолчанию «C:xampp». Запустите служебную программу с
рабочего стола XAMPP Control Panel. Нажмите кнопку «Start» только для
сервера «Apache» и не делайте его службой ОС Window. Работу Apache
можно проверить, если набрать в командной строке браузера адрес
«localhost». В случае успешной работы сервера появится заставка
«XAMPP». Только при необходимости изучать примеры WebGL, работайте
с локальным Web-сервером. Если больше не будете изучать примеры и
работать с локальным Web-сервером, то нажмите кнопку «Stop» и
выгрузите консоль XAMPP из памяти компьютера, нажав кнопку «Exit».
Разархивируйте всё содержимое корневой папки «mrdoob-three.js-8707cc2»
архивного файла mrdoob-three.js-r51-0-g8707cc2.zip в папку
«C:xamppwebdav». Скопируйте, созданный нами «список примеров
WebGL», индексный файл «index.html» в каталог разархивированных
примеров «C:xamppwebdavexamples». Наберите в адресной строке
браузера «localhost/webdav/examples». Появится список примеров WebGL.
Для создания графического файла формата SVG используйте программу
svg-edit-2.6.zip.
7

8. ПРИМЕР ЛАБОРАТОРНОЙ РАБОТЫ №1
Тема: «Фабрика Blockly»
Выполнила студентка гр.ПО-10а Ждан О.А.
8

9. РАБОТА С SVG ФАЙЛАМИ
9

10. ИСХОДНЫЙ ТЕКСТ SVG
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<radialGradient spreadMethod="pad" id="svg_36">
<stop offset="0.88934" stop-color="#ffff00"/>
<stop offset="1" stop-color="#0000ff"/>
</radialGradient>
</defs>
<g>
<title>Layer 1</title>
<ellipse id="svg_49" cy="122" cx="143" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" strokewidth="5" stroke="#000000" fill="#000000"/>
<ellipse id="svg_51" cy="117" cx="145" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" strokewidth="5" stroke="#000000" fill="#000000"/>
<ellipse id="svg_52" cy="112" cx="150" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" strokewidth="5" stroke="#000000" fill="#000000"/>
<g id="svg_2">
<ellipse stroke="#000000" ry="23.73472" rx="25.47018" id="svg_35" cy="73.09242" cx="75.86675" strokelinecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>
<path stroke="#000000" id="svg_40" d="m65.41934,72.67703c12.46438,-0.68121 7.06309,-14.3085 0.83107,15.33059c-6.23235,-1.02209 -13.29528,16.01181 -0.83107,15.33059z" stroke-linecap="null" strokelinejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffffff"/>
<path stroke="#000000" id="svg_41" d="m83.74874,73.15649c12.46435,-0.68105 7.06291,-14.30817 0.83123,15.33026c-6.23235,-1.02192 -13.29527,16.01183 -0.83123,15.33026z" stroke-linecap="null" strokelinejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffffff"/>
<ellipse stroke="#000000" ry="1.79131" rx="1.2951" id="svg_42" cy="66.37504" cx="62.91581" strokelinecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>
10

11. ПРОДОЛЖЕНИЕ SVG
<ellipse stroke="#000000" ry="1.79131" rx="2.59019" id="svg_47" cy="68.16635" cx="79.75204" stroke-linecap="null"
stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>
<path stroke="#000000" id="svg_81" d="m87.20033,81.19391c-5.62318,21.46277 -29.00807,-0.6335 -29.13638,-0.88571c0.12814,-0.25169 6.0537,-0.0338 6.0537,-0.0338c0,0 8.0322,-0.32235 8.0322,-0.32235c0,0 7.22279,1.071
7.22279,1.071c0,0 7.8277,0.17086 7.8277,0.17086l0,0l0,0l0,0l0,0l0,0z" stroke-linecap="null" stroke-linejoin="null"
stroke-dasharray="null" stroke-width="5" fill="#ffaaff"/>
<ellipse stroke="#000000" transform="matrix(0.649995 -0.589524 0.568294 0.674278 -126.278 160.987)" ry="21.24893"
rx="4.52088" id="svg_1" cy="13.40373" cx="240.90374" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_3" transform="matrix(0.640728 0.600342 -0.578723 0.664664 -65.9188 54.8063)"
ry="21.24893" rx="4.52088" cy="-156.94768" cx="134.10366" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_4" transform="matrix(0.859851 0.0810885 -0.0781685 0.891972 -114.697 118.104)"
ry="21.24893" rx="4.52088" cy="-128.74471" cx="209.41837" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_5" transform="matrix(0.675886 -0.557314 0.537242 0.701136 -164.921 222.136)"
ry="21.24893" rx="4.52088" cy="103.71442" cx="319.16451" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_6" transform="matrix(0.171868 -0.877726 0.846116 0.178288 -104.087 332.57)"
ry="21.24893" rx="4.52088" cy="207.31363" cx="315.28582" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_7" transform="matrix(0.700367 0.523779 -0.504917 0.72653 -40.2983 119.852)"
ry="21.24893" rx="4.52088" cy="-58.54258" cx="77.42886" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_8" transform="matrix(0.863192 -0.019466 0.0187651 0.895439 -119.725 127.172)"
ry="21.24893" rx="4.52088" cy="5.51025" cx="224.97126" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_9" transform="matrix(-0.114109 0.887794 -0.855821 -0.118372 -30.1633 171.006)"
ry="21.24893" rx="4.52088" cy="-42.35508" cx="-131.06859" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_10" transform="matrix(-0.147245 -0.882529 0.850746 -0.152745 -23.2136 335.377)"
ry="21.24893" rx="4.52088" cy="225.83336" cx="271.303" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
<ellipse stroke="#000000" id="svg_11" transform="matrix(0.353638 0.817073 -0.78765 0.366851 -17.048 157.724)"
ry="21.24893" rx="4.52088" cy="-71.35177" cx="-46.33057" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" fill="#ffff00"/>
</g>
</g>
</svg>
11

12. МАСШТАБИРОВАНИЕ (100%, 120%, 160%)
100%
160%
120%
12

13. BLOCKLY
13

14. HTML5 + JAVA SCRIPT
14

15. РЕЗУЛЬТАТ
окружность, заданная центром и
радиусом с сплошной заливкой
15

16. Программирование
заголовка
Blockly.Language.webgl_a10_headerhtml5 = {
category: 'WebGL1',
helpUrl:
'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
init: function() {
this.setColour(220);
this.appendStatementInput("NAME")
.appendTitle(new Blockly.FieldImage("../../media/c1.svg", 150,
150))
.appendTitle("Head");
this.setNextStatement(true);
this.setTooltip(''); }};
Blockly.JavaScript.webgl_a10_headerhtml5 = function() {
var statements_name = Blockly.JavaScript.statementToCode(this,
'NAME');
var code = '&lt;html&gt;n&lt;head&gt;n&lt;title&gt;' +
statements_name.toString() + '&lt;/title&gt;n&lt;/head&gt;'
return code;};
16

17. БЛОК «TITLE»
Blockly.Language.webgl_a10_title = {
category: 'WebGL1',
helpUrl:
'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help
.html',
init: function() {
this.setColour(58); this.appendDummyInput()
.appendTitle("Title")
.appendTitle(new Blockly.FieldTextInput("Black Circle"),
"NAME");
this.setPreviousStatement(true); this.setTooltip(''); }
};
Blockly.JavaScript.webgl_a10_title = function()
{ var text_name = this.getTitleValue('NAME');
var code = text_name.toString(); return code; };
17

18. БЛОК «BODY»
Blockly.Language.webgl_a10_body = {
category: 'WebGL1',
helpUrl:
'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
init: function() {
this.setColour(150);
this.appendStatementInput("NAME")
.appendTitle("Body");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip(''); }
};
Blockly.JavaScript.webgl_a10_body = function()
{ var statements_name = Blockly.JavaScript.statementToCode(this,
'NAME');
var code = "n&lt;body&gt;n" + statements_name.toString() +
"n&lt;/body&gt;"
return code; };
18

19. БЛОК «CANVAS»
Blockly.Language.webgl_a10_canvas = {
category: 'WebGL1',
helpUrl:
'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help.html',
init: function() {
this.setColour(280);
this.appendDummyInput()
.appendTitle("canvas id")
.appendTitle(new Blockly.FieldTextInput("circle"), "NAME");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
}
};
Blockly.JavaScript.webgl_a10_canvas = function() {
var text_name_canvas = this.getTitleValue('NAME');
var code = "&lt;canvas id='" + text_name_canvas.toString() +"'
width="1000" height="600" &gt;&lt;/canvas&gt;"
19

20. БЛОК
«DRAW
CIRCLE»
Blockly.Language.webgl_a10_drawcircle = {
category: 'WebGL1',
helpUrl:
'file:///C:/blockly/demos/webgl/webgl_a10_h
eaderhtml5.help.html',
init: function() {
this.setColour(350);
this.appendDummyInput()
.appendTitle("Draw circle in x=")
.appendTitle(new
Blockly.FieldTextInput("200"), "x")
.appendTitle("y =")
.appendTitle(new
Blockly.FieldTextInput("200"), "y")
.appendTitle("radius =")
.appendTitle(new
Blockly.FieldTextInput("100"), "r");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip(''); }};
20

21. Продолжение кода блока «DRAW CIRCLE»
Blockly.JavaScript.webgl_a10_drawcircle = function() {
var text_x = this.getTitleValue('x');
var text_y = this.getTitleValue('y');
var text_r = this.getTitleValue('r');
var code = "n&lt;script&gt;"
code += "nif (window.WebGLRenderingContext){"
code += "nvar c = document.getElementById('canv');"
code += "n var gl = c.getContext('2d');"
};
code += "n gl.beginPath();"
code += "n gl.arc(" + parseInt(text_x) + ", "+parseInt(text_y)+",
"+parseInt(text_r)+", 0, 2 * Math.PI, false);"
code += "n gl.lineWidth = 5;"
code += "n gl.strokeStyle = 'orange';"
code += "n gl.fill();"
code += "n gl.stroke();"
code += "n}"
code = code + "n&lt;/script&gt;";
return code;
21

22. БЛОК «EXIT»
Blockly.Language.webgl_a10_exit = {
category: 'WebGL1',
helpUrl:
'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.help
.html',
init: function () {
this.appendDummyInput()
.appendTitle("Exit");
this.setPreviousStatement(true);
this.setTooltip('')
}
};
Blockly.JavaScript.webgl_a10_exit = function () {
var code = "n&lt;/html&gt;"
return code;
};
22

23. 23

24. Спасибо за работу
24