| Текущая версия |
Ваш текст |
| Строка 1: |
Строка 1: |
| | [[Виртуальная лаборатория]] > [[Разрываемая ткань]] <HR> | | [[Виртуальная лаборатория]] > [[Разрываемая ткань]] <HR> |
| − |
| |
| − | Моделирование ткани с использованием [http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%92%D0%B5%D1%80%D0%BB%D0%B5 интегрирования Верле].
| |
| | | | |
| | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/Another_authors/Tearable_Cloth.html |width=600 |height=400 |border=0 }} | | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/Another_authors/Tearable_Cloth.html |width=600 |height=400 |border=0 }} |
| − |
| |
| − | Лицензия данной программы предполагает, что вы можете копировать, изменять, публиковать, распространять, и даже продавать данную программу при соблюдении условия сохранения копирайта и заголовка (см. файл ниже) во всех копиях данной программы (или программ, существенно основанных на ней).
| |
| − |
| |
| − |
| |
| − | Скачать [[Медиа:Tearable_Cloth.zip|Tearable_Cloth.zip]]
| |
| − | <div class="mw-collapsible mw-collapsed" style="width:100%" >
| |
| − | '''Текст программы на языке JavaScript (разработчик [http://codepen.io/suffick/pen/KrAwx Suffick]):''' <div class="mw-collapsible-content">
| |
| − | Файл '''"Tearable_Cloth.js"'''
| |
| − | <syntaxhighlight lang="javascript" line start="1" enclose="div">
| |
| − | /*
| |
| − | Copyright (c) 2013 Suffick at Codepen (http://codepen.io/suffick), GitHub (https://github.com/suffick) and lonely-pixel.com
| |
| − |
| |
| − | Permission is hereby granted, free of charge, to any person obtaining a copy
| |
| − | of this software and associated documentation files (the "Software"), to deal
| |
| − | in the Software without restriction, including without limitation the rights
| |
| − | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
| |
| − | copies of the Software, and to permit persons to whom the Software is
| |
| − | furnished to do so, subject to the following conditions:
| |
| − |
| |
| − | The above copyright notice and this permission notice shall be included in
| |
| − | all copies or substantial portions of the Software.
| |
| − |
| |
| − | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
| |
| − | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
| |
| − | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
| |
| − | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
| |
| − | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
| |
| − | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
| |
| − | THE SOFTWARE.
| |
| − | */
| |
| − |
| |
| − | // Настройки
| |
| − |
| |
| − | var physics_accuracy = 3, // точность расчетов
| |
| − | mouse_influence = 20, // радиус захвата ткани курсором
| |
| − | mouse_cut = 5, // радиус обрезания ткани курсором (по правой кнопке мыши)
| |
| − | gravity = 1200, // гравитация
| |
| − | cloth_height = 30, // ширина ткани
| |
| − | cloth_width = 50, // высота ткани
| |
| − | start_y = 20, // высота закрепления ткани
| |
| − | spacing = 7, // расстояние между узлами ткани
| |
| − | tear_distance = 60; // прочность ткани
| |
| − |
| |
| − |
| |
| − | window.requestAnimFrame =
| |
| − | window.requestAnimationFrame ||
| |
| − | window.webkitRequestAnimationFrame ||
| |
| − | window.mozRequestAnimationFrame ||
| |
| − | window.oRequestAnimationFrame ||
| |
| − | window.msRequestAnimationFrame ||
| |
| − | function (callback) {
| |
| − | window.setTimeout(callback, 1000 / 60);
| |
| − | };
| |
| − |
| |
| − | var canvas,
| |
| − | ctx,
| |
| − | cloth,
| |
| − | boundsx,
| |
| − | boundsy,
| |
| − | mouse = {
| |
| − | down: false,
| |
| − | button: 1,
| |
| − | x: 0,
| |
| − | y: 0,
| |
| − | px: 0,
| |
| − | py: 0
| |
| − | };
| |
| − |
| |
| − | var Point = function (x, y) {
| |
| − |
| |
| − | this.x = x;
| |
| − | this.y = y;
| |
| − | this.px = x;
| |
| − | this.py = y;
| |
| − | this.vx = 0;
| |
| − | this.vy = 0;
| |
| − | this.pin_x = null;
| |
| − | this.pin_y = null;
| |
| − |
| |
| − | this.constraints = [];
| |
| − | };
| |
| − |
| |
| − | Point.prototype.update = function (delta) {
| |
| − |
| |
| − | if (mouse.down) {
| |
| − |
| |
| − | var diff_x = this.x - mouse.x,
| |
| − | diff_y = this.y - mouse.y,
| |
| − | dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
| |
| − |
| |
| − | if (mouse.button == 1) {
| |
| − |
| |
| − | if (dist < mouse_influence) {
| |
| − | this.px = this.x - (mouse.x - mouse.px) * 1.8;
| |
| − | this.py = this.y - (mouse.y - mouse.py) * 1.8;
| |
| − | }
| |
| − |
| |
| − | } else if (dist < mouse_cut) this.constraints = [];
| |
| − | }
| |
| − |
| |
| − | this.add_force(0, gravity);
| |
| − |
| |
| − | delta *= delta;
| |
| − | nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
| |
| − | ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
| |
| − |
| |
| − | this.px = this.x;
| |
| − | this.py = this.y;
| |
| − |
| |
| − | this.x = nx;
| |
| − | this.y = ny;
| |
| − |
| |
| − | this.vy = this.vx = 0
| |
| − | };
| |
| − |
| |
| − | Point.prototype.draw = function () {
| |
| − |
| |
| − | if (!this.constraints.length) return;
| |
| − |
| |
| − | var i = this.constraints.length;
| |
| − | while (i--) this.constraints[i].draw();
| |
| − | };
| |
| − |
| |
| − | Point.prototype.resolve_constraints = function () {
| |
| − |
| |
| − | if (this.pin_x != null && this.pin_y != null) {
| |
| − |
| |
| − | this.x = this.pin_x;
| |
| − | this.y = this.pin_y;
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | var i = this.constraints.length;
| |
| − | while (i--) this.constraints[i].resolve();
| |
| − |
| |
| − | this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
| |
| − | this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
| |
| − | };
| |
| − |
| |
| − | Point.prototype.attach = function (point) {
| |
| − |
| |
| − | this.constraints.push(
| |
| − | new Constraint(this, point)
| |
| − | );
| |
| − | };
| |
| − |
| |
| − | Point.prototype.remove_constraint = function (constraint) {
| |
| − |
| |
| − | this.constraints.splice(this.constraints.indexOf(constraint), 1);
| |
| − | };
| |
| − |
| |
| − | Point.prototype.add_force = function (x, y) {
| |
| − |
| |
| − | this.vx += x;
| |
| − | this.vy += y;
| |
| − | };
| |
| − |
| |
| − | Point.prototype.pin = function (pinx, piny) {
| |
| − | this.pin_x = pinx;
| |
| − | this.pin_y = piny;
| |
| − | };
| |
| − |
| |
| − | var Constraint = function (p1, p2) {
| |
| − |
| |
| − | this.p1 = p1;
| |
| − | this.p2 = p2;
| |
| − | this.length = spacing;
| |
| − | };
| |
| − |
| |
| − | Constraint.prototype.resolve = function () {
| |
| − |
| |
| − | var diff_x = this.p1.x - this.p2.x,
| |
| − | diff_y = this.p1.y - this.p2.y,
| |
| − | dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
| |
| − | diff = (this.length - dist) / dist;
| |
| − |
| |
| − | if (dist > tear_distance) this.p1.remove_constraint(this);
| |
| − |
| |
| − | var px = diff_x * diff * 0.5;
| |
| − | var py = diff_y * diff * 0.5;
| |
| − |
| |
| − | this.p1.x += px;
| |
| − | this.p1.y += py;
| |
| − | this.p2.x -= px;
| |
| − | this.p2.y -= py;
| |
| − | };
| |
| − |
| |
| − | Constraint.prototype.draw = function () {
| |
| − |
| |
| − | ctx.moveTo(this.p1.x, this.p1.y);
| |
| − | ctx.lineTo(this.p2.x, this.p2.y);
| |
| − | };
| |
| − |
| |
| − | var Cloth = function () {
| |
| − |
| |
| − | this.points = [];
| |
| − |
| |
| − | var start_x = canvas.width / 2 - cloth_width * spacing / 2;
| |
| − |
| |
| − | for (var y = 0; y <= cloth_height; y++) {
| |
| − |
| |
| − | for (var x = 0; x <= cloth_width; x++) {
| |
| − |
| |
| − | var p = new Point(start_x + x * spacing, start_y + y * spacing);
| |
| − |
| |
| − | x != 0 && p.attach(this.points[this.points.length - 1]);
| |
| − | y == 0 && p.pin(p.x, p.y);
| |
| − | y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])
| |
| − |
| |
| − | this.points.push(p);
| |
| − | }
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | Cloth.prototype.update = function () {
| |
| − |
| |
| − | var i = physics_accuracy;
| |
| − |
| |
| − | while (i--) {
| |
| − | var p = this.points.length;
| |
| − | while (p--) this.points[p].resolve_constraints();
| |
| − | }
| |
| − |
| |
| − | i = this.points.length;
| |
| − | while (i--) this.points[i].update(.016);
| |
| − | };
| |
| − |
| |
| − | Cloth.prototype.draw = function () {
| |
| − |
| |
| − | ctx.beginPath();
| |
| − |
| |
| − | var i = cloth.points.length;
| |
| − | while (i--) cloth.points[i].draw();
| |
| − |
| |
| − | ctx.stroke();
| |
| − | };
| |
| − |
| |
| − | function update() {
| |
| − |
| |
| − | ctx.clearRect(0, 0, canvas.width, canvas.height);
| |
| − |
| |
| − | cloth.update();
| |
| − | cloth.draw();
| |
| − |
| |
| − | requestAnimFrame(update); // эта функция через некоторое время снова вызовет update(), так реализуется анимация
| |
| − | }
| |
| − |
| |
| − | // Инициализация и запуск программы
| |
| − | function start() {
| |
| − |
| |
| − | // функция выполняется при нажатии кнопки мыши
| |
| − | canvas.onmousedown = function (e) {
| |
| − | mouse.button = e.which;
| |
| − | mouse.px = mouse.x;
| |
| − | mouse.py = mouse.y;
| |
| − | var rect = canvas.getBoundingClientRect();
| |
| − | mouse.x = e.clientX - rect.left,
| |
| − | mouse.y = e.clientY - rect.top,
| |
| − | mouse.down = true;
| |
| − | e.preventDefault();
| |
| − | };
| |
| − |
| |
| − | // функция выполняется при отпускании клавиши мыши
| |
| − | window.onmouseup = function (e) { // на элементе window, чтобы не происходило залипания клавиши мыши
| |
| − | mouse.down = false;
| |
| − | e.preventDefault();
| |
| − | };
| |
| − |
| |
| − | // функция выполняется при движении мыши
| |
| − | canvas.onmousemove = function (e) {
| |
| − | mouse.px = mouse.x;
| |
| − | mouse.py = mouse.y;
| |
| − | var rect = canvas.getBoundingClientRect();
| |
| − | mouse.x = e.clientX - rect.left,
| |
| − | mouse.y = e.clientY - rect.top,
| |
| − | e.preventDefault();
| |
| − | };
| |
| − |
| |
| − | // функция предотвращает появление контекстного меню
| |
| − | canvas.oncontextmenu = function (e) {
| |
| − | e.preventDefault();
| |
| − | };
| |
| − |
| |
| − | boundsx = canvas.width - 1;
| |
| − | boundsy = canvas.height - 1;
| |
| − |
| |
| − | ctx.strokeStyle = '#888'; // цвет ткани
| |
| − |
| |
| − | cloth = new Cloth();
| |
| − |
| |
| − | update(); // начало расчетов/рисования
| |
| − | }
| |
| − |
| |
| − | window.onload = function () { // эта функция выполняется при загрузке страницы
| |
| − |
| |
| − | canvas = document.getElementById('c');
| |
| − | ctx = canvas.getContext('2d');
| |
| − |
| |
| − | canvas.width = 560;
| |
| − | canvas.height = 350;
| |
| − |
| |
| − | start();
| |
| − | };
| |
| − | </syntaxhighlight>
| |
| − | Файл '''"Tearable_Cloth.html"'''
| |
| − | <syntaxhighlight lang="html5" line start="1" enclose="div">
| |
| − | <canvas id="c"></canvas>
| |
| − | <script src="Tearable_Cloth.js"></script>
| |
| − | </syntaxhighlight>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| | | | |
| | [[Category: Виртуальная лаборатория]] | | [[Category: Виртуальная лаборатория]] |
