Scara 5 Bar negative setup

by Pavlo

HTML

<canvas id=star width=300 height=300></canvas>
<div id="p_scents">
<!--
<select id="ScaraType">
  <option value="5Bar">5Bar</option>
  <option value="SingleArm">SingleArm</option>
</select> 
-->
<p>
        <label for="p_scnts">Target_X<input type="text" id="Effector_X" size="5" name="p_scnt" value="0" placeholder="Effector_X" /></label>
        <label for="p_scnts">Target_Y<input type="text" id="Effector_Y" size="5" name="p_scnt" value="30" placeholder="Effector_Y" /></label>
    </p>
    <p>
        <label for="p_scnts">Linkage_1<input type="text" id="Linkage_1" size="4" name="p_scnt" value="70" placeholder="Linkage_1" /></label>
        <label for="p_scnts">Linkage_2<input type="text" id="Linkage_2" size="4" name="p_scnt" value="80" placeholder="Linkage_2"  /></label>
    </p>
    <p>
        <label for="p_scnts">FiveBarAxesDist<input type="text" id="FiveBarAxesDist" size="3" name="p_scnt" value="100" placeholder="FiveBarAxesDist"  /></label>
    </p>
<p>
        <label for="p_scnts">BedW<input type="text" id="BedW" size="5" name="p_scnt" value="200" placeholder="BedW" /></label>
        <label for="p_scnts">BedH<input type="text" id="BedH" size="5" name="p_scnt" value="200" placeholder="BedH" /></label>
    </p>
<p>
        <label for="p_scnts">BedLeft<input type="text" id="BedLeft" size="5" name="p_scnt" value="-100" placeholder="BedLeft" /></label>
        <label for="p_scnts">BedBottom<input type="text" id="BedBottom" size="5" name="p_scnt" value="10" placeholder="BedBottom" /></label>
    </p>
<button id="draw">Draw</button>
<pre id="output"></pre>

JavaScript

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

function draw()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML = "";

    var canvas, ctx, length = 15; // length of the star's arm
    // grab a reference to the 2d context from canvas element
    canvas = document.getElementById("star");
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(width,0);
    ctx.lineTo(width,height);
    ctx.lineTo(0,height);
    ctx.stroke();

    // move into the middle of the canvas, just to make room
    var width = canvas.width;
    var height = canvas.height;
    
    var centerx=width/2;
    var zeroy=height-30;
    
    var bedPosLeft = Number(document.getElementById("BedLeft").value);
    var bedPosBottom = Number(document.getElementById("BedBottom").value);
    var bedWidth = Number(document.getElementById("BedW").value);
    var bedHeight = Number(document.getElementById("BedH").value);
    
    //var SCARA_type = Number(document.getElementById("ScaraType").value);
    var SCARA_pos_X_AXIS = Number(document.getElementById("Effector_X").value);
    var SCARA_pos_Y_AXIS = Number(document.getElementById("Effector_Y").value);
    
    var drawReacability = 1;
    
    var Linkage_1 = Number(document.getElementById("Linkage_1").value);
    var Linkage_2 = Number(document.getElementById("Linkage_2").value);
    var FiveBarAxesDist = Number(document.getElementById("FiveBarAxesDist").value);;//50;
    out("Linkage_1",Linkage_1);
    out("Linkage_2",Linkage_2);
    out("FiveBarAxesDist",FiveBarAxesDist);

    
    var EndPointMountOffset=0;
    var EndPointMountAngle=0;
    
    var SCARA_RAD2DEG=57.2957795;  // to convert RAD to degrees
    var EndPointMountAngleRad = (EndPointMountAngle/SCARA_RAD2DEG);
    
    
    var L1_2 =...