originX = 540;
originY = 240;
origin is Circle(originX, originY, 5, "white", "black");
originText is Text("Origin", originX-25, originY+20, "black");

vectorPX is originX+220;
vectorPY is originY-60;
pointP is Circle(vectorPX, vectorPY, 5, "red", "black");
vectorP is Line(originX, originY, vectorPX, vectorPY, "red");
vectorPtext is Text("P Head", vectorPX+12, vectorPY-3, "red");
vector_p_text is Div("ptext", ((vectorP.x1+vectorP.x2)/2)+10, ((vectorP.y1+vectorP.y2)/2)-2, 1, 1, "<p style=font-family:arial;position:fixed;color:red;font-size:20px;>p</p>");

vectorQX is originX+100;
vectorQY is originY-100;
pointQ is Circle(vectorQX, vectorQY, 5, "blue", "black");
vectorQ is Line(originX, originY, vectorQX, vectorQY, "blue");
vectorQtext is Text("Q Head", vectorQX-33, vectorQY-10, "blue");
vector_q_text is Div("qtext", ((vectorQ.x1+vectorQ.x2)/2)-12, ((vectorQ.y1+vectorQ.y2)/2)-35, 1, 1, "<p style=font-family:arial;position:fixed;color:blue;font-size:20px;>q</p>");

##these lines will be redefined when in triangle mode
vectorResultAline is Line(vectorPX, vectorPY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "blue");
vectorResultBline is Line(vectorQX, vectorQY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "red");

vectorResultHead is Circle(originX+(vectorP.x2-vectorP.x1)+(vectorQ.x2-vectorQ.x1), originY+(vectorP.y2-vectorP.y1)+(vectorQ.y2-vectorQ.y1), 5, "black", "black");
vectorResultText is Text("Result Head",vectorResultHead.x, vectorResultHead.y+15, "black");
vectorActualResult is Line(originX, originY, vectorResultHead.x, vectorResultHead.y, "black");
vectorActualText is Div("vatext", ((originX+vectorActualResult.x2)/2)-35, ((originY+vectorActualResult.y2)/2)-30, 1, 1, "<p style=font-family:arial;position:fixed;color:black;font-size:20px;>p+q</p>");


######################################################################

func flat {
##rounds a value(num) to the nearest multiple of unit(gap) specified from 0
  para num, gap;
	if((num%gap)<=(gap/2)){
		while(num%gap!=0){
			num--;
		}
	}
	else if((num%gap)>(gap/2)){
		while(num%gap!=0){
			num++;
		}
	}
  return num;
};

func roundDP{
  para num, places;
  auto i;
  for (i=1; i<=places; i++) num = num * 10;
  num = int(num);
  for (i=1; i<=places; i++) num = num / 10;
  return num;
};

func roundSF{
	return ${{arguments[0].toPrecision(arguments[1])}}$;
};



######################################################################

PXunits is ((vectorPX)-originX);	##the x component of P in units
PYunits is ((originY)-vectorPY);	##the y component of P in units
RXunits is vectorResultHead.x;
RYunits is vectorResultHead.y;
QXunits is ((vectorQX)-originX);
QYunits is ((originY)-vectorQY);
AXunits is (vectorAX-originX);
AYunits is (originY-vectorAY);
BXunits is (vectorBX-originX);
BYunits is (originY-vectorBY);


################################################################################

##scaled from pixels to more appropriate units
unit = 20; 

################################################################################

vectorAX = originX+unit;
vectorAY = originY;
vectorBX = originX;
vectorBY = originY-unit;

baseAX is (vectorAX-originX)/unit;
baseAY is (-1)*(vectorAY-originY)/unit;
baseBX is (vectorBX-originX)/unit;
baseBY is (-1)*(vectorBY-originY)/unit;

baseAvector is Line(originX, originY, vectorAX, vectorAY, "orange");
baseBvector is Line(originX, originY, vectorBX, vectorBY, "orange");
baseAHead is Circle(vectorAX, vectorAY, 4, "orange", "white");
baseBHead is Circle(vectorBX, vectorBY, 4, "orange", "white");
baseAtext is Text("Base A", (vectorAX)-7, (vectorAY)+13, "orange");
baseBtext is Text("Base B", (vectorBX)-17, vectorBY, "orange");

