Редактирование: JavaScript-mechanics

<addscript src=ocanvas-251/>
<addscript src=Vector2D/>
<addscript src=mechanics/>
<htmlet nocache="yes">mechanics_TM</htmlet>


Текст программы на языке 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);
    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();

    // границы:
    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 a = new Vector2D(0, 0);
    var v = new Vector2D(0, 0);


    function physics(){			// то, что происходит каждый шаг времени
        const arcD = arc.y + r;
        const arcU = arc.y - r;
        const arcL = arc.x - r;
        const arcR = arc.x + r;

        var dr = new Vector2D(0, 0);

        a.set(0, g);
        v = v.add(a.multiple(dt));
        dr.set(v.multiple(dt));


        // проверка граничных условий
        if (arcD + dr.y > h) {
            v.y = -Math.abs(v.y)*elastKoeff;
            if (count) arc.y = h - r;
            dr.y = -Math.abs(h - arcD);
        }
        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;}
    }
}
</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"> 
Файл '''"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 m0x = 0; var m0y = 0;
    var mx = 0;  var my = 0;
    arc.dragAndDrop({
        changeZindex: true,
        start: function ()  {
            this.fill = "rgba(0, 0, 255, 0.5)";
            count = false;
            m0x = 0; m0y = 0;
            mx = 0;  my = 0;
        },
        move: function ()  {
            m0x = mx; m0y = my;
            mx = ocanvas.mouse.x;
            my = ocanvas.mouse.y;
        },
        end: function ()    {
            this.fill = "rgba(0, 0, 255, 1)";
            count = true;
            vx = (mx-m0x)*100; vy = (my-m0y)*100;
        }
    });

    ocanvas.setLoop(physics).start();

    // границы:
    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;
        vx += ax*dt;        vy += ay*dt;
        dx = vx*dt;         dy = vy*dt;

        // проверка граничных условий
        if (arcD + dy > h) {
            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;}
    }
}
</source>
</toggledisplay>