JavaScript-mechanics — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
м (Замена текста — «</syntaxhighligh>» на «</syntaxhighlight>»)
 
(не показано 18 промежуточных версий 2 участников)
Строка 1: Строка 1:
См. также [[JavaScript-mechanics-box2D]]
+
[[ТМ|Кафедра ТМ]] > [[Программирование]] > [[Программирование и моделирование в Интернет|Интернет]] > [[JavaScript-программирование|JavaScript]] > '''Механика''' <HR>
<addscript src=ocanvas-251/>
 
<addscript src=Vector2D/>
 
<addscript src=mechanics/>
 
<htmlet nocache="yes">mechanics_TM</htmlet>
 
  
 +
Если у вас отображается старая версия программы - нажмите "'''Ctrl + F5'''"
  
Текст программы на языке JavaScript (разработчик [[Цветков Денис]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
 
Файл '''"mechanics.js"'''
 
<source lang="javascript" first-line="1">
 
function MainMech(canvas) {
 
    var context = canvas.getContext("2d");
 
  
    var w = canvas.width;
+
Левая клавиша мыши по шарику - перетаскивание.
    var h = canvas.height;
 
  
    var r = w  / 50;
+
Левая клавиша мыши по полю - заморозить шарик.
  
    var ocanvas = oCanvas.create({
 
        canvas: "#canvasMech",
 
        fps: 60
 
    });
 
  
    var arc = ocanvas.display.arc({
 
        x: 4*r,
 
        y: h,
 
        radius: r,
 
        start: 0,
 
        end: 360,
 
        fill: "rgba(0, 0, 255, 1)"
 
    }).add();
 
  
    var m0 = new Vector2D(0, 0);
+
<htmlet nocache="yes">mechanics_TM</htmlet>
    var m = new Vector2D(0, 0);
 
    arc.dragAndDrop({
 
        changeZindex: true,
 
        start: function ()  {
 
            this.fill = "rgba(0, 0, 255, 0.5)";
 
            count = false;
 
            m0.set(0, 0);
 
            m.set(0, 0);
 
        },
 
        move: function ()  {
 
            m0.set(m);
 
            m.set(ocanvas.mouse.x, ocanvas.mouse.y);
 
        },
 
        end: function ()    {
 
            this.fill = "rgba(0, 0, 255, 1)";
 
            count = true;
 
            v.x = (m.x-m0.x)*100; v.y = (m.y-m0.y)*100;
 
        }
 
    });
 
  
    ocanvas.setLoop(physics).start();
+
Текст программы на языке JavaScript (разработчики [[Кривцов Антон]], [[Цветков Денис]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
 +
Файл '''"mechanics.js"'''
 +
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 +
function MainMech(canvas) {
  
     // границы:
+
     // Предварительные установки   
    const xb0 = 0;
 
    const xb1 = w;
 
    const yb0 = 0;
 
    const yb1 = h;
 
  
     const g = 9.8*2000;      // 9.8 px, а не метров
+
     var context = canvas.getContext("2d");
    const dt = 1/60;
 
    const elastKoeff = 0.9;  // коэффициент упругости
 
    var count = true;
 
 
 
    var a = new Vector2D(0, 0);
 
    var v = new Vector2D(0, 0);
 
  
 +
    const Pi = 3.1415926;          // число "пи"   
  
     function physics(){ // то, что происходит каждый шаг времени
+
     const m0 = 1;                   // масштаб массы
        const arcD = arc.y + r;
+
    const T0 = 1;                   // масштаб времени (период колебаний исходной системы)
        const arcU = arc.y - r;
+
    const a0 = 1;                   // масштаб расстояния (диаметр шара)
        const arcL = arc.x - r;
 
        const arcR = arc.x + r;
 
  
        var dr = new Vector2D(0, 0);
+
    const g0 = 2 * a0 / T0 / T0;    // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
  
        a.set(0, g);
+
    const k0 = 2 * Pi / T0;           // масштаб частоты
        v = v.add(a.multiple(dt));
+
    const C0 = m0 * k0 * k0;         // масштаб жесткости
        dr.set(v.multiple(dt));
+
    const B0 = 2 * m0 * k0;       // масштаб вязкости
  
 +
    // *** Задание физических параметров ***
  
        // проверка граничных условий
+
    const Ny = 5; // Число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
        if (arcD + dr.y > h) {
+
    const m = 1 * m0;                 // масса
            v.y = -Math.abs(v.y)*elastKoeff;
+
    const C = 4 * C0;                 // жесткость
            if (count) arc.y = h - r;
+
    const B = 0.003 * B0;             // вязкость среды
            dr.y = -Math.abs(h - arcD);
+
    const B1 = 0.03 * B0;             // вязкость на стенках
        }
+
    const mg = 1 * m * g0;         // сила тяжести
        if (arcU + dr.y < 0) {
+
   
            v.y = Math.abs(v.y)*elastKoeff;
+
    // *** Задание вычислительных параметров ***
            if (count) arc.y = r;
 
            dr.y = Math.abs(arcU);
 
        }
 
        if (arcR + dr.x > w) {
 
            v.x = -Math.abs(v.x)*elastKoeff;
 
            if (count) arc.x = w - r;
 
            dr.x = -Math.abs(w - arcR);
 
        }
 
        if (arcL + dr.x < 0) {
 
            v.x = Math.abs(v.x)*elastKoeff;
 
            if (count) arc.x = r;
 
            dr.x = Math.abs(arcL);
 
        }
 
  
        if (count) {arc.x += dr.x;     arc.y += dr.y;}
+
     const fps = 4 * 29;             // frames per second - число кадров в секунду (качечтво отображения)
    }
+
     const spf = 1000;              // steps per frame  - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
}
+
     const dt  = 0.01 * T0 / fps;     // шаг интегрирования (качество расчета)
</source>
 
Файл '''"mechanics.html"'''
 
<source lang="html" first-line="1">
 
<!DOCTYPE html>
 
<html>
 
<head>
 
     <title>Simple Mechanics</title>
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script>
 
    <script src="Vector2D.js"></script>
 
     <script src="mechanics.js"></script>
 
</head>
 
<body>
 
    <canvas id="canvasMech" width="800" height="600" style="border:1px solid #000000;"></canvas>
 
    <script type="text/javascript">MainMech(document.getElementById('canvasMech'));</script>
 
</body>
 
</html>
 
</source>
 
</toggledisplay>
 
  
 +
    // Выполнение программы
  
Старая версия (без векторов): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
+
    var scale = canvas.height / Ny / a0;// масштабный коэффициент для перехода от расчетных к экранным координатам
Файл '''"mechanics.js"'''
+
    var w = canvas.width / scale; // ширина окна в расчетных координатах
<source lang="javascript" first-line="1">
+
     var h = canvas.height / scale; // высота окна в расчетных координатах
function MainMech(canvas) {
+
    var r = a0 / 2;               // радиус шара
     var context = canvas.getContext("2d");
 
  
     var w = canvas.width;
+
     var x = 4 * r; var y = h - r; // начальное положение шара
    var h = canvas.height;
 
  
     var r = / 50;
+
     var count = true;                // проводить ли расчет системы
  
 +
    // создаем объект, связанный с элементом canvas на html странице
 
     var ocanvas = oCanvas.create({
 
     var ocanvas = oCanvas.create({
         canvas: "#canvasMech",
+
         canvas: "#canvasMech",       // canvasMech - id объекта canvas на html странице
         fps: 60
+
         fps: fps                        // сколько кадров в секунду
 
     });
 
     });
  
 +
    // создаем шар
 
     var arc = ocanvas.display.arc({
 
     var arc = ocanvas.display.arc({
         x: 4*r,
+
         x: x * scale,
         y: h,
+
         y: y * scale,
         radius: r,
+
         radius: r * scale,
        start: 0,
+
         end: 360,                     // круг 360 градусов
         end: 360,
+
         fill: "rgba(0, 0, 255, 1)"   // цвет
         fill: "rgba(0, 0, 255, 1)"
 
 
     }).add();
 
     }).add();
  
     var m0x = 0; var m0y = 0;
+
     // захват шара мышью
     var mx = 0;  var my = 0;
+
     var mx, my;       // актуальная позиция мыши
 
     arc.dragAndDrop({
 
     arc.dragAndDrop({
         changeZindex: true,
+
         changeZindex: true,           // если много шариков - захваченный будет нарисован спереди
 
         start: function ()  {
 
         start: function ()  {
             this.fill = "rgba(0, 0, 255, 0.5)";
+
            count = false;            // на время захвата - отключить расчет
            count = false;
+
             this.fill = "rgba(0, 0, 255, 0.5)";     // пока держим шарик - он полупрозрачен
            m0x = 0; m0y = 0;
+
        mx = ocanvas.mouse.x;   my = ocanvas.mouse.y;
            mx = 0; my = 0;
 
 
         },
 
         },
 
         move: function ()  {
 
         move: function ()  {
            m0x = mx; m0y = my;
+
x = arc.x / scale;    y = arc.y / scale;
            mx = ocanvas.mouse.x;
+
        vx = .001*(ocanvas.mouse.x-mx)/dt/fps;   vy = .001*(ocanvas.mouse.y-my)/dt/fps;
            my = ocanvas.mouse.y;
+
        mx = ocanvas.mouse.x;                   my = ocanvas.mouse.y;
 
         },
 
         },
 
         end: function ()    {
 
         end: function ()    {
            this.fill = "rgba(0, 0, 255, 1)";
 
 
             count = true;
 
             count = true;
             vx = (mx-m0x)*100; vy = (my-m0y)*100;
+
             this.fill = "rgba(0, 0, 255, 1)";       // отпускаем шарик - полупрозрачность убирается
        }
+
      }
 
     });
 
     });
 +
   
 +
    ocanvas.bind("mousedown", function () {count = false;});    // заморозить фигуру при клике на поле
  
     ocanvas.setLoop(physics).start();
+
     var fx = 0;           var fy = mg;             // сила, действующая на шар
 
+
     var vx = 0;           var vy = 0;             // скорость
    // границы:
 
    const xb0 = 0;
 
    const xb1 = w;
 
    const yb0 = 0;
 
    const yb1 = h;
 
 
 
    const g = 9.8*2000;      // 9.8 px, а не метров
 
    const dt = 1/60;
 
    const elastKoeff = 0.9;  // коэффициент упругости
 
     var count = true;
 
    var ax = 0;
 
    var ay = 0;
 
    var vx = 2;
 
    var vy = 0;
 
 
 
 
 
    function physics(){ // то, что происходит каждый шаг времени
 
        const arcD = arc.y + r;
 
        const arcU = arc.y - r;
 
        const arcL = arc.x - r;
 
        const arcR = arc.x + r;
 
 
 
        var dx = 0;
 
        var dy = 0;
 
  
        ax = 0;            ay = g;
+
    function physics(){                            // то, что происходит каждый шаг времени
        vx += ax*dt;        vy += ay*dt;
 
        dx = vx*dt;        dy = vy*dt;
 
  
        // проверка граничных условий
+
if (!count) return;
        if (arcD + dy > h) {
+
    for (var s=1; s<=spf; s++) {
            vy = -Math.abs(vy)*elastKoeff;
 
            if (count) arc.y = h - r;
 
            dy = -Math.abs(h - arcD);
 
        }
 
        if (arcU + dy < 0) {
 
            vy = Math.abs(vy)*elastKoeff;
 
            if (count) arc.y = r;
 
            dy = Math.abs(arcU);
 
        }
 
        if (arcR + dx > w) {
 
            vx = -Math.abs(vx)*elastKoeff;
 
            if (count) arc.x = w - r;
 
            dx = -Math.abs(w - arcR);
 
        }
 
        if (arcL + dx < 0) {
 
            vx = Math.abs(vx)*elastKoeff;
 
            if (count) arc.x = r;
 
            dx = Math.abs(arcL);
 
        }
 
  
        if (count) {arc.x += dx;     arc.y += dy;}
+
        fx = - B * vx; fy = mg - B * vy;
 +
        if (y + r > h) { fy += -C * (y + r - h) - B1 * vy; }
 +
        if (y - r < 0) { fy += -C * (y - r) - B1 * vy;}
 +
        if (x + r > w) { fx += -C * (x + r - w) - B1 * vx; }
 +
        if (x - r < 0) { fx += -C * (x - r) - B1 * vx; }
 +
 +
        vx += fx / m * dt;  vy += fy / m * dt;
 +
        x  += vx * dt;    y  += vy * dt;
 +
 +
arc.x = x * scale;   arc.y = y * scale;
 +
    }
 
     }
 
     }
 +
   
 +
    ocanvas.setLoop(physics).start();  // функция, выполняющаяся на каждом шаге
 
}
 
}
</source>
+
</syntaxhighlight>
 
</toggledisplay>
 
</toggledisplay>
  
 
== См. также ==
 
== См. также ==
*[[JavaScript-mechanics]]
+
*[[JavaScript-пружина]]
 +
*[[JavaScript-mechanics-box2D]]
 
*[[JavaScript-приложения]]
 
*[[JavaScript-приложения]]
  
 +
[[Category: Виртуальная лаборатория]]
 
[[Category: Программирование]]
 
[[Category: Программирование]]
 
[[Category: JavaScript]]
 
[[Category: JavaScript]]

Текущая версия на 13:55, 9 марта 2015

Кафедра ТМ > Программирование > Интернет > JavaScript > Механика

Если у вас отображается старая версия программы - нажмите "Ctrl + F5"


Левая клавиша мыши по шарику - перетаскивание.

Левая клавиша мыши по полю - заморозить шарик.


Не удается найти HTML-файл mechanics_TM.html

Текст программы на языке JavaScript (разработчики Кривцов Антон, Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "mechanics.js"

  1 function MainMech(canvas) {
  2 
  3     // Предварительные установки    
  4 
  5     var context = canvas.getContext("2d");
  6 
  7     const Pi = 3.1415926;           // число "пи"    
  8 
  9     const m0 = 1;                   // масштаб массы
 10     const T0 = 1;                   // масштаб времени (период колебаний исходной системы)
 11     const a0 = 1;                   // масштаб расстояния (диаметр шара)
 12 
 13     const g0 = 2 * a0 / T0 / T0;    // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
 14 
 15     const k0 = 2 * Pi / T0;           	// масштаб частоты
 16     const C0 = m0 * k0 * k0;          	// масштаб жесткости
 17     const B0 = 2 * m0 * k0;  	      	// масштаб вязкости
 18 
 19     // *** Задание физических параметров ***
 20 
 21     const Ny = 5;						// Число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 22     const m = 1 * m0;                 	// масса
 23     const C = 4 * C0;                 	// жесткость 
 24     const B = 0.003 * B0;              	// вязкость среды
 25     const B1 = 0.03 * B0;              	// вязкость на стенках
 26     const mg = 1 * m * g0;          	// сила тяжести
 27     
 28      // *** Задание вычислительных параметров ***
 29 
 30     const fps = 4 * 29;             	// frames per second - число кадров в секунду (качечтво отображения)
 31     const spf = 1000;              		// steps per frame   - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
 32     const dt  = 0.01 * T0 / fps;      	// шаг интегрирования (качество расчета)
 33 
 34     // Выполнение программы
 35 
 36     var scale = canvas.height / Ny / a0;// масштабный коэффициент для перехода от расчетных к экранным координатам
 37     var w = canvas.width / scale;		// ширина окна в расчетных координатах
 38     var h = canvas.height / scale;		// высота окна в расчетных координатах
 39     var r = a0 / 2;               	// радиус шара
 40 
 41     var x = 4 * r;	var y = h - r;		// начальное положение шара
 42 
 43     var count = true;                 	// проводить ли расчет системы
 44 
 45     // создаем объект, связанный с элементом canvas на html странице
 46     var ocanvas = oCanvas.create({
 47         canvas: "#canvasMech",        	// canvasMech - id объекта canvas на html странице
 48         fps: fps                        // сколько кадров в секунду
 49     });
 50 
 51     // создаем шар
 52     var arc = ocanvas.display.arc({
 53         x: x * scale,
 54         y: y * scale,
 55         radius: r * scale,
 56         end: 360,                     // круг 360 градусов
 57         fill: "rgba(0, 0, 255, 1)"    // цвет
 58     }).add();
 59 
 60     // захват шара мышью
 61     var mx, my;       // актуальная позиция мыши
 62     arc.dragAndDrop({
 63         changeZindex: true,           						// если много шариков - захваченный будет нарисован спереди
 64         start: function ()  {
 65             count = false;            						// на время захвата - отключить расчет
 66             this.fill = "rgba(0, 0, 255, 0.5)";     		// пока держим шарик - он полупрозрачен
 67         	mx = ocanvas.mouse.x;    					my = ocanvas.mouse.y;
 68         },
 69         move: function ()  {
 70 			x = arc.x / scale;    		y = arc.y / scale;
 71         	vx = .001*(ocanvas.mouse.x-mx)/dt/fps;   	vy = .001*(ocanvas.mouse.y-my)/dt/fps;
 72         	mx = ocanvas.mouse.x;                   	my = ocanvas.mouse.y;
 73         },
 74         end: function ()    {
 75             count = true;
 76             this.fill = "rgba(0, 0, 255, 1)";       // отпускаем шарик - полупрозрачность убирается
 77        }
 78     });
 79     
 80     ocanvas.bind("mousedown", function () {count = false;});    // заморозить фигуру при клике на поле
 81 
 82     var fx = 0;            var fy = mg;             // сила, действующая на шар
 83     var vx = 0;            var vy = 0;              // скорость
 84 
 85     function physics(){                             // то, что происходит каждый шаг времени
 86 
 87  		if (!count) return;
 88     	for (var s=1; s<=spf; s++) {
 89 
 90 	        fx = - B * vx; fy = mg - B * vy;
 91 	        if (y + r > h) { fy += -C * (y + r - h) - B1 * vy; }
 92 	        if (y - r < 0) { fy += -C * (y - r) - B1 * vy;}
 93 	        if (x + r > w) { fx += -C * (x + r - w) - B1 * vx; }
 94 	        if (x - r < 0) { fx += -C * (x - r) - B1 * vx; }
 95 	
 96 	        vx += fx / m * dt;  vy += fy / m * dt;
 97 	        x  += vx * dt;    	y  += vy * dt;
 98 			
 99 			arc.x = x * scale;    		arc.y = y * scale;
100 	    }
101     }
102     
103     ocanvas.setLoop(physics).start();   // функция, выполняющаяся на каждом шаге
104 }

</toggledisplay>

См. также[править]