##coefficients for bases
det is ((baseAX*baseBY) - (baseBX*baseAY));
PcoefA is roundSF(((((1/det)*baseBY*PXunits)-((1/det)*baseBX*PYunits))/unit), 3);
PcoefB is roundSF(((((1/det)*(baseAX*PYunits))-((1/det)*baseAY*PXunits))/unit), 3);
QcoefA is roundSF(((((1/det)*baseBY*QXunits)-((1/det)*baseBX*QYunits))/unit), 3);
QcoefB is roundSF(((((1/det)*(baseAX*QYunits))-((1/det)*baseAY*QXunits))/unit), 3);


##coordinates for basis position
basisCoordX = 0;
basisCoordY = 375;

## Vector P Column Div
ColumnText1 is Div("columntext1", vectorBrackXpos1+13, vectorBrackYpos1+60, 1, 1, "<p style=font-family:arial;position:fixed;font-size:15px;color:red;>Vector P</p>");
vectorBrackXpos1 is basisCoordX;
vectorBrackYpos1 is basisCoordY-85;
vectorElem1Xpos1 is vectorBrackXpos1+28;
vectorElem1Ypos1 is vectorBrackYpos1+80;
vectorElem2Xpos1 is vectorBrackXpos1+28;
vectorElem2Ypos1 is vectorBrackYpos1+113;
vectorBrack1 is Div("Brack1", vectorBrackXpos1, vectorBrackYpos1, 1, 1, "<p style=font-family:arial;position:fixed;color:red;font-size:80px;>(&nbsp)</p>");
vecX1 is Div("vecx1", vectorElem1Xpos1, vectorElem1Ypos1, 1, 1, "<p style=font-family:arial;position:fixed;font-size:20px;>"+PXunits/unit+"</p>");
vecY1 is Div("vecy1", vectorElem2Xpos1, vectorElem2Ypos1, 1, 1, "<p style=font-family:arial;position:fixed;font-size:20px;>"+PYunits/unit+"</p>");

## Vector Q Column Div
ColumnText2 is Div("columntext2", vectorBrackXpos2+13, vectorBrackYpos2+60, 1, 1, "<p style=font-family:arial;position:fixed;font-size:15px;color:blue;>Vector Q</p>");
vectorBrackXpos2 is basisCoordX;
vectorBrackYpos2 is basisCoordY+15;
vectorElem1Xpos2 is vectorBrackXpos2+28;
vectorElem1Ypos2 is vectorBrackYpos2+80;
vectorElem2Xpos2 is vectorBrackXpos2+28;
vectorElem2Ypos2 is vectorBrackYpos2+113;
vectorBrack2 is Div("Brack2", vectorBrackXpos2, vectorBrackYpos2, 1, 1, "<p style=font-family:arial;position:fixed;color:blue;font-size:80px;>(&nbsp)</p>");
vecX2 is Div("vecx2", vectorElem1Xpos2, vectorElem1Ypos2, 1, 1, "<p style=font-family:arial;position:fixed;font-size:20px;>"+QXunits/unit+"</p>");
vecY2 is Div("vecy2", vectorElem2Xpos2, vectorElem2Ypos2, 1, 1, "<p style=font-family:arial;position:fixed;font-size:20px;>"+QYunits/unit+"</p>");

