2D delta arms

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="50" placeholder="Effector_Y" /></label>
    </p>
    <p>
        <label for="p_scnts">ArmLen<input type="text" id="ArmLen" value="90" size="4" name="p_scnt" placeholder="ArmLen" /></label>
        <label for="p_scnts">ArmOffset<input type="text" id="ArmOffset" value="55" size="4" name="p_scnt" placeholder="ArmOffset" /></label>
        <label for="p_scnts">EffectorOffset<input type="text" id="EffectorOffset" value="20" size="4" name="p_scnt" placeholder="EffectorOffset"  /></label>
        <label for="p_scnts">RodsBottom<input type="text" id="RodsBottom" value="80"  size="4" name="p_scnt" placeholder="RodsBottom" /></label>
        <label for="p_scnts">RodsLen<input type="text" id="RodsLen" size="4" value="150" name="p_scnt" placeholder="RodsLen" /></label>
    </p>
<p>
        <label for="p_scnts">BedW<input type="text" id="BedW" size="5" name="p_scnt" value="100" placeholder="BedH" /></label>
        <label for="p_scnts">BedH<input type="text" id="BedH" size="5" name="p_scnt" value="150" placeholder="BedH" /></label>
        <label for="p_scnts">BedTestH<input type="text" id="BedTestH" size="5" name="p_scnt" value="50" placeholder="BedTestH" /></label>
        <label for="p_scnts">ReachabilityBottomOffset<input type="text" id="ReachabilityBottomOffset" size="5" name="p_scnt" value="-10" placeholder="ReachabilityBottomOffset" /></label>
    </p>
<p>
        <label for="p_scnts">BedBottom<input type="text" id="BedBottom" size="5" name="p_scnt" value="50" placeholder="BedBottom" /></label>
    </p>
<button...

JavaScript

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

function cal_delta(tx,ty,la,oa,po)
{
		var a1x=tx+po;
    var a1y=ty;
		var a2x=oa;
		var a2y=ty;
		var aa = Math.sqrt((a2x-a1x)*(a2x-a1x)+(a2y-a1y)*(a2y-a1y));
		//    
		var b1x=tx-po;
    var b1y=ty;
		var b2x=-oa;
    var b2y=ty;
		var ab = Math.sqrt((b2x-b1x)*(b2x-b1x)+(b2y-b1y)*(b2y-b1y));

		var ha = Math.sqrt((la*la)-(aa*aa));
		var hb = Math.sqrt((la*la)-(ab*ab));
	var returnedObject = {};
  returnedObject["ha"] = ty-ha;
  returnedObject["hb"] = ty-hb;
//  returnedObject["ha"] = ha+ty;
//  returnedObject["hb"] = hb+ty;
	return returnedObject;
}

function draw()
{
// http://robinsonia.com/wp/?p=161
    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 tx = Number(document.getElementById("Effector_X").value);
    var ty = Number(document.getElementById("Effector_Y").value);
    
    var drawReacability = 1;
    
    var la = Number(document.getElementById("ArmLen").value);
    var oa = Number(document.getElementById("ArmOffset").value);
    var po = Number(document.getElementById("EffectorOffset").value);

    var bedPosBottom = Number(document.getElementById("BedBottom").value);
    var bedWidth = Number(document.getElementById("BedW").value);
    var bedPosLeft = -bedWidth/2;
    var bedHeight...