Нарисуйте координату в окружности круга

Question

Я пытаюсь вычислить новую координату от центра круга. Поэтому я уже искал и получил формулу, подобную этой:

x = r cos(ϴ)
y = r sin(ϴ)

мой код работает, но результаты не те, что я ожидал

function process()
{
    //
    var x = parseInt(document.getElementById('myx').value);
    var y = parseInt(document.getElementById('myy').value);
    var radius = parseInt(document.getElementById('radius').value);

    var mytext =  document.getElementById('result');

    for( var i=0;i<360;i+=45){
        var new_x = x + radius*Math.cos(toDegrees(i));
        var new_y = y + radius*Math.sin(toDegrees(i));

        mytext.innerHTML += " radius = "+radius+" , angle="+i+"<br/>";
        mytext.innerHTML += " old ("+x+", "+y+") ";
        mytext.innerHTML += " | ("+new_x+", "+new_y+") <br/><br/>";
    }
}

function toDegrees (angle) {
    return angle * 180 / Math.PI;
}

function toRadians (angle) {
    return angle * Math.PI / 180;
}

результат: результат

в 90 градусах должно быть: (0, -50)

Не верна ли формула?

Answer 1

Как говорит Вахдет в этом ответе, Math.cos() принимает радианы, а не градусы.

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

let angleContainer = document.getElementById('angle');
let radiusContainer = document.getElementById('radius');

let x = document.getElementById('x');
let y = document.getElementById('y');

angleContainer.addEventListener('input', () => {
    updateDom(
        parseInt(angleContainer.value),
        parseInt(radiusContainer.value),
        x, y)
});

radiusContainer.addEventListener('input', () => {
    updateDom(
        parseInt(angleContainer.value),
        parseInt(radiusContainer.value),
        x, y)
});

function updateDom(angle, radius, x, y) {
    x.innerText = radius * Math.cos(toRadians(angle));
    y.innerText = radius * Math.sin(toRadians(angle));
}

function toRadians(angle) {
    return angle * Math.PI / 180;
}

updateDom(
    parseInt(angleContainer.value),
    parseInt(radiusContainer.value),
    x, y);

#calculator {
    background: #00816A;
    padding: 2em;
}

#calculator > h1 {
    font-size: 1em;
}

#radius-input, #angle-input {
    padding-top: 0.5em;
}

#x-container, #y-container {
    font-size: 1.2em;
    margin: 0.5em 0;
    font-weight: bold;
}

#x, #y {
    font-weight: normal;
}

<div id="calculator">

    <h1>Coordinates calculator</h1>

    <div id="radius-input">
        <label for="radius">Radius:</label>
        <input id="radius" type="number" value="1">
    </div>

    <div id="angle-input">
        <label for="angle">Angle (deg):</label>
        <input type="number" id="angle" value="45">
    </div>

    <div id="outputs">
        <div id="x-container">X: <span id="x"></span></div>
        <div id="y-container">Y: <span id="y"></span></div>
    </div>
</div>

Answer 2

Math.cos() принимает радианы в качестве параметра ( см. MDN ), но вы используете градусы. Используйте toRadians(angle) метод, который у вас уже есть в вашем коде:

var new_x = x + radius*Math.cos(toRadius(i));
var new_y = y + radius*Math.sin(toRadius(i));

Редактировать: Он не вернет 0 (спасибо число PI за такое иррациональное число), но 3.061616997868383e-15 как значение координаты X в 90 градусах. Ну, эта вещь e означает x10^ с научной точки зрения. Следовательно, 3.061616997868383e-15 это просто 3.061616997868383 x 10^-15, что крайне мало. Чтобы увидеть 0 точно, взгляните на числовые методы и выберите точность наилучшего соответствия (например, 3.061616997868383e-15.toFixed(4) приводит к 0.0000)