## Base AP vector
baseText is Div("basetext" , vectorBrackXpos3+13, vectorBrackYpos3+60, 1 ,1, "<p style=font-family:arial;position:fixed;color:orange;font-size:15px;>Base A</p>");
vectorBrackXpos3 is vectorBrackXpos1+70+90;
vectorBrackYpos3 is vectorBrackYpos1;
vectorElem1Xpos3 is vectorBrackXpos3+28;
vectorElem1Ypos3 is vectorBrackYpos3+80;
vectorElem2Xpos3 is vectorBrackXpos3+28;
vectorElem2Ypos3 is vectorBrackYpos3+113;
vectorBrack3 is Div("Brack3",vectorBrackXpos3,vectorBrackYpos3,1,1,"<p style=font-family:arial;position:fixed;color:orange;font-size:80px;>(&nbsp)</p>");
vecX3 is Div("vecx3",vectorElem1Xpos3,vectorElem1Ypos3,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseAX+"</p>");
vecY3 is Div("vecy3",vectorElem2Xpos3 ,vectorElem2Ypos3 ,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseAY+"</p>");

## Base BP vector
baseText2 is Div("basetext2", vectorBrackXpos4+13, vectorBrackYpos4+60, 1, 1, "<p style=font-family:arial;position:fixed;color:orange;font-size:15px;>Base B</p>");
vectorBrackXpos4 is vectorBrackXpos3+70+90;
vectorBrackYpos4 is vectorBrackYpos3;
vectorElem1Xpos4 is vectorBrackXpos4+28;
vectorElem1Ypos4 is vectorBrackYpos4+80;
vectorElem2Xpos4 is vectorBrackXpos4+28;
vectorElem2Ypos4 is vectorBrackYpos4+113;
vectorBrack4 is Div("Brack4",vectorBrackXpos4,vectorBrackYpos4,1,1,"<p style=font-family:arial;position:fixed;color:orange;font-size:80px;>(&nbsp)</p>");
vecX4 is Div("vecx4",vectorElem1Xpos4,vectorElem1Ypos4,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseBX+"</p>");
vecY4 is Div("vecy4",vectorElem2Xpos4 ,vectorElem2Ypos4 ,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseBY+"</p>");

## Base AQ vector
baseText3 is Div("basetext3", vectorBrackXpos5+13, vectorBrackYpos5+60, 1 ,1, "<p style=font-family:arial;position:fixed;color:orange;font-size:15px;>Base A</p>");
vectorBrackXpos5 is vectorBrackXpos2+70+90;
vectorBrackYpos5 is vectorBrackYpos2;
vectorElem1Xpos5 is vectorBrackXpos5+28;
vectorElem1Ypos5 is vectorBrackYpos5+80;
vectorElem2Xpos5 is vectorBrackXpos5+28;
vectorElem2Ypos5 is vectorBrackYpos5+113;
vectorBrack5 is Div("Brack5",vectorBrackXpos5,vectorBrackYpos5,1,1,"<p style=font-family:arial;position:fixed;color:orange;font-size:80px;>(&nbsp)</p>");
vecX5 is Div("vecx5",vectorElem1Xpos5,vectorElem1Ypos5,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseAX+"</p>");
vecY5 is Div("vecy5",vectorElem2Xpos5 ,vectorElem2Ypos5 ,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseAY+"</p>");

## Base BQ vector
baseText4 is Div("basetext4", vectorBrackXpos6+13, vectorBrackYpos6+60, 1, 1, "<p style=font-family:arial;position:fixed;color:orange;font-size:15px;>Base B</p>");
vectorBrackXpos6 is vectorBrackXpos5+70+90;
vectorBrackYpos6 is vectorBrackYpos5;
vectorElem1Xpos6 is vectorBrackXpos6+28;
vectorElem1Ypos6 is vectorBrackYpos6+80;
vectorElem2Xpos6 is vectorBrackXpos6+28;
vectorElem2Ypos6 is vectorBrackYpos6+113;
vectorBrack6 is Div("Brack6",vectorBrackXpos6,vectorBrackYpos6,1,1,"<p style=font-family:arial;position:fixed;color:orange;font-size:80px;>(&nbsp)</p>");
vecX6 is Div("vecx6",vectorElem1Xpos6,vectorElem1Ypos6,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseBX+"</p>");
vecY6 is Div("vecy6",vectorElem2Xpos6 ,vectorElem2Ypos6 ,1,1,"<p style=font-family:arial;position:fixed;font-size:20px;>"+baseBY+"</p>");

###########################################################

