МАПО Лаба №1

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

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

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

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

2

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

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

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

3

Задание:

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

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

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

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.

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

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

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.

8

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

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

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

9

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

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

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>

12

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

100%

120%

160%

13

BLOCKLY

14

HTML5 + JAVA SCRIPT

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

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

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

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

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(''); }};

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

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

23

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