origin is Point(100, 100);
unit is 15;

pbro is Point(150, 500);
vectorP is Line(origin.x, origin.y, origin.x+unit*px*pc ,origin.y-unit*py*pc, "red");
pbr1 is Arc(pbro.x+20, pbro.y, 50, (3/4)*${{Math.PI}}$, (5/4)*${{Math.PI}}$, false);
pbr2 is Arc(pbro.x-20, pbro.y, 50, (7/4)*${{Math.PI}}$, (9/4)*${{Math.PI}}$, false);
pxText is Div("pxtext", ((pbr1.x+pbr2.x)/2)+5, pbr2.y-27, 1, 1, "<p>"+px+"</p>");
pyText is Div("pytext", ((pbr1.x+pbr2.x)/2)+5, pbr2.y+3, 1, 1, "<p>"+py+"</p>");
pcText is Div("pctext", ((pbr1.x+pbr2.x)/2)-40, pbr2.y-12, 1, 1, "<p>"+pc+"</p>");
pSlider is Slider("pslide", -10, 10, 1/100, 0, horizontal, ((pbr1.x+pbr2.x)/2)-90, pbr2.y+50);
pc is pslide_value;
px is 3;
py is -1;

vectorQ is Line(origin.x, origin.y, origin.x+unit*qx*qc, origin.y-unit*qy*qc, "blue");
qbr1 is Arc(pbro.x+20+250, pbro.y, 50, (3/4)*${{Math.PI}}$, (5/4)*${{Math.PI}}$, false);
qbr2 is Arc(pbro.x-20+250, pbro.y, 50, (7/4)*${{Math.PI}}$, (9/4)*${{Math.PI}}$, false);
qxText is Div("qxtext", ((qbr1.x+qbr2.x)/2)+5, qbr2.y-27, 1, 1, "<p>"+qx+"</p>");
qyText is Div("qytext", ((qbr1.x+qbr2.x)/2)+5, qbr2.y+3, 1, 1, "<p>"+qy+"</p>");
qcText is Div("qctext", ((qbr1.x+qbr2.x)/2)-40, qbr2.y-12, 1, 1, "<p>"+qc+"</p>");
qSlider is Slider("qslide", -10, 10, 1/100, 0, horizontal, ((qbr1.x+qbr2.x)/2)-90, qbr2.y+50);
qc is qslide_value;
qx is -2;
qy is 1;

vectorR is Line(vectorQ.x2, vectorQ.y2, vectorQ.x2+unit*rx*rc ,vectorQ.y2-unit*ry*rc, "green");
rbr1 is Arc(pbro.x+20+500, pbro.y, 50, (3/4)*${{Math.PI}}$, (5/4)*${{Math.PI}}$, false);
rbr2 is Arc(pbro.x-20+500, pbro.y, 50, (7/4)*${{Math.PI}}$, (9/4)*${{Math.PI}}$, false);
rxText is Div("rxtext", ((rbr1.x+rbr2.x)/2)+5, rbr2.y-27, 1, 1, "<p>"+rx+"</p>");
ryText is Div("rytext", ((rbr1.x+rbr2.x)/2)+5, rbr2.y+3, 1, 1, "<p>"+ry+"</p>");
rcText is Div("rctext", ((rbr1.x+rbr2.x)/2)-40, rbr2.y-12, 1, 1, "<p>"+rc+"</p>");
rSlider is Slider("rslide", -10, 10, 1/100, 0, horizontal, ((rbr1.x+rbr2.x)/2)-90, rbr2.y+50);
rc is rslide_value;
rx is 1;
ry is 2;

picture is [origin, pbr1, pbr2, pxText, pyText, pcText, pSlider, vectorP, qbr1, qbr2, qxText, qyText, qcText, qSlider, vectorQ, rbr1, rbr2, rxText, ryText, rcText, rSlider, vectorR];

rc = 0;
qc = 1;
pc = 1;
px = 1;
py = 0;
qx = 0;
qy = 1;
origin is Point (200,400);
a = 4;
b = 2;
c = 6;
d = 5;
vectorX is Line(origin.x, origin.y, origin.x+unit*a, origin.y-unit*c);
vectorY is Line(origin.x, origin.y, origin.x+unit*b, origin.y-unit*d);
l is pslide_value;
m is qslide_value;
vectorS is Line(origin.x, origin.y, origin.x+unit*qx*m+unit*px*l ,origin.y-unit*qy*m-unit*py*l, "orange");
vectorT is Line(origin.x, origin.y, origin.x+unit*b*m+unit*a*l, origin.y-unit*d*m-unit*c*l, "cyan");

pcText is Div("pctext", ((pbr1.x+pbr2.x)/2)-40, pbr2.y-12, 1, 1, "<p>"+l+"</p>");
qcText is Div("qctext", ((qbr1.x+qbr2.x)/2)-40, qbr2.y-12, 1, 1, "<p>"+m+"</p>");


picture is [vectorT, vectorY, vectorX, lenStext, vectorS, origin, pbr1, pbr2, pxText, pyText, pcText, pSlider, vectorP, qbr1, qbr2, qxText, qyText, qcText, qSlider, vectorQ, rbr1, rbr2, rxText, ryText, rcText, rSlider, vectorR];