PcoefADiv is Div("PcoefAdiv",vectorBrack3.x-35, vectorBrack3.y+105, 1, 1, "<p style=font-family:arial;position:fixed;font-size:15px;>"+PcoefA+"</p>");
PcoefBDiv is Div("PcoefBdiv",vectorBrack4.x-35, vectorBrack4.y+105, 1, 1, "<p style=font-family:arial;position:fixed;font-size:15px;>"+PcoefB+"</p>");
QcoefADiv is Div("QcoefAdiv",vectorBrack5.x-35, vectorBrack5.y+105, 1, 1, "<p style=font-family:arial;position:fixed;font-size:15px;>"+QcoefA+"</p>");
QcoefBDiv is Div("QcoefBdiv",vectorBrack6.x-35, vectorBrack6.y+105, 1, 1, "<p style=font-family:arial;position:fixed;font-size:15px;>"+QcoefB+"</p>");

eqSymbP is Div("esp", vectorBrack1.x+90, vectorBrack1.y+90, 1, 1, "<p style=font-family:arial;position:fixed;font-size:25px;>=</p>");
eqSymbQ is Div("esq", vectorBrack2.x+90, vectorBrack2.y+90, 1, 1, "<p style=font-family:arial;position:fixed;font-size:25px;>=</p>");
plusSymbP is Div("psp", vectorBrack3.x+90, vectorBrack3.y+90, 1, 1, "<p style=font-family:arial;position:fixed;font-size:25px;>+</p>");
plusSymbQ is Div("psq", vectorBrack5.x+90, vectorBrack5.y+90, 1, 1, "<p style=font-family:arial;position:fixed;font-size:25px;>+</p>");


###########################################################


ty1 = "";	##needed for hiding the warning of dependent bases
alert is Div("ohdear", 175, 25, 1, 1, "<p style=font-family:arial;position:fixed;font-size:20px;>"+ty1+"</p>");
detzero is (((baseAX*baseBY)-(baseBX*baseAY))==0) ? ty1="Base Vectors are not a Basis: B is dependant on A" : ty1="";

buttonP is Button("pbut", "Control Vector P", 0, 0, true);
proc processP : pbut_clicked {

	if(pbut_clicked){
		originX = originX;
		originY = originY;
		vectorQX = vectorQX;
		vectorQY = vectorQY;
		vectorAX = vectorAX;
		vectorAY = vectorAY;
		vectorBX = vectorBX;
		vectorBY = vectorBY;
		mouseClickX = vectorPX;
		mouseClickY = vectorPY;
		vectorPX is flattenedX;
		vectorPY is flattenedY;
		buttonA.enabled = true;
		buttonB.enabled = true;
		buttonP.enabled = false;
		buttonQ.enabled = true;
		buttonO.enabled = true;
		pbut_clicked = false;
	}
}

buttonQ is Button("qbut", "Control Vector Q", 0, 25, true);
proc processQ : qbut_clicked {

	if(qbut_clicked){
		originX = originX;
		originY = originY;
		vectorPX = vectorPX;
		vectorPY = vectorPY;
		vectorAX = vectorAX;
		vectorAY = vectorAY;
		vectorBX = vectorBX;
		vectorBY = vectorBY;
		mouseClickX = vectorQX;
		mouseClickY = vectorQY;
		vectorQX is flattenedX;
		vectorQY is flattenedY;
		buttonA.enabled = true;
		buttonB.enabled = true;
		buttonQ.enabled = false;
		buttonP.enabled = true;
		buttonO.enabled = true;
		qbut_clicked = false;
	}
}

buttonA is Button("abut", "Control Base A", 0, 50, true);
proc processA : abut_clicked {

	if(abut_clicked){
		originX = originX;
		originY = originY;
		vectorPX = vectorPX;
		vectorPY = vectorPY;
		vectorQX = vectorQX;
		vectorQY = vectorQY;
		vectorBX = vectorBX;
		vectorBY = vectorBY;
		mouseClickX = vectorAX;
		mouseClickY = vectorAY;
		vectorAX is flattenedX;
		vectorAY is flattenedY;
		buttonA.enabled = false;
		buttonB.enabled = true;
		buttonQ.enabled = true;
		buttonP.enabled = true;
		buttonO.enabled = true;
		abut_clicked = false;
	}
}

