Нужна помощь в понимании математической формулы для эллипса в JavaScript - PullRequest
Новая
       8

Нужна помощь в понимании математической формулы для эллипса в JavaScript

0 голосов
/ 25 апреля 2018

Нужна помощь в понимании этого кода, который используется для того, чтобы изображение двигалось в форме эллипса.Что я не понимаю, так это формула для переменных e, px и py.Какова переменная e, определенная сложным образом?Я знаю, что он использует некоторые математические формулы, но я не знаю, какие из них. 

         var b = 125;
         var h = 115;
         var rx = 7;
         var ry = 4;  
         var e = 0; 

    function update() {
        setInterval(function() {
            e = (e + Math.PI / 360) % (Math.PI * 2);
            rotate(e);
        }, 10);

        var lyd = new Audio("Vedlegg/skoytelyd.mp3");
        lyd.play();
    }

    function rotate(e) {
        var px = b + rx * Math.cos(e)*b/2; 
        var py = h + ry * Math.sin(e)*h/2;

        document.getElementById("punkt").style.left = px + "px";
        document.getElementById("punkt").style.top = py + "px"; 
    }
    </script>
    <style>
        div {
            position: fixed;
        }
        #sentrum {
            background: black;
            left: 100px;
            top: 50px;
        }

        #skoyteloper {
            position: absolute;
            top: 190px;
            left: 450px;
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div id="sentrum"></div>
        <img src="Vedlegg/bane.jpg" id="imgBane"></img>
    </div>
    <div id="punkt">
        <img src="Vedlegg/skoyteloper.png" id="skoyteloper"></img>
    </div>
    <a href="animasjon.html">TILBAKE</a>
</body>

1 Ответ

0 голосов
/ 26 апреля 2018

Синус и косинус: Подумайте о треугольнике с одним углом 90 °. 1 линия - горизонтальная, другая - с правой стороны и вертикальная, третья линия идет от нижнего левого до верхнего правого. Угол слева мы называем е (да, это е в вашей функции)

синус е определяется как вертикальная линия справа, разделенная диагональной линией; косинус е = горизонтальная линия (касающаяся угла е) / диагональ.

-

Теперь нарисуйте круг с серединой под углом e и радиусом = длина диагонали. Если вы увеличите угол e, вы увидите, что вертикальная линия становится больше, а горизонтальная линия становится меньше (сохраняйте длину диагонали постоянной), пока не достигнете 90 °. Тогда, конечно, вы можете выйти за пределы 90 °, тогда вертикальная линия может быть слева. Далее на 180 ° вертикальная линия будет указывать вниз (отрицательная координата), ...

Так что это одно из применений sin и cos: если вы установите угол, они дадут вам значение y и значение x, показывая вам 1 точку на окружности. Это всегда число от -1 до +1. пример: sin (0) = 0 (без вертикальной составляющей), cos (0) = 1

Этот код ниже дает вам круг вокруг центра (0,0) и радиуса 100. Передайте этой функции набор значений для e, и вы получите столько же точек на круге 

function rotate(e) {
    var px = 100 * Math.cos(e); 
    var py = 100 * Math.sin(e);
}

Теперь, если вместо 100 * cos (e) вы поставите 200 * cos (e), то это больше не круг. Каждая координата x будет вдвое дальше (по сравнению с кругом). Различные rx и ry приведут к эллипсу.

ваши переменные b & h предназначены для перемещения центра эллипса куда-то внутри изображения / div / canvas / ..., а не в угол (тогда вы обрезаете большую часть эллипса).

Помогает ли это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...