CODEWITHSUNDEEP
javascriptcanvasprocessingtrigonometryangle
Cains
Cains

Reputation: 901

Calculating the angle from one point to another

So on my canvas I have a large ellipse, and when the user clicks on the canvas a small ellipse should be created on the edge of the large ellipse in the direction of where the click was. The angles are off, and I'm not very confident in the calculations, plus I think the fact that this coordinate system has y increasing when it goes down is screwing it up. Can anyone help me get the desired result?

HTML

<html>
<head>
    <script src='processing-1.4.1.min.js'></script>
    <script src='jquery-1.9.1.min.js'></script>
</head>

<body>
    <canvas id="gamecanvas" data-processing-sources="canvas.pde"></canvas>
</body>

<script>
var gamecanvas = document.getElementById("gamecanvas");
var projectiles = [];

$("#gamecanvas").click(function(e) {
    var x = e.clientX - gamecanvas.offsetLeft;
    var y = e.clientY - gamecanvas.offsetTop;
    var pindex = projectiles.length;
    projectiles[pindex] = [];
    projectiles[pindex]['angle'] = Math.atan2(y - 200, x - 300) * 180 / Math.PI;
    projectiles[pindex]['x'] = 300 + 10 * Math.cos(projectiles[pindex]['angle']);
    projectiles[pindex]['y'] = 200 + 10 * Math.sin(projectiles[pindex]['angle']);
});
</script>
</html>

Processing.js Canvas Sketch (Reference)

void draw() {
    size(600,400);
    background(255,255,255);
    fill(#FF0000);
    ellipse(300,200,15,15);
    for(i = 0;i < projectiles.length;i++) {
        ellipse(projectiles[i]['x'],projectiles[i]['y'],2,2);
    }
}

Upvotes: 1

Views: 1016

Answers (1)

user1693593
user1693593

Reputation:

You mix radians and degrees here. The JavaScript Math functions that deals with angles needs radian values:

From MDN:

The atan2 method returns a numeric value between -pi and pi representing the angle theta of an (x,y) point. This is the counterclockwise angle, measured in radians, between the positive X axis, and the point (x,y).

And for Math.cos and Math.sin:

A number given in unit of radians.

so you could try with this instead:

/// keep radians, don't convert to degrees
projectiles[pindex]['angle'] = Math.atan2(y - 200, x - 300); // * 180 / Math.PI;

projectiles[pindex]['x'] = 300 + 10 * Math.cos(projectiles[pindex]['angle']);
projectiles[pindex]['y'] = 200 + 10 * Math.sin(projectiles[pindex]['angle']);

Unless you want to keep degrees which in case you need to do this:

projectiles[pindex]['angle'] = Math.atan2(y - 200, x - 300) * 180 / Math.PI;

/// convert degrees back to radians
projectiles[pindex]['x'] =
            300 + 10 * Math.cos(projectiles[pindex]['angle'] * Math.PI / 180);
projectiles[pindex]['y'] =
            200 + 10 * Math.sin(projectiles[pindex]['angle'] * Math.PI / 180);

Upvotes: 1

Related Questions