buttonB is Button("bbut", "Control Base B", 0, 75, true);
proc processB : bbut_clicked {

	if(bbut_clicked){
		originX = originX;
		originY = originY;
		vectorPX = vectorPX;
		vectorPY = vectorPY;
		vectorQX = vectorQX;
		vectorQY = vectorQY;
		vectorAX = vectorAX;
		vectorAY = vectorAY;
		mouseClickX = vectorBX;
		mouseClickY = vectorBY;
		vectorBX is flattenedX;
		vectorBY is flattenedY;
		buttonA.enabled = true;
		buttonB.enabled = false;
		buttonQ.enabled = true;
		buttonP.enabled = true;
		buttonO.enabled = true;
		bbut_clicked = false;
	}
}

buttonO is Button("obut", "Translate the Origin", 0, 100, true);
proc processO : obut_clicked {

	if(obut_clicked){
		temp_px = PXunits;
		temp_py = PYunits;
		vectorPX is originX+temp_px;
		vectorPY is originY-temp_py;
		temp_qx = QXunits;
		temp_qy = QYunits;
		vectorQX is originX+temp_qx;
		vectorQY is originY-temp_qy;
		temp_ax = AXunits;
		temp_ay = AYunits;
		vectorAX is originX+temp_ax;
		vectorAY is originY-temp_ay;
		temp_bx = BXunits;
		temp_by = BYunits;
		vectorBX is originX+temp_bx;
		vectorBY is originY-temp_by;
		mouseClickX = originX;
		mouseClickY = originY;
		originX is flattenedX;
		originY is flattenedY;
		buttonA.enabled = true;
		buttonB.enabled = true;
		buttonP.enabled = true;
		buttonQ.enabled = true;
		buttonO.enabled = false;
		obut_clicked = false;
	}
}

