МАПО Лаба №1

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

Upload: -

Post on 22-May-2015

1.206 views

Category:

Education


6 download

DESCRIPTION

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

TRANSCRIPT

Page 1: МАПО Лаба №1

Лабораторная Лабораторная рработа №1абота №1

© Гудаев О.А.Гудаев О.А. 20132013

по дисциплинепо дисциплине«Моделирование«Моделирование

и анализ и анализ программного программного обеспечения» обеспечения»

Page 2: МАПО Лаба №1

2

Лабораторная работа №1

Тема: Фабрика Blockly.

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

Page 3: МАПО Лаба №1

3

Задание:

Разработать блок Blockly для структуры или функции для компьютерной технологии HTML5 и её библиотеки Canvas согласно задания из таблицы 1.

Разрабатываемый блок должен относится к заданной в таблице 1 категории, содержать текстовое и графическое изображение в SVG формате, иметь помощь в html файле с указанием автора блока, описанием библиотечной функции WebGL или HTML5 структуры.

Примечание: блок должен иметь коннектор-склеиватель для предыдущего и последующего блока.

Page 4: МАПО Лаба №1

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.

Page 5: МАПО Лаба №1

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

Page 6: МАПО Лаба №1

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 блоки должны иметь этот список в качестве входного аргумента (не использовать текстовые параметры блока).

Page 7: МАПО Лаба №1

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:\xampp\webdav\». Скопируйте, созданный нами «список примеров WebGL», индексный файл «index.html» в каталог разархивированных примеров «C:\xampp\webdav\examples». Наберите в адресной строке браузера «localhost/webdav/examples». Появится список примеров WebGL. Для создания графического файла формата SVG используйте программу svg-edit-2.6.zip.

Page 8: МАПО Лаба №1

8

ПРИМЕР ЛАБОРАТОРНОЙ РАБОТЫ №1

Тема: «Фабрика Blockly»

Выполнила студентка гр.ПО-10а Ждан О.А.

Page 9: МАПО Лаба №1

9

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

Page 10: МАПО Лаба №1

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" stroke-

width="5" stroke="#000000" fill="#000000"/> <ellipse id="svg_51" cy="117" cx="145" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-

width="5" stroke="#000000" fill="#000000"/> <ellipse id="svg_52" cy="112" cx="150" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-

width="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" stroke-

linecap="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" stroke-linejoin="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" stroke-linejoin="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" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#000000"/>

Page 11: МАПО Лаба №1

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.88571c-

0.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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="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" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/>

</g> </g></svg>

Page 12: МАПО Лаба №1

12

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

100%

120%

160%

Page 13: МАПО Лаба №1

13

BLOCKLY

Page 14: МАПО Лаба №1

14

HTML5 + JAVA SCRIPT

Page 15: МАПО Лаба №1

15

РЕЗУЛЬТАТ

окружность, заданная центром и радиусом с сплошной заливкой

Page 16: МАПО Лаба №1

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;};

Page 17: МАПО Лаба №1

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; };

Page 18: МАПО Лаба №1

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; };

Page 19: МАПО Лаба №1

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;"

Page 20: МАПО Лаба №1

20

БЛОК «DRAW

CIRCLE»

Blockly.Language.webgl_a10_drawcircle = { category: 'WebGL1', helpUrl:

'file:///C:/blockly/demos/webgl/webgl_a10_headerhtml5.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(''); }};

Page 21: МАПО Лаба №1

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;};

Page 22: МАПО Лаба №1

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;};

Page 23: МАПО Лаба №1

23

Page 24: МАПО Лаба №1

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