html("
<pre>
bgcolour = \"lightblue\";

the2dspace is Rectangle(0,0,600,500, bgcolour);
## this is the full drawing region for the canvas

radius = 1;
px = 300;  py = 250;
origin is Circle(px, py, radius, \"black\", \"black\");
picture is [the2dspace, origin];

contoursize = 50;
circlecolour is \"grey\";
c1 is Circle(px, py, contoursize , bgcolour, circlecolour);
c2 is Circle(px, py, 2*contoursize , bgcolour, circlecolour);
c3 is Circle(px, py, 3*contoursize , bgcolour, circlecolour);
c4 is Circle(px, py, 4*contoursize , bgcolour, circlecolour);
c5 is Circle(px, py, 5*contoursize , bgcolour, circlecolour);
c6 is Circle(px, py, 6*contoursize , bgcolour, circlecolour);
c7 is Circle(px, py, 7*contoursize , bgcolour, circlecolour);
c8 is Circle(px, py, 8*contoursize , bgcolour, circlecolour);
c9 is Circle(px, py, 9*contoursize , bgcolour, circlecolour);

## picture is [the2dspace, origin, c1, c2, c3, c4, c5, c6, c7, c8, c9];
## fails because circle c9 overwhelms everything else

picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, origin];

bgcolour = \"black\";
circlecolour = \"grey\";

origincolour = \"white\";
origin is Circle(px, py, radius, origincolour, origincolour);

l1 is Text(str(int(contoursize)), px + contoursize, py, circlecolour);
l2 is Text(str(int(contoursize*2)), px + contoursize*2, py, circlecolour);
l3 is Text(str(int(contoursize*3)), px + contoursize*3, py, circlecolour);
l4 is Text(str(int(contoursize*4)), px + contoursize*4, py, circlecolour);
l5 is Text(str(int(contoursize*5)), px + contoursize*5, py, circlecolour);
l6 is Text(str(int(contoursize*6)), px + contoursize*6, py, circlecolour);
l7 is Text(str(int(contoursize*7)), px + contoursize*7, py, circlecolour);
l8 is Text(str(int(contoursize*8)), px + contoursize*8, py, circlecolour);
l9 is Text(str(int(contoursize*9)), px + contoursize*9, py, circlecolour);


vectcolour = \"red\";
l is Line(px, py, qx, qy, vectcolour);
## lh is Circle(qx, qy, radius, \"red\", \"red\"); 
## lh stands for \"the head of the line\" - a surrogate arrow
 
lh is Line((4*qx+px)/5, (4*qy+py)/5, qx, qy, \"red\"); 
qx = px; qy = py;

mousePointX = mousePointY = 260;

qx is mousePointX;
qy is mousePointY;

size_l is sqrt((qx-px)*(qx-px)+(qy-py)*(qy-py));
contoursize is size_l;

circlecolour = \"red\";

picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, l9, l8, l7, l6, l5, l4, l3, l2, l1, l, lh, origin];

##########################################################
Px = px; Py = py;
Origin is Circle(Px, Py, radius, \"black\", \"black\");

bgcolour = \"transparent\";
origincolour = \"black\";

Vectcolour = \"green\";

Contoursize = 50;
Circlecolour is \"grey\";
C1 is Circle(Px, Py, Contoursize , bgcolour, Circlecolour);
C2 is Circle(Px, Py, 2*Contoursize , bgcolour, Circlecolour);
C3 is Circle(Px, Py, 3*Contoursize , bgcolour, Circlecolour);
C4 is Circle(Px, Py, 4*Contoursize , bgcolour, Circlecolour);
C5 is Circle(Px, Py, 5*Contoursize , bgcolour, Circlecolour);
C6 is Circle(Px, Py, 6*Contoursize , bgcolour, Circlecolour);
C7 is Circle(Px, Py, 7*Contoursize , bgcolour, Circlecolour);
C8 is Circle(Px, Py, 8*Contoursize , bgcolour, Circlecolour);
C9 is Circle(Px, Py, 9*Contoursize , bgcolour, Circlecolour);

L1 is Text(str(int(Contoursize)), Px + Contoursize, Py, Circlecolour);
L2 is Text(str(int(Contoursize*2)), Px + Contoursize*2, Py, Circlecolour);
L3 is Text(str(int(Contoursize*3)), Px + Contoursize*3, Py, Circlecolour);
L4 is Text(str(int(Contoursize*4)), Px + Contoursize*4, Py, Circlecolour);
L5 is Text(str(int(Contoursize*5)), Px + Contoursize*5, Py, Circlecolour);
L6 is Text(str(int(Contoursize*6)), Px + Contoursize*6, Py, Circlecolour);
L7 is Text(str(int(Contoursize*7)), Px + Contoursize*7, Py, Circlecolour);
L8 is Text(str(int(Contoursize*8)), Px + Contoursize*8, Py, Circlecolour);
L9 is Text(str(int(Contoursize*9)), Px + Contoursize*9, Py, Circlecolour);

L is Line(Px, Py, Qx, Qy, Vectcolour);

## Lh stands for \"the head of the line\" - a surrogate arrow
 
Qx is Px; Qy is Py + 50;
Lh is Line((4*Qx+Px)/5, (4*Qy+Py)/5, Qx, Qy, \"green\"); 

size_L is sqrt((Qx-Px)*(Qx-Px)+(Qy-Py)*(Qy-Py));
Contoursize is size_L;

Circlecolour is \"green\";

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

selected = \"red\";

redvect is Button(\"redvect\", (selected!=\"red\") ? \"Click to select RED\" : \" RED  currently selected\", 650, 10, selected!=\"red\");
greenvect is Button(\"greenvect\", (selected!=\"green\") ? \"Click to select GREEN\" : \"GREEN currently selected\", 650, 40, selected!=\"green\");

picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, l9, l8, l7, l6, l5, l4, l3, l2, l1, l, lh, C9, C8, C7, C6, C5, C4, C3, C2, C1, L9, L8, L7, L6, L5, L4, L3, L2, L1, L, Lh, origin, Origin, redvect, greenvect];

proc selectred : redvect_clicked {
	if (redvect_clicked) {
		selected = \"red\";
	}
}

proc selectgreen : greenvect_clicked {
	if (greenvect_clicked) {
		selected = \"green\";
	}
}

proc setvect : mousePointX, mousePointY {

	if (selected==\"red\") {
		offsetx = mousePointX - px;
		offsety = mousePointY - py;
		qx is offsetx + px;
		qy is offsety + py;
	}
	
	if (selected==\"green\") {
		Offsetx = mousePointX - Px;
		Offsety = mousePointY - Py;
		Qx is Offsetx + Px;
		Qy is Offsety + Py;
	}
	
}

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

## initialise vectors at the origin

px = 300; py = 250; Px = px; Py = py;

## locate \"green + red\"
px = Qx;
py = Qy;

lsnapshot = l;
Lsnapshot = L;

picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, l9, l8, l7, l6, l5, l4, l3, l2, l1, l, lh, C9, C8, C7, C6, C5, C4, C3, C2, C1, L9, L8, L7, L6, L5, L4, L3, L2, L1, L, Lh, origin, Origin, redvect, greenvect, lsnapshot, Lsnapshot];

## re-initialise
px = 300; py = 250; Px = px; Py = py;

## locate \"red + green\"

Px = qx;
Py = qy;

## observe parallelogram law: 'red+green = green+red'

## restore picture to omit lsnapshot and Lsnapshot:

picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, l9, l8, l7, l6, l5, l4, l3, l2, l1, l, lh, C9, C8, C7, C6, C5, C4, C3, C2, C1, L9, L8, L7, L6, L5, L4, L3, L2, L1, L, Lh, origin, Origin, redvect, greenvect];

lsnapshot = l;
Lsnapshot = L;


picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, l9, l8, l7, l6, l5, l4, l3, l2, l1, l, lh, C9, C8, C7, C6, C5, C4, C3, C2, C1, L9, L8, L7, L6, L5, L4, L3, L2, L1, L, Lh, origin, Origin, redvect, greenvect, lsnapshot, Lsnapshot];

px = Qx;
py = Qy;

## with more snapshot - more convenient snapshot - could explore red + red + green / 2 * red + green etc 

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

## re-initialise
px = 300; py = 250; Px = px; Py = py;

## better labelling - based on vector magnitude

l1 is Text(\"1\", qx, qy, circlecolour);
l2 is Text(\"2\", qx*2-px, qy*2-py, circlecolour);
l3 is Text(\"3\", qx*3-px*2, qy*3-py*2, circlecolour);
l4 is Text(\"4\", qx*4-px*3, qy*4-py*3, circlecolour);
l5 is Text(\"5\", qx*5-px*4, qy*5-py*4, circlecolour);
l6 is Text(\"6\", qx*6-px*5, qy*6-py*5, circlecolour);
l7 is Text(\"7\", qx*7-px*6, qy*7-py*6, circlecolour);
l8 is Text(\"8\", qx*8-px*7, qy*8-py*7, circlecolour);
l9 is Text(\"9\", qx*9-px*8, qy*9-py*8, circlecolour);

L1 is Text(\"1\", Qx, Qy, Circlecolour);
L2 is Text(\"2\", Qx*2-Px, Qy*2-Py, Circlecolour);
L3 is Text(\"3\", Qx*3-Px*2, Qy*3-Py*2, Circlecolour);
L4 is Text(\"4\", Qx*4-Px*3, Qy*4-Py*3, Circlecolour);
L5 is Text(\"5\", Qx*5-Px*4, Qy*5-Py*4, Circlecolour);
L6 is Text(\"6\", Qx*6-Px*5, Qy*6-Py*5, Circlecolour);
L7 is Text(\"7\", Qx*7-Px*6, Qy*7-Py*6, Circlecolour);
L8 is Text(\"8\", Qx*8-Px*7, Qy*8-Py*7, Circlecolour);
L9 is Text(\"9\", Qx*9-Px*8, Qy*9-Py*8, Circlecolour);

deselect is Button(\"deselect\", ((selected==\"green\")||(selected==\"red\")) ? \"Click to deselect vectors\" : \"No vector currently selected\", 650, 70, selected!=\"\");

picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, l9, l8, l7, l6, l5, l4, l3, l2, l1, l, lh, C9, C8, C7, C6, C5, C4, C3, C2, C1, L9, L8, L7, L6, L5, L4, L3, L2, L1, L, Lh, origin, Origin, redvect, greenvect, deselect];

proc deselectvect : deselect_clicked {
	if (deselect_clicked) {
		selected = \"\";
	}
}

lambda = 2.5;
extpq is Line(px, py, qx*lambda+px*(1-lambda), qy*lambda+py*(1-lambda), \"grey\");

Lambda = 2.5;
extPQ is Line(Px, Py, Qx*Lambda+Px*(1-Lambda), Qy*Lambda+Py*(1-Lambda), \"grey\");

proc setvect : mousePointX, mousePointY {

	if (selected==\"red\") {
		offsetx = mousePointX - px;
		offsety = mousePointY - py;
		qx is offsetx + px;
		qy is offsety + py;
	}
	
	if (selected==\"green\") {
		Offsetx = mousePointX - Px;
		Offsety = mousePointY - Py;
		Qx is Offsetx + Px;
		Qy is Offsety + Py;
	}
	
	if ((selected==\"\")&&(Px==px)&&(Py==py)) {
		currsetx = mousePointX - Px;
		currsety = mousePointY - Py;
		Rx is currsetx + Px;
		Ry is currsety + Py;
	}
	
}

## set values of lambda / Lambda to reflect quadrant in which will select a point:

lambda = 10.0;
Lambda = 10.0;

targetvect is Line(Px, Py, Rx, Ry, \"lightgrey\");
checksum is Line(Px, Py, Px + (qx-px) * mu + (Qx-Px) * Mu, Py + (qy-py) * mu + (Qy-Py) * Mu, \"lightblue\");

## guessed values for Mu and mu:

Mu = 2.0;
mu = 2.0;

lPQ is Line(Rx, Ry, Rx * (1-Mu) + (Rx - Qx + Px) * Mu,  Ry * (1-Mu) + (Ry - Qy + Py) * Mu, \"blue\");
lpq is Line(Rx, Ry, Rx * (1-mu) + (Rx - qx + px) * mu,  Ry * (1-mu) + (Ry - qy + py) * mu, \"blue\");

picture is [the2dspace, c9, c8, c7, c6, c5, c4, c3, c2, c1, l9, l8, l7, l6, l5, l4, l3, l2, l1, extpq, l, lh, C9, C8, C7, C6, C5, C4, C3, C2, C1, L9, L8, L7, L6, L5, L4, L3, L2, L1, extPQ, L, Lh, origin, Origin, redvect, greenvect, deselect, targetvect, checksum, lPQ, lpq];

## for Rx = mousePointX = 414; and Ry = mousepointY = 260; then get:

Mu = 1.78;
mu = 2.3;

## can also trim the values of lambda / Lambda:

lambda = 2.3;
Lambda = 1.78;
</pre>
");