buttonSnapPQ is Button("snapPQ", "Snap Vector P tail to Vector Q head", 0 ,150, true);
proc processSnapPtoQ :  snapPQ_clicked {

	if(snapPQ_clicked){	
		vectorP is Line(vectorQX,vectorQY,vectorPX,vectorPY,"red");
		vectorResultAline is Line(0, 0, 0, 0, "green");
		vectorResultBline is Line(0, 0, 0, 0, "green");
		if(vectorP.x1==originX){
			if(vectorP.y1==originY){
				if(vectorQ.x1==originX){
					if(vectorQ.y1==originY){
						vectorResultAline is Line(vectorPX, vectorPY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
						vectorResultBline is Line(vectorQX, vectorQY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
					}
				}
			}
		}
		buttonSnapPO.enabled = true;
		buttonSnapPQ.enabled = false;
		buttonSnapQP.enabled = false;
		snapPQ_clicked=false;
	}
}

buttonSnapQP is Button("snapQP", "Snap Vector Q tail to Vector P head", 0 ,225, true);
proc processSnapQtoP :  snapQP_clicked {

	if(snapQP_clicked){	
		vectorQ is Line(vectorPX,vectorPY,vectorQX,vectorQY,"blue");
		vectorResultAline is Line(0, 0, 0, 0, "green");
		vectorResultBline is Line(0, 0, 0, 0, "green");
		if(vectorP.x1==originX){
			if(vectorP.y1==originY){
				if(vectorQ.x1==originX){
					if(vectorQ.y1==originY){
						vectorResultAline is Line(vectorPX, vectorPY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
						vectorResultBline is Line(vectorQX, vectorQY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
					}
				}
			}
		}
		buttonSnapQO.enabled = true;
		buttonSnapQP.enabled = false;
		buttonSnapPQ.enabled = false;
		snapQP_clicked=false;
	}
}

buttonSnapPO is Button("snapPO", "Return Vector P tail to Origin", 0, 175, false);
proc processSnapPtoO : snapPO_clicked {

	if(snapPO_clicked){
		vectorP is Line(originX, originY, vectorPX, vectorPY, "red");
		if(vectorP.x1==originX){
			if(vectorP.y1==originY){
				if(vectorQ.x1==originX){
					if(vectorQ.y1==originY){
						vectorResultAline is Line(vectorPX, vectorPY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
						vectorResultBline is Line(vectorQX, vectorQY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
					}
				}
			}
		}
		buttonSnapPO.enabled = false;
		buttonSnapPQ.enabled = true;
		buttonSnapQP.enabled = true;
		snapPO_clicked = false;
	}
}

buttonSnapQO is Button("snapQO", "Return Vector Q tail to Origin", 0, 250, false);
proc processSnapQtoO : snapQO_clicked {

	if(snapQO_clicked){
		vectorQ is Line(originX, originY, vectorQX, vectorQY, "blue");
		if(vectorP.x1==originX){
			if(vectorP.y1==originY){
				if(vectorQ.x1==originX){
					if(vectorQ.y1==originY){
						vectorResultAline is Line(vectorPX, vectorPY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
						vectorResultBline is Line(vectorQX, vectorQY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
					}
				}
			}
		}
		buttonSnapQO.enabled = false;
		buttonSnapQP.enabled = true;
		buttonSnapPQ.enabled = true;
		snapQO_clicked = false;
	}
}

buttonReset is Button("reset", "Reset Vectors", 0, 300, true);
proc processReset : reset_clicked {

	if(reset_clicked){
		vectorP is Line(originX, originY, vectorPX, vectorPY, "red");
		vectorQ is Line(originX, originY, vectorQX, vectorQY, "blue");
		originX = originX;
		originY = originY;
		vectorPX is originX+220;
		vectorPY is originY-60;
		vectorQX is originX+100;
		vectorQY is originY-100;
		originX = 540;
		originY = 240;
		vectorAX = originX+unit;
		vectorAY = originY;
		vectorBX = originX;
		vectorBY = originY-unit;
		if(vectorP.x1==originX){
			if(vectorP.y1==originY){
				if(vectorQ.x1==originX){
					if(vectorQ.y1==originY){
						vectorResultAline is Line(vectorPX, vectorPY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
						vectorResultBline is Line(vectorQX, vectorQY, vectorPX+vectorQX-originX, vectorQY-(originY-vectorPY), "green");
					}
				}
			}
		}
		buttonP.enabled = true;
		buttonQ.enabled = true;
		buttonA.enabled = true;
		buttonB.enabled = true;		
		buttonO.enabled = true;
		buttonSnapQP.enabled = true;
		buttonSnapPQ.enabled = true;
		buttonSnapQO.enabled = false;
		buttonSnapPO.enabled = false;
		reset_clicked = false;
	}
}

###########################################

flattenedX is flat(mouseClickX, unit);
flattenedY is flat(mouseClickY, unit);

################################################
picture is [buttonA, buttonB, baseAHead, baseBHead, buttonO, plusSymbQ, eqSymbQ, plusSymbP, eqSymbP, QcoefADiv, QcoefBDiv, PcoefBDiv, PcoefADiv, vectorBrack6, vectorBrack5, vecX5, vecX6, vecY5, vecY6, baseText3, baseText4, vectorBrack2, vecX1, vecX2, vecY1, vecY2, ColumnText1, ColumnText2, buttonReset, buttonSnapQO, buttonSnapPO, buttonSnapPQ, buttonSnapQP, vector_p_text, vector_q_text, vectorActualResult, vectorActualText, vectorResultText, vectorResultAline, vectorResultBline, vectorResultHead, pointQ, vectorQ, vectorQtext, alert, vecX4, vecY4, vectorBrack4, vectorBrack3, resultText, vecY3, vecX3, baseText2, vectorBrack1, baseText, baseAvector, baseAtext, baseBvector, baseBtext, origin, originText, pointP, vectorP, vectorPtext, buttonP, buttonQ];
################################################