Моделирование вихря на JAVASCRIPT
Пользовательские скрипты в браузере, встраивание в веб-страницы. Пример создания и анимации объекта, библиотеки JavaScript и средства тестирования. Возможности и структура языка, модель вихря в программе. Принципы, реализация и библиотеки WebGL.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 11.01.2020 |
| Размер файла | 34,4 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Санкт-Петербургский государственный политехнический университет
Курсовой проект
Моделирование вихря на JAVASCRIPT
Направление подготовки бакалавров: 010800 Механика и математическое моделирование
Профиль ООП: 010800.62.01 Механика деформируемого твердого тела
Санкт-Петербург
2014
Оглавление
Введение
Возможности языка
Структура языка
Встраивание в веб-страницы
Пользовательские скрипты в браузере
Виджеты
Версии
Библиотеки JavaScript
Средства тестирования
WebGL
ПринципыWebGL
РеализацииWebGL
БиблиотекиWebGL
Пример создания и анимации объекта
Модель вихря в программе
Модель вихря на JavaScript
Вывод
Список литературы
Введение
В современном мире интернет стал играть очень важную роль в жизни людей. Кто-то просто просматривает новости и видео, а для кого-то интернет это заработок. Так или иначе мы сталкиваемся с различными flash-приложениями или написанными на JavaScript(JS). Хотя раньше программирование на JS казалось ведомо только избранным, а сейчас же столь мощный пакет стал более доступным для обычных пользователей. Так же относительно недавно проводили сравнение вычислительных возможностей flash и JS,и оказалось, что JS значительно обгоняет в данном параметре своего конкурента. Поэтому автор считает, что наступает век JavaScript. Также автор надеется, что после прочтение ниже приведенной работы вы поддержите его мнение и поэтому в конце курсового проекта будет разобрана программа моделирование вихря. Целью данной программы являются:
1)Ознакомиться с особенностями JavaScript
2)Создать модель вихря
3)Написать программу наглядно демонстрирующую взаимодействие вихря с объектами
Возможности языка
JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам -- функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания -- что придаёт языку дополнительную гибкость.
Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:
· объекты, с возможностью интроспекции;
· функции как объекты первого класса;
· автоматическое приведение типов;
· автоматическая сборка мусора;
· анонимные функции.
В языке отсутствуют такие полезные вещи, как:
· модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;
· стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода/вывода, базовых типов для бинарных данных;
· стандартные интерфейсы к веб-серверам и базам данных;
· система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.
Структура языка
Структурно JavaScript можно представить в виде объединения трёх чётко различимых друг от друга частей:
· ядро (ECMAScript),
· объектная модель браузера (BrowserObjectModel или BOM (de)),
· объектная модель документа (DocumentObjectModel или DOM).
Если рассматривать JavaScript в отличных от браузера окружениях, то объектная модель браузера и объектная модель документа могут не поддерживаться.
Объектную модель документа иногда рассматривают как отдельную от JavaScript сущность, что согласуется с определением DOM как независимого от языка интерфейса документа. В противоположность этому ряд авторов находят BOM и DOM тесно взаимосвязанными.
Встраивание в веб-страницы
Для добавления JavaScript-кода на страницу, можно использовать теги <script></script>, которые рекомендуется, но не обязательно, помещать внутри контейнера <head>. Контейнеров <script> в одном документе может быть сколько угодно. Атрибут «type='text/javascript'» указывать необязательно, так как по умолчанию стоит javascript.
Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутрибраузера:
<script type="text/javascript">
alert('Hello, World!');
</script>
Пользовательские скрипты в браузере
Пользовательские скрипты в браузере -- это программы, написанные на JavaScript, выполняемые в браузере пользователя при загрузке страницы. Они позволяют автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимое и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.
Для управления пользовательскими скриптами в MozillaFirefox используется расширение Greasemonkey; Opera и GoogleChrome предоставляют средства поддержки пользовательских скриптов и возможности для выполнения ряда скриптов Greasemonkey.
Виджеты
Виджет -- вспомогательная мини-программа, графический модуль которой размещается в рабочем пространстве соответствующей родительской программы (англ.), служащая для украшения рабочего пространства, развлечения, решения отдельных рабочих задач или быстрого получения информации из интернета без помощи веб-браузера. JavaScript используется как для реализации виджетов, так и для реализации движков виджетов. В частности, при помощи JavaScript реализованы AppleDashboard, MicrosoftGadgets (англ.), Yahoo!_Widgets (англ.), GoogleGadgets, KlipfolioDashboard (англ.).
Версии
|
JavaScript |
Соответствующая версия JScript |
Существенные изменения |
|
|
1.0 (Netscape 2.0, март 1996) |
1.0 (ранние версии IE 3.0, август 1996) |
Оригинальная версия языка JavaScript. |
|
|
1.1 (Netscape 3.0, август 1996) |
2.0 (поздние версии IE 3.0, январь 1997) |
В данной версии был реализован объект Array и устранены наиболее серьёзные ошибки. |
|
|
1.2 (Netscape 4.0, июнь 1997) |
Реализован переключатель switch, регулярные выражения. Практически приведён в соответствии с первой редакцией спецификации ECMA-262. |
||
|
1.3 (Netscape 4.5, октябрь 1998) |
3.0 (IE 4.0, октябрь 1997) |
Совместим с первой редакцией ECMA-262. |
|
|
1.4 (только NetscapeServer) |
4.0 (Visual Studio 6, нетверсии IE) |
Применяется только в серверных продуктах Netscape. |
|
|
5.0 (IE 5.0, март 1999) |
|||
|
5.1 (IE 5.01) |
|||
|
1.5 (Netscape 6.0, ноябрь 2000; также поздние версии Netscape и Mozilla) |
5.5 (IE 5.5, июль 2000) |
Редакция 3 (декабрь 1999). Совместим с третьей редакцией спецификации ECMA-262. |
|
|
5.6 (IE 6.0, октябрь 2001) |
|||
|
1.6 (Gecko 1.8, Firefox 1.5, ноябрь 2005) |
Редакция 3 с некоторыми совместимыми улучшениями: E4X, дополнения к Array (например, Array.prototype.forEach), упрощения для Array и String |
||
|
1.7 (Gecko 1.8.1, Firefox 2.0, осень 2006), расширение JavaScript 1.6 |
Редакция 3, с добавлением всех улучшений из JavaScript 1.6, генераторов и списочных выражений (listcomprehensions, [a*a for (a initer)]) из Python, блоковых областей с использованием let и деструктурирующего присваивания (var [a, b] = [1, 2]). |
||
|
JScript .NET (ASP.NET; нетверсии IE) |
(Считается, что JScript .NET разработан при участии других членов ECMA) |
||
|
1.8 (Gecko 1.9, Firefox 3.0, осень 2008), расширение JavaScript 1.7 |
Новая форма записи для функций, сходная с типичнымилямбда-выражениями, генераторы (англ.), новые методы итеративной обработки массивов reduce() и reduceRight(). |
||
|
1.8.1 (Gecko 1.9.1, Firefox 3.5) |
Встроенная поддержка JSON, метод getPrototypeOf() у Object, методы trim(), trimLeft(), trimRight() у String |
||
|
2.0 |
Редакция 4 (разработка не закончена, название зарезервировано ECMA, но не было использовано для публикации) |
||
|
Редакция 5 (ранее известная под названием ECMAScript 3.1.Финальная версия принята 3 декабря 2009 года.) |
Библиотеки JavaScript
Для обеспечения высокого уровня абстракции и достижения приемлемой степени кросс-браузерности при разработке веб-приложений используются библиотеки JavaScript. Они представляют собой набор многократно используемых объектов и функций.
Среди известных JavaScript библиотек можно отметить Adobelife, DojoToolkit, Extjs, jQuery, Mootools, Prototype, Qooxdoo (англ.), Underscore.
1)jQuery -- библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX.
Возможности:
· Движок кроссбраузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;
· Переход по дереву DOM, включая поддержку XPath как плагина;
· События;
· Визуальные эффекты;
· AJAX-дополнения;
· JavaScript-плагины.
2)Ext JS -- библиотека JavaScript для разработки веб-приложений и пользовательских интерфейсов, изначально задуманная как расширенная версия Yahoo! UI Library, однако преобразовавшаяся затем в отдельный фреймворк. До версии 4.0 использовала адаптеры для доступа к библиотекам Yahoo! UI Library, jQuery или Prototype/script.aculo.us, начиная с 4-ой версии адаптеры отсутствуют. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и все остальные новшества Web 2.0.
Средства тестирования
Большинство фреймворков автоматизированного тестирования (англ.) JavaScript-кода предполагают запуск тестов в браузере. Это осуществляется при помощи HTML-страницы, являющейся контекстом тестирования (англ.), которая, в свою очередь загружает всё необходимое для осуществления тестирования. Первыми такими фреймворками были JsUnit (англ.) (создан в 2001 году), Selenium (создан в 2004 году). Альтернатива -- запуск тестов из командной строки. В этом случае используются окружения, отличные от браузера, например, Rhino. Одним из первых инструментов такого рода является Crosscheck, позволяющий тестировать код, эмулируя поведение InternetExplorer 6 и Firefox версий 1.0 и 1.5. Другой пример фреймворка автоматизированного тестирования JavaScript-кода, не использующего браузер для запуска тестов -- библиотека env.js, созданная Джоном Резигом. Она использует Rhino и при этом содержит эмуляцию окружения браузера и DOM.
BlueRidge, плагин к фреймворку веб-приложений RubyonRails, позволяет осуществлять модульное тестированиеJavaScript-кода как в браузере, так и вне его. Это достигается за счёт использования фреймворка автоматизированного тестирования Screw.Unit и Rhino с env.js[101].
Главная проблема систем тестирования, не использующих браузеры, в том, что они используют эмуляции, а не реальные окружения, в которых выполняется код. Это приводит к тому, что успешное прохождение тестов не гарантирует того, что код корректно отработает в браузере. Проблемой систем тестирования, использующих браузер, является сложность работы с ними, необходимость осуществления рутинных неавтоматизированных действий. Для решения этого JsTestDriver, фреймворк автоматизированного тестирования, разрабатываемый Google, использует сервер, взаимодействующий с браузерами для осуществления тестирования. Сходным образом ведёт себя SeleniumRemoteControl, входящий во фреймворк автоматизированного тестирования Selenium: он включает в себя сервер, запускающий и завершающий браузеры и действующий как HTTP-прокси для запросов к ним. Кроме того, в Selenium содержится SeleniumGrid, позволяющий осуществлять одновременное тестирование JavaScript-кода на разных компьютерах с разными окружениями, уменьшая время выполнения тестов. Testswarm, имеющее поддержку фреймворков автоматизированного тестирования JavaScript-кода QUnit (библиотека jQuery), UnitTestJS (библиотека Prototype), JSSpec (библиотека MooTools), JsUnit, Selenium и DojoObjectiveHarness, представляет собой распределённое средство поддержки непрерывной интеграции[108].
Негативное свойство, которым может обладать фреймворк автоматизированного тестирования JavaScript-кода -- наличие зависимостей. Это создаёт риск отказа в работе тестируемого кода, успешно проходящего тесты, в среде с отсутствием этих зависимостей. Например, исходная версия JsUnitTest, фреймворка, созданного и использовавшегося для тестирования библиотеки Prototype, зависела от самой Prototype, изменяющего свойства объектов в глобальной области видимости. Включение в библиотеку JavaScript инструмента тестирования -- распространённая практика. Так YUI Test 3 является частью Yahoo! UI Library и может быть безопасно использован для тестирования произвольного JavaScript-кода. QUnit -- фреймворк автоматизированного тестирования, созданный разработчиками jQuery.
WebGL
WebGL (Web-basedGraphicsLibrary) -- программнаябиблиотекадляязыкапрограммированияJavaScript, позволяющаясоздаватьнаJavaScriptинтерактивную3D-графику, функционирующую в широком спектре совместимых с ней веб-браузерах. За счёт использования низкоуровневых средств поддержки OpenGL, часть кода на WebGL может выполняться непосредственно на видеокартах. Проект по созданию библиотеки управляется некоммерческой организацией KhronosGroup.
ПринципыWebGL
Библиотека построена на основе OpenGL ES 2.0 и обеспечивает API для 3D-графики., использует HTML5-элемент canvas, также оперирует с DOM. Автоматическое управление памятью предоставляется языком JavaScript.
РеализацияWebGL
· MozillaFirefox -- WebGL был включён во все платформы, у которых есть нужная графическая карта с актуальными драйверами, начиная с версии 4.0.
· GoogleChrome -- WebGL включён по умолчанию во все версии начиная с 9.
· Safari -- поддерживает WebGL, но поддержка отключена по умолчанию.
· Opera -- WebGLреализован в версии Opera 12.00, но отключена по умолчанию.
· InternetExplorer -- Microsoft не заявляла об официальной поддержке WebGL, независимыми разработчиками выпущены плагины ChromeFrame и IEWebGL, предусматриваюющие опции, необходимые для поддержки WebGL в InternetExplorer. По-видимому, поддержка WebGL появится в IE 11.
БиблиотекиWebGL
· Для разработки WebGL используется несколько библиотек. Первой общедоступной стала библиотека WebGLU. Среди других библиотек для WebGL - GLGE, C3DL, Copperlicht, SpiderGL, gwt-g3d (обёртка для GWT), SceneJS, X3DOM, Processing.js, Three.js, Turbulenz, OSGJS, XB PointStream и CubicVR.js.
· ANGLE (AlmostNativeGraphicsLayerEngine) -- программа, выпущенная под лицензией BSD, которая позволяет переводить содержимое WebGL в OpenGL ES 2.0, вызывать API DirectX 9, которые взаимодействуют с платформами MicrosoftWindows без необходимости в дополнительных драйверах OpenGL.
Пример создания и анимации объекта.
Подключаем библиотеку Three.js и RequestAnimationFrame.js
1. <scriptsrc="Three.js"></script>
2. <scriptsrc="RequestAnimationFrame.js"></script>
Теперь можно приступить к написанию кода. Вначале нам нужно создать объект WebGLRenderer с режимом сглаживания.
1. var renderer =newTHREE.WebGLRenderer({antialias:true});
2. renderer.setSize(document.body.clientWidth,document.body.clientHeight);
Далее применяем его BODY
1. document.body.appendChild(renderer.domElement);
ставим цвет для очистки рендера и очищаем его
1. renderer.setClearColorHex(0xEEEEEE,1.0);
2. renderer.clear();
Теперь станем определять необходимые нам переменные:
1. varfov=45;// угол обзора камеры
2. var width =renderer.domElement.width;// ширинасцены
3. var height =renderer.domElement.height;// высотасцены
4. varaspect=width/height;// соотношение сторон экрана
5. varnear=1;// минимальная видимость
6. varfar=10000;// максимальная видимость
Далее создаем объект камеры и отдаляем ее назад на 300 поинтов
1. var camera =newTHREE.PerspectiveCamera(fov, aspect, near, far );
2. camera.position.z=300;
Теперь создаем сцену, меш (трехмерный объект, в который добавляется другая геометрия), создаем простой куб с вершинами в 50 поинтов, и задаем черный цвет. После чего добавляем созданный нами меш в сцену, и рендерим сцену через камеру.
1. var scene =newTHREE.Scene();
2. var cube =newTHREE.Mesh(
3. newTHREE.CubeGeometry(50,50,50),
4. newTHREE.MeshBasicMaterial({color:0x000000, opacity:1})
5. );
6. scene.add(cube);
7. renderer.render(scene,camera);
Если сейчас посмотреть - можно увидеть просто черный квадрат. Создадим для него анимацию.
1. functionanimate(t){
2. // задаем круговое движение камеры
3. camera.position.set(
4. Math.sin(t/1000)*300,150,Math.cos(t/1000)*300);
5. // очищаем рендер и обновляем lookAt каждый фрейм
6. renderer.clear();
7. camera.lookAt(scene.position);
8. renderer.render(scene,camera);
9. window.requestAnimationFrame(animate,renderer.domElement);
10. animate(newDate().getTime());
Здесь мы создаем функцию вращения камеры по окружности вокруг куба. Очищаем каждый фрейм рендер окна, и добавляем функцию в цикличное выполнение через requestAnimationFrame, которая является аналогом функции setInterval(), но в отличии от нее первая дает браузеру знать, когда нужно прорисовать следующий фрейм, и выполняется только тогда, когда нужный элемент видимый на экране.
Добавив источник света.
1. var light =newTHREE.SpotLight();
2. light.position.set(170,330,-160);
3. scene.add(light);
И поверх уже созданного нами куба, добавим еще один.
1. varlitCube=newTHREE.Mesh(
2. newTHREE.CubeGeometry(50,50,50),
3. newTHREE.MeshLambertMaterial({color:0xffffff}));
4. litCube.position.y=50;
5. scene.add(litCube);
Модель вихря в программе
В программе элементы вихря будут двигаться по простым законам sinи cos (спиралевидное движение)тем самым будет видна кинематическая модель вихря. пользовательский скрипт браузер javascript
Для большой наглядности в качестве вихря будут выступать кубики с совокупности, количество которых можно увеличить по нажатию клавиши.
Модель вихря на JavaScript
Файл №1 “index.html” (его мы и будем запускать)
<!DOCTYPE html>
<html>
<head>
<title>Three.js - dice</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<!--подключаемыебиблиотеки -->
<script type="text/javascript" src="Three.js"></script>
<script type="text/javascript" src="RequestAnimationFrame.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<!-- app -->
<script type="text/javascript" src="demoapp.js"></script>
</head>
<body>
//Создание музыки на заднем фоне
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
<script type="text/javascript">
$$r(function() {
$$i({
create:'script',
attribute: {
'type':'text/javascript',
'src':'sound.js'
},
insert:$$().body,
onready:function() {//выполняю только после загрузки скрипта
//создаюэкземпляробьекта
var s=new sound();
s.start({
'music':'http://goldenland.onfind.net/2/1/5.mp3',
'player':'http://nagon.net/flash/player_mod0.swf'
});
}
});
});
</script>
<script Language="JavaScript" type="text/javascript">
</script>
//Созданиекнопки
<input type="button" value="Add 5" onClick="freshStart(5)">
//Созданиеползунков
<br>
Axis X: -1500<input type="range" name= "Axis X" min="-1500" max="1500" oninput="wallMakerX(this.value)" >1500
<br>
Axis Y: -1500<input type="range" name= "Axis Y" min="-1500" max="1500" oninput="wallMakerY(this.value)" >1500
<br>
Axis Z: -1500<input type="range" name= "Axis Z" min="-1500" max="1500" oninput="wallMakerZ(this.value)" >1500
<br>
<div></div>
</body>
</html>
Файл №2 “jquery.js” (это библиотека; подключаем сами)
jQuery -- библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.
https://developers.google.com/speed/libraries/devguide?hl=ru#jquery
Файл №3 “Three.js” (это библиотека; подключаем сами)
Three -- библиотека JavaScript, фокусирующаяся на работе с WebGL. Например, обеспечивает работу с камерой для просмотра 3d объектов.
http://threejs.org
Файл №4 “RequestAnimationFrame.js ”:
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
returnwindow.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}
Файл №5 “demoapp.js” (этотелонашейпрограммы):
//Заданиепеременных
var container, camera, scene, renderer, floormesh,cubeNew,cubeMeshNew,cubeMesh,cubeMesh1,wallNew,wallMeshNew,i,wall,wallMesh, phi = 0;
varm = 10; //Начальное количество кубиков
varold_m = 0;
varaddX=0;
varaddY=0;
varaddZ=0;
vard; // Количество добавленных кубиков
varcubes = newArray(m);
varwayOut = new Array (m);
var walls = new Array(10);
varcubesMesh = new Array (m);
varwallsMesh = new Array(10);
varstartPosition = new Array (m);
varwallsPosition = new Array(10);
varxPosition = new Array(m);
varzPosition = new Array(m);
varrandi,randiNew; //Рандомное число
//Задание цветов сторон кубика
var materials = [
newTHREE.MeshBasicMaterial( { color: 0xE01B4C }), // праваясторона
newTHREE.MeshBasicMaterial( { color: 0x34609E }), // леваясторона
newTHREE.MeshBasicMaterial( { color: 0x7CAD18 }), //верх
newTHREE.MeshBasicMaterial( { color: 0x00EDB2 }), // низ
newTHREE.MeshBasicMaterial( { color: 0xED7700 }), // лицеваясторона
newTHREE.MeshBasicMaterial( { color: 0xB5B1AE }) // задняясторона
];
//Функция перемещения стены при помощи слайдера по X
functionwallMakerX(r)
{
wallMesh.position.x = 300 + Number(r);
render(m);
}
//Функция перемещения стены при помощи слайдера по Y
functionwallMakerY(r)
{
wallMesh.position.y = 400 + Number(r);
render(m);
}
//Функция перемещения стены при помощи слайдера по Z
functionwallMakerZ(r)
{
wallMesh.position.z = 450 + Number(r);
render(m);
}
//Функция добавления новых кубиков в смерч
functionfreshStart(d)
{
old_m = m;
m += d;
init(m);
render(m);
}
//Функция создания кубиков и задания их начального положения
functioninit(m)
{
container = $( 'div' ).attr('id','cardfield');
$('body').append( container );
for ( i = 0 + old_m; i< m; i++)
{
cubeNew = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materials );
cubes[i] = cubeNew;
cubeMeshNew = new THREE.Mesh( cubes[i], new THREE.MeshFaceMaterial() );
cubesMesh[i] = cubeMeshNew;
randiNew = (Math.random()*50 + 1)
cubesMesh[i].position.x = Math.sin(randiNew * 10) ;
cubesMesh[i].position.y = randiNew ;
cubesMesh[i].position.z = Math.cos(randiNew * 10) ;
scene.addChild(cubesMesh[i] );
randi = Math.floor((Math.random()*200)+10);
startPosition[i] = randi * 50;
xPosition[i] = startPosition[i];
zPosition[i] = startPosition[i];
wayOut[i] = 1;
newTHREE.ShadowVolume( cubesMesh[i] );
}
}
//Функция необходимая для анимации кубиков
functionanimate()
{
requestAnimationFrame(animate);
render(m);
}
//Функция изменения положения кубиков в пространстве
function render(m)
{
for (i = 0; i< m; i++)
{
//Вращенекубиковсмерча
cubesMesh[i].rotation.x += (i / 20 + 0.5) * Math.PI / 90;
cubesMesh[i].rotation.y += (i / 20 + 1.0) * Math.PI / 90;
cubesMesh[i].rotation.z += (i / 20 + 1.5) * Math.PI / 90;
//Условиевстречисостеной
if ((cubesMesh[i].position.x< (wallMesh.position.x + 100))&&(cubesMesh[i].position.x> (wallMesh.position.x - 100))&&(cubesMesh[i].position.y> (wallMesh.position.y - 600))&&(cubesMesh[i].position.y< (wallMesh.position.y + 600))&&(cubesMesh[i].position.z< (wallMesh.position.z + 300))&&(cubesMesh[i].position.z> (wallMesh.position.z - 300)))
{wayOut[i] = wayOut[i] * (-1)}
//Изменяет направление при встречи со стеной
xPosition[i] += phi * wayOut[i] ;
zPosition[i] += phi * wayOut[i] ;
//Изменениекоординаткубиков
cubesMesh[i].position.x = Math.sin( xPosition[i] ) * i * 25;
cubesMesh[i].position.y = phi + i * 50;
cubesMesh[i].position.z = Math.cos( zPosition[i] ) * i * 25;
}
phi = 0.1 + (Math.random())/5;
renderer.render(scene, camera);
}
$(document).ready(function() {
//Создание неподвижной камеры
camera = new THREE.Camera(45, window.innerWidth/window.innerHeight,1, 10000);
//Задание положения камеры
camera.position.z = 3000;
camera.position.y = 5000;
camera.target.position.y = -1000;
//Созданиесцены
scene = new THREE.Scene();
//Создание "пола"
varfloorgeo = new THREE.CubeGeometry(1500,1500,5);
floormesh = new THREE.Mesh(floorgeo, new THREE.MeshBasicMaterial({color: 0x248C0F, opacity:0.9}));
floormesh.position.y = -200;
floormesh.rotation.x = 90 * Math.PI / 180;
scene.addChild(floormesh);
//Создание стены, изменяющей направление
wall = new THREE.CubeGeometry( 100, 600, 300, 1, 1, 1, materials );
wallMesh = new THREE.Mesh( wall, new THREE.MeshFaceMaterial() );
wallMesh.position.y = 400;
wallMesh.position.x = 300;
wallMsh.position.z = 250;
scene.addChild(wallMesh );
newTHREE.ShadowVolume( wallMesh );
//Заданиеисточникасвета
light = new THREE.DirectionalLight( 0xffffff );
light.castShadow = true;
light.position.set( 0, 1, 0 );
scene.addChild( light );
//Обновлениеанимации
init(m);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight );
container.append(renderer.domElement );
animate();
});
Вывод
Стремительное развитие интернета создаёт благоприятные условия для развития своего дела в виртуальном пространстве. Постоянно расширяющаяся аудитория пользователей всемирной паутины является самым широким рынком на котором можно реализовывать разнообразные товары: как реальные, так и виртуальные
В основе любого бизнеса, который строится в интернет, лежит веб-сайт. Причём на успех проекта влияет очень много факторов. Но первое, что видит посетитель любого сайта -- это его интерфейс.
От внешнего вида и удобства использования зависит, останется ли случайный веб-сёрфер почитать, что такого ценного имеет сайт или просто нажмёт кнопку «Закрыть» в своём браузере. Это уже потом, когда пользователь перейдёт в разряд постоянных читателей, он будет готов прощать ошибки и огрехи в интерфейсе сайта. Но при первой встрече интерфейс будет играть ключевую роль в завязывании тесных отношений с вашим клиентом.
Сделать оригинальную, стильную и качественно работающую одёжку сайта невозможно без использования JavaScript. Как мы уже показали ранее на примере программы, всего лишь несколько строк кода оживят ваш сайт
В результате была получена наглядная модель кинематики вихря, которая в дальнейшем позволит наблюдать за возможностями вихря, которая будет доступна всем пользователям интернет, так как сделана на JavaScript. И это лишь малая часть того что может данный язык.
Тем самым использование JavaScript на страницах веб-сайта откроет новую веху в развитии вашего веб-проекта.
Список литературы
1.Баррет Д. JavaScript. Web-профессионалам. - Киев: БХВ - Киев, 2001.
2.Бранденбау Д. JavaScript: сборник рецептов. - СПб.: Питер, 2000.
3.Вайк А. JavaScript в примерах. - Киев: ДиаСофт, 2000.
4.Вандер Вер Э. JavaScript для "чайников". - Диалектика, 2001.
5. Гарнаев А. Web-программирование на Java и JavaScript. - СПб.: БХВ Санкт-Перебург, 2002.
6. Дарнел Р. JavaScript. Справочник. - СПб.: Питер, 2000.
7. Дмитриева М. Самоучитель JavaScript. - СПб.: БХВ Санкт-Перебург, 2001.
8. Мэрдок К. JavaScript: наглядный курс создания динамических Web-страниц. - Диалектика, 2001.
Размещено на Allbest.ru
...Подобные документы
Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.
лекция [16,2 K], добавлен 05.02.2012Сравнительная характеристика, возможности и функции языков программирования JavaScript и PHP. Основные области их использования. Разработка интерактивного Web-приложения с применением JavaScript на примере теста по теме "Программирование на языке Delphi".
курсовая работа [19,3 K], добавлен 01.07.2014Характеристика Javascript функции с параметрами (аргументами). Возврат значений, глобальные и локальные переменные в функции. Все способы создания пользовательских функций в Javascript. Область видимости переменных. Рекурсивная функция Javascript.
лабораторная работа [75,8 K], добавлен 19.09.2019Примеры динамического построения html-страницы при помощи JavaScript. Использование цикла For, когда заранее известно, сколько раз должны повториться циклические действия. Выполнение циклических операторов входа и выхода, прерывание текущей итерации.
лабораторная работа [52,4 K], добавлен 19.09.2019Javascript як мова програмування, заснована на об'єктах: і мовні засоби, і можливості середовища представляються об'єктами. Структура програм на мові Javascript. Декларація змінних та сфер їх впливу. Типи даних та їх використання. Пріоритети операцій.
курсовая работа [51,4 K], добавлен 12.12.2010Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).
лабораторная работа [31,0 K], добавлен 28.10.2010Області застосування JavaScript. Об'єктна модель документа. Ієрархічна структура моделі та їх взаємозв'язки з іншими об'єктами. Іменування об'єктів і точковий синтаксис. Розміщення сценаріїв у документах. Способи визначення моменту запуску сценарію.
реферат [26,5 K], добавлен 20.08.2011Размещение кода скрипта JavaScript непосредственно на HTML-странице. Сценарий JavaScript и список основных событий. Полезные конструкции на PHP. Некоторые функции для работы с массивами. Фрагмент кода JavaScript из "Эконометрической модели России".
презентация [331,2 K], добавлен 25.09.2013Исследование основных отличий ассоциативных массивов от массивов скаляров. Разработка библиотеки классов. Выбор языка программирования. Сравнение языка C++ с Delphi, Java и JavaScript. Изучение методики тестирования и структуры тестового приложения.
практическая работа [390,2 K], добавлен 06.01.2013Создание образовательного сайта в рамках проектной деятельности учащихся ОП ОО Чапаевского губернского колледжа на уроках истории. Технология создания Web-сайта средствами HTML-кода и JavaScript. Разработка проекта АРМ сотрудников библиотеки колледжа.
дипломная работа [955,4 K], добавлен 31.01.2013Исследование возможностей и областей использования языка программирования JavaScript. Сравнительный анализ языков программирования JavaScript и PHP. Разработка интерактивного Web-приложения на примере теста по теме "Программирование на языке Delphi".
практическая работа [26,0 K], добавлен 04.02.2015Изучение методик языка Javascript по формализации и решению поставленной задачи, технологических приемов разработки программ на языке Javascript, HTML, CSS. Формально определение машины Тьюринга, распознающую язык. Ее программная модель, протоколы работы.
курсовая работа [220,7 K], добавлен 03.03.2015Типизация данных в JavaScript. Правила объявления локальных и глобальных переменных. Объявление и использование функций. Открытие и закрытие файла, запись в него и чтение из него. Создание теста с использованием средств языка программирования PHP скрипт.
контрольная работа [73,8 K], добавлен 25.01.2016Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.
лекция [517,1 K], добавлен 09.03.2009Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.
лабораторная работа [58,6 K], добавлен 25.05.2016Особенности составления программы (сценария) на языке JavaScript. Построение выражений из литералов, переменных, знаков операций, скобок. Элементы, используемые для хранения данных. Приоритет операций, порядок, в котором выполняются операции в выражении.
лабораторная работа [40,2 K], добавлен 19.09.2019Формулировка предметной задачи. Анализ требований к программе. Функциональная модель системы. Выбор языка и программных средств реализации. Описание логической модели базы данных. Концептуальная модель данных информационной системы Интернет-библиотеки.
курсовая работа [4,4 M], добавлен 13.10.2017Изучение создания скриптов на JavaScript. Разработка программы выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки. Применение контейнера SCRIPT для размещение JavaScript-кода. Получение типа программы просмотра HTML-страниц.
контрольная работа [21,1 K], добавлен 15.02.2010Структура информационных потоков и концептуальная модель учебника. Создание Web-страницы с помощью языка HTML: текст, фреймы, JavaScript, дизайн. Руководство по инсталляции, требования к программному и техническому обеспечению. Мероприятия по охране труда
дипломная работа [2,1 M], добавлен 20.08.2009Особенности создания сайта "Ремонт и эксплуатация автомобилей ВАЗ" содержащего необходимую информацию поэтапной разборки запчастей, а также устранение неисправностей, написанного с использованием языка гипертекстовой разметки HTML и языка JavaScript.
дипломная работа [10,5 M], добавлен 04.06.2019
