Discover the location by determining the distance from established points

Before I get redirected to this particular question, let me clarify that while I've come across it, I am unable to comprehend its content (I wish I could). What I'm really seeking is a straightforward method (bearing in mind my limited math skills) or someone capable of translating it into JavaScript language.

In essence, my objective is to determine the coordinates of a point by utilizing 3 or more points (even up to 20) and the known distance between the desired point and the aforementioned points. How should I initiate this process?

My ideal outcome would resemble something similar to:

function getPoint(array){
    var pt = {x:0, y:0};
    //This is the crucial part where I need assistance
    return pt;
}

var a = [{x:10, y:10, d:30}, {x:10, y:50, d:20} ...];
getPoint(a);

I contemplated on computing circle-to-circle intersection; however, this approach yields two possible points, making it challenging to identify the correct one.

javascript

Answer №1

Check out this centroid algorithm that may work for your situation (although I'm not completely sure!). It's designed to locate the center of a set of points and includes a canvas to visualize the points. The red dot represents the calculated center point.

var c = document.getElementById("c");
var context=c.getContext("2d");

var a = [{x:20, y:10, d:30}, {x:15, y:80, d:20}, {x:80, y:60, d:20}];
console.log(getPoint(a));

function getPoint(points) {

var cx = 0, cy = 0,
sa = 0, a, i = 1,
len = points.length,
        pt1 = points[0], pt2;

    context.fillRect(pt1.x,pt1.y,4,4);
  
for (; i < len; i++) {

pt2 = points[i];

a = pt1.x * pt2.y - pt2.x * pt1.y;
sa += a;
cx += (pt1.x + pt2.x) * a;
cy += (pt1.y + pt2.y) * a;

        context.fillRect(pt1.x,pt1.y,4,4);
      
        pt1 = pt2;
}

    context.fillRect(pt2.x,pt2.y,4,4);

sa *= 0.5;
cx /= (6.0 * sa);
cy /= (6.0 * sa);

    context.fillStyle="red";
    context.fillRect(cx,cy,4,4);

return {
x: cx,
y: cy
};
};
<canvas id="c" width="100" height="100" style="border:2px solid red"></canvas>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone explain what exactly is [object Object]?

Why is the data value from the database showing as [object Object] instead of the actual data? var dataObj = $(this).closest('form').serialize(); $.ajax({ type: "POST", url: url, data: dataObj, cache: false, ...

javascriptjquery

How to open a link in the URL bar of Safari on iOS using JavaScript

My goal is to open a link through the iOS Safari address or URL bar. After testing, I have found that in newer iOS versions, the address bar no longer executes javascript:alert("hi"); as it did before. Have any new methods been introduced, or h ...

javascriptiosiphonesafarimobile-safari

Flow error: Unable to access the value of this.props.width as the property width is not defined in T

In my React Native project, I am utilizing Flow for type checking. For more information, visit: I currently have two files named SvgRenderer.js and Cartoon.js where: Cartoon extends SvgRenderer Below is the source code for both of these files: SvgRend ...

javascripttypescriptreact-nativejsxflowtype

Executing PHP script using HTML button in combination with Ajax and Javascript

I have a PHP function that I would like to execute from an HTML button that I have. The PHP function is located in a separate file from the HTML button. I have achieved this using: <input type="submit" name="test" id="bt1" value="RUN" /><br/> ...

javascriptphpjqueryajaxfunction

Attempting to assign a File object as a property to a component but receiving an empty object in return. I'm curious about the security implications of this as well

I created a modal for previewing avatars with a generic design: <avatar-update :img-file="avatarFile" :show="avatarModalShow" :img-url="url" @close="avatarModalShow = !avatarModalShow" :change-avatar="updateCrop" @destroyUrl="imgUrl = null"> </av ...

javascriptlaravelsecurityvue.js

What is the best way to manage asynchronous data within AngularJS directives?

Having encountered similar challenges to this specific scenario, I am currently facing issues with handling asynchronous data within my directives. The main issue arises when trying to pass asynchronously fetched data into these directives. Initially, I at ...

javascriptasynchronousangularjs

"When I use breakpoints and run my application in debugging mode, it performs flawlessly. However, without these tools, it

I have developed an application using the Ionic Framework with Firebase as the backend. When I run the application with breakpoints using the debugger, everything works fine. However, if I run it without the debugger, I notice that values are not being upd ...

javascriptangularjsfirebaseionic-frameworkfirebase-realtime-database

Retry an Ajax request immediately after a timeout without having to wait for the full

I am attempting to resend an AJAX request every 5 seconds if there is an issue, but when I simulate an offline connection with Chrome, the AJAX request doesn't wait 5 seconds between each attempt and keeps getting called continuously. What could be c ...

javascriptjqueryajax

Increase visibility, decrease visibility by utilizing ng-hide/ng-show and functions

As I implement the show more/show less feature, I am uncertain if achieving a smooth effect is feasible. However, I believe it's worth reaching out to this community for some creative ideas on how to make it possible. I have a list of dynamic links w ...

javascripthtmlcssangularjs

Commitment of service within AngularJS controller using the "as" syntax

I'm experiencing an issue with the code snippet below. I prefer using the controller as syntax and assigning data to 'this' instead of $scope. The problem is that in this scenario, when using $scope.user everything works fine, but when tryin ...

javascripthtmlangularjs

Express js is not returning a value from a recursive function?

I've been working on an ecommerce website where I created a mongoose model for all categories. However, the challenge arises when dealing with subcategories that require a parent id in the database. When a request is made, all categories are retrieved ...

javascriptnode.jsexpressmongoose

Upgrade from Next.js version 12

Greetings to all! I have recently been assigned the task of migrating a project from next.js version 12 to the latest version. The changes in page routing and app routing are posing some challenges for me as I attempt to migrate the entire website. Is ther ...

javascriptreactjsnode.jstypescriptnext.js

Upon clicking, Vue triggers form validation in Laravel

I have encountered an issue that I am unable to solve by myself: Within my Laravel view, I have included a form in the following manner {!! Form::open(array('route' => ['reports.store', $project->id], 'data-parsley-validate& ...

javascriptphpformslaravelvue.js

Error: The function app.all is not defined

This is a basic Angular page that I have set up. <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> ...

javascriptjqueryangularjs

Update the content in the Bootstrap modal

I'm currently implementing modal Bootstrap in my ASP.NET website. I have encountered an issue where the text in the modal does not change according to the errors returned in the code behind, even after modifying the text value of the control before ma ...

javascriptasp.netvb.netbootstrap-4

Store the decoded user information in the database for safekeeping

I have developed an application where users can capture images and send them to the database with ease. Upon logging in, each user receives a token. As long as the token is valid, they do not need to log in again. To implement JWT authentication, I refer ...

javascriptnode.jsexpressmiddleware

retrieve JSON information using JSONP

Currently, I am working with a URL that returns data in JSON format. Here is the URL: http://10.0.1.11/render?target=threshold(400,test)&from=-1mins&format=json&jsonp=? When I enter this URL into a browser, it displays the following JSON re ...

javascriptjqueryjson

Is it a bad idea to set directive scope to false, considering the limitations on broadcasting in an isolated scope?

There is a unique situation I am trying to tackle where I need to use $broadcast within a directive's linking function that has an isolated scope. Unfortunately, broadcasting from inside an isolated scope becomes challenging as the directive scope doe ...

javascriptangularjsangularjs-directivescope

Regular expressions: Capturing characters that come after and before a designated symbol

Is there a way to extract all letters, both before and after an underline "_", in JavaScript using Regex while excluding specific words like "pi", "\Delta" and "\Sigma"? How can this be achieved in Regex JS? /\b([^e|_|\d|\W])&bso ...

javascriptregex

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss