Get the pixel from coordinates

Question

I have 2 coordinates x and y of a point. I want to calculate the angle between three points, say A,B,C.

Now for the B point I do not have a pixel which contains the 2 coordinates instead I have the pixel, how can I get a single pixel which I can use in my formula.

function find_angle(A,B,C) {
var AB = Math.sqrt(Math.pow(B.x-A.x,2)+ Math.pow(B.y-A.y,2));    
var BC = Math.sqrt(Math.pow(B.x-C.x,2)+ Math.pow(B.y-C.y,2)); 
var AC = Math.sqrt(Math.pow(C.x-A.x,2)+ Math.pow(C.y-A.y,2));
var abc = (BC*BC)+ (AB*AB)-(AC*AC);

var x = abc/(2*BC*AB);

 var Angle = FastInt((Math.acos(x) * 180/3.14159));
   document.getElementById("Angle").value = Angle;

 }

How to proceed with this.

A is changing every time I move the point and I have the updated coordinates as well but I am not able to get the whole pixel I can use in the formula to calculate the new angle.

Answer 1

If I understand what you are asking - you want to create a calculator for the angle formed between 3 dots (A, B middle, C).

Your function should work for the final calculation but you need to recall the function every time a point has moved.

I created a nice fiddle to demonstrate how you can achieve it with : jQuery, jQuery-ui, html.

I used the draggable() plugin of the UI library to allow the user to manually drag the dots around And I'm recalculating the angle while dragging.

Take a look: COOL DEMO JSFIDDLE

The CODE ( you will find all HTML & CSS in the demo):

$(function(){
    //Def Position values:
    var defA = { top:20, left:220 };
    var defB = { top:75, left:20 };
    var defC = { top:200, left:220 };

    //Holds the degree symbol:
    var degree_symbol = $('<div>').html('&#12444;').text();

    //Point draggable attachment.
    $(".point").draggable({
      containment: "parent",
      drag: function() {
          set_result(); //Recalculate
      },
      stop: function() {
          set_result(); //Recalculate
      }
    });

    //Default position:
    reset_pos();

    //Reset button click event:
    $("#reset").click(function(){ reset_pos(); });

    //Calculate position of points and updates:
    function set_result() {
        var A = get_middle("A");
        var B = get_middle("B");
        var C = get_middle("C");
        angle = find_angle(A,B,C);
        $("#angle").val(angle + degree_symbol);
        connect_line("AB");
        connect_line("CB");        
    }

    //Angle calculate:    
    function find_angle(A,B,C) {
        var AB = Math.sqrt(Math.pow(B.x-A.x,2)+ Math.pow(B.y-A.y,2));    
        var BC = Math.sqrt(Math.pow(B.x-C.x,2)+ Math.pow(B.y-C.y,2)); 
        var AC = Math.sqrt(Math.pow(C.x-A.x,2)+ Math.pow(C.y-A.y,2));
        radians = Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB)); //Radians
        degree  = radians * (180/Math.PI); //Degrees
        return degree.toFixed(3);
    }

    //Default position:
    function reset_pos() {
        $("#A").css(defA);
        $("#B").css(defB);
        $("#C").css(defC);
        set_result();
    }

    //Add lines and draw them:
    function connect_line(points) {
        var off1 = null;
        var offB = get_middle("B");
        var thickness = 4;
        switch (points) {
            case "AB": off1 = get_middle("A"); break;
            case "CB": off1 = get_middle("C"); break;
        }
        var length = Math.sqrt(
            ((offB.x-off1.x) * (offB.x-off1.x)) + 
            ((offB.y-off1.y) * (offB.y-off1.y))
        );
        var cx = ((off1.x + offB.x)/2) - (length/2);
        var cy = ((off1.y + offB.y)/2) - (thickness/2);
        var angle = Math.atan2((offB.y-off1.y),(offB.x-off1.x))*(180/Math.PI);
        var htmlLine = "<div id='" + points + "' class='line' " +
                       "style='padding:0px; margin:0px; height:" + thickness + "px; " +
                       "line-height:1px; position:absolute; left:" + cx + "px; " + 
                       "top:" + cy + "px; width:" + length + "px; " +
                       "-moz-transform:rotate(" + angle + "deg); " + 
                       "-webkit-transform:rotate(" + angle + "deg); " + 
                       "-o-transform:rotate(" + angle + "deg); " + 
                       "-ms-transform:rotate(" + angle + "deg); " + 
                       "transform:rotate(" + angle + "deg);' />";
        $('#testBoard').find("#" + points).remove();
        $('#testBoard').append(htmlLine);
    }

    //Get Position (center of the point):
    function get_middle(el) {
        var _x = Number($("#" + el).css("left").replace(/[^-\d\.]/g, ''));
        var _y = Number($("#" + el).css("top").replace(/[^-\d\.]/g, ''));
        var _w = $("#" + el).width();
        var _h = $("#" + el).height();
        return { 
            y: _y + (_h/2), 
            x: _x + (_w/2),
            width: _w, 
            height: _h 
        };
    }

});

This Code requires jQuery & jQuery-UI. Don't forget to include them if you test it locally.

Have fun!