Trilateration 2D Cricles

2-Dimensions 3 Circles

by Peter Löcker

HTML

<!--Debug-Wertausgabe-->
<span id="out"></span> X A:
<input type="range" id="xa" min="0" max="1" step="0.05" value="1.000"> Y A:
<input type="range" id="ya" min="0" max="1" step="0.05" value="0.830"> Radius A:
<input type="range" id="ra" min="0" max="1" step="0.05" value="0.583">
<br> X B:
<input type="range" id="xb" min="0" max="1" step="0.05" value="0.000"> Y B:
<input type="range" id="yb" min="0" max="1" step="0.05" value="0.583"> Radius B:
<input type="range" id="rb" min="0" max="1" step="0.05" value="0.500">
<br> X C:
<input type="range" id="xc" min="0" max="1" step="0.05" value="0.083"> Y C:
<input type="range" id="yc" min="0" max="1" step="0.05" value="0.000"> Radius C:
<input type="range" id="rc" min="0" max="1" step="0.05" value="0.750">
<!--Canvas Ausgabe-->
<canvas id="canvas1" width="600" height="600" style="border: 1px solid #000; display: inline-block;"></canvas>
<!--Tabelle mit den Werten zum Nachrechnen-->
<table style="display: inline-block;">
    <tr>
        <td>Bezeichnung:</td>
        <td>X:</td>
        <td>Y:</td>
    </tr>
    <tr>
        <td>Schnittpunkt 1</td>
        <td id="tablex0">-</td>
        <td id="tabley0">-</td>
    </tr>
    <tr>
        <td>Schnittpunkt 2</td>
        <td id="tablex1">-</td>
        <td id="tabley1">-</td>
    </tr>
    <tr>
        <td>Schnittpunkt 3</td>
        <td id="tablex2">-</td>
        <td id="tabley2">-</td>
    </tr>
    <tr>
        <td>Schnittpunkt 4</td>
        <td id="tablex3">-</td>
        <td id="tabley3">-</td>
    </tr>
    <tr>
        <td>Schnittpunkt 5</td>
        <td id="tablex4">-</td>
        <td id="tabley4">-</td>
    </tr>
    <tr>
        <td>Schnittpunkt 6</td>
        <td id="tablex5">-</td>
        <td id="tabley5">-</td>
    </tr>
    <tr>
        <td>Gerade 1</td>
        <td id="tablex6">-</td>
        <td id="tabley6">-</td>
    </tr>
    <tr>
        <td>Gerade 2</td>
        <td id="tablex7">-</td>
        <td id="tabley7">-</td>
    </tr>
    <tr>
       ...

CSS

table,
tr,
td {
    border: 1px solid #999;
    border-collapse: collapse;
    font-size: 15px;
}

td {
    padding: 5px;
}

JavaScript

//wird die Seite aufgerufen, wird die Funktion init() ausgeführt
window.onload = init();

document.getElementById('xa').oninput = init;
document.getElementById('xb').oninput = init;
document.getElementById('xc').oninput = init;

document.getElementById('ya').oninput = init;
document.getElementById('yb').oninput = init;
document.getElementById('yc').oninput = init;

document.getElementById('ra').oninput = init;
document.getElementById('rb').oninput = init;
document.getElementById('rc').oninput = init;

function init() {
    canvas = document.getElementById("canvas1");
    ctx = canvas.getContext("2d");

    //Beacon Koordinaten; müssen noch durch einmaliges Setup bestimmt werden
    /*A = [600, 500, 350];
    B = [0, 350, 300];
    C = [50, 0, 450];*/

    //Koordinaten sind relativ zur Canvas-Flächengröße
    /*A = [1.000, 0.830, 0.583];
    B = [0.000, 0.583, 0.500];
    C = [0.083, 0.000, 0.750];*/

    var xa = document.getElementById("xa").value;
    var xb = document.getElementById("xb").value;
    var xc = document.getElementById("xc").value;

    var ya = document.getElementById("ya").value;
    var yb = document.getElementById("yb").value;
    var yc = document.getElementById("yc").value;

    var ra = document.getElementById("ra").value;
    var rb = document.getElementById("rb").value;
    var rc = document.getElementById("rc").value;

    A = [xa, ya, ra];
    B = [xb, yb, rb];
    C = [xc, yc, rc];

    //hole die Länge und Breite des Canvas Feldes
    var height = canvas.height / 4 * 3;
    var width = canvas.width / 4 * 3;
    var diff = width * 1 / 3;

    //In Objekte umformen
    A = {
        x: A[0] * width + diff / 2,
        y: A[1] * height + diff / 2,
        r: A[2] * width
    };
    B = {
        x: B[0] * width + diff / 2,
        y: B[1] * height + diff / 2,
        r: B[2] * width
    };
    C = {
        x: C[0] * width + diff / 2,
        y: C[1] * height + diff / 2,
        r: C[2] * width
    };

    //Trilateration berechnen in...