Index: draw.html
==================================================================
--- draw.html
+++ draw.html
@@ -3,45 +3,49 @@
 
 <script>
 
 //  TODO rotate selected points
 //  TODO control with zoom rotate or pan means that action is only applied to the camera not the selected points.
-
-
 //  TODO clicking and dragging on a line allows you to place a point somewhere on that line.  Perhaps with the modifier key it would break up the existing line into line segments.
-
 //  TODO when lines are deleted, readd the solo points to the solo_points list
-//  
-
 //  TODO z for undo shift + z for redo.
-//
 //  TODO 
-//
-
 //  TODO drop down minimalist menu in top right of canvas.
 
 
-//  drag to connect points
+
+//
+//
+//  Global variables
+//
+//  use longer more descriptive names, especially for obscure variables, to avoid conflict in the global space,
+//  even if certain properties are factored into objects, if it is a large object, they work similar to globals in that exist in a large namespace accessible from many functions.
+//
+//  All caps indicates a constant
+//  Some lower case variables may also be constants
+//  Capitalized constants indicate that we expect that variable to remain a constant
+//  even in future code changes, ie statically configured with an initial.
+//
+//
+
 
 
 var canvas;
 var origin = [0, 0, 0];
 var frame_rate = 20;
 var saveTimeout = 10*1000;
-
-var forward_axis_size = 0.1;
-var vertical_axis_size = 0.05;      
-
 
 
 
 // to prevent camera from rotating beyond straight vertical
 var vertical_camera_rotation = 0;
-var zoom_dist = 1;
-var zoom_factor = 0.83;
+
 var zoom_scale = 2.667;  // scalar zoom property.
+var zoom_dist = 1;
 var last_zoom_dist = 1;
+var zoom_factor = 0.83;
+
 
 
 // camera animation
 var max_move_delta = 0.01;
 var max_angle_delta = Math.PI;
@@ -68,41 +72,77 @@
 
 var highlight_object = null;
 var mouse_dragging = false;
 var last_mouse_down = null;
 var mouse_loc = null;
-var MIN_DRAG_DIST = 10;
-var POINT_HIGHLIGHT_DIST = 10;
-var LINE_HIGHLIGHT_DIST = 15;
 
-var MOTION_SPEED_BASE =  2.8;
+
 
 var selected_points = [];
 var selected_lines = [];
 
-var msg = //"3D drawing tool\n\n" +
-          "Select     Left Click\n" +
-		  "Rotate     Right Click\n" +
-		  "Move       wasd, qe\n" +
-		  "Copy       Space\n" +
-		  "Delete     x\n" +
-		  "\n" +
-		  "Click the red dot to create a point\n" +
-	      "Spam a motion key to increase speed\n";		  
-	
-	
+var helpmsg = //"3D drawing tool\n\n" +
+              "Select     Left Click\n" +
+		      "Rotate     Right Click\n" +
+		      "Move       wasd, qe\n" +
+		      "Copy       Space\n" +
+		      "Delete     x\n" +
+		      "\n" +
+		      "Click the red dot to create a point\n" +
+			  "Drag between two points to connect them" +
+	          "Spam a motion key to increase speed\n";
+			  
+var msg = helpmsg;
 
 
 var view_transform =
     [[1, 0, 0],
      [0, 1, 0],
      [0, 0, 1]];
 
-            
 
 var key_state = {};
 var key_state_augmentation_timeout = 150; // the permissible time in milliseconds since the last key event to still allow the key state to augment instead of clearing.
+
+
+
+
+// constants
+var MIN_DRAG_DIST = 10;
+var POINT_HIGHLIGHT_DIST = 10;
+var LINE_HIGHLIGHT_DIST = 15;
+
+var MOTION_SPEED_BASE =  2.8;
+
+var CENTER_POINT_COLOR = "rgba(250, 0, 0, 1.0)";
+var AXIS_POINT_COLOR = "rgba(0, 0, 250, 1.0)";
+
+var CENTER_POINT_RADIUS = 2.5;
+var MIN_AXIS_POINT_RADIUS = 1;
+var MAX_AXIS_POINT_RADIUS = 4;
+var AXIS_LINE_WIDTH = 1.333;
+
+var FORWARD_AXIS_LEN = 0.15;
+var VERTICAL_AXIS_LEN = 0.075;
+
+
+//  The point, line, and fill colors are the same for a reason.
+//  Because all the colors are the same we don't have to worry about occlusion and z-order,
+//  because no matter which order colors are painted onto a pixel, the final result will be the same.
+//  Observe that this assertion holds even with a color with an alpha channel.
+//  This helps us use our 2d canvas happily and not have to worry about draw order or non-sensical visual effects from wrong order.
+//  With transparency we can still see each individual object and it almost mimics occlusion.
+//  This is meant to be a lightweight drawing tool, not a full featured one, so this decision is limiting but fits our goals perfectly.
+
+var POINT_COLOR = "rgba(0, 0, 0, 0.9)";
+var LINE_COLOR = "rgba(0, 0, 0, 0.9)";
+var FILL_COLOR = "rgba(0, 0, 0, 0.9)";
+
+var LINE_WIDTH = 1;
+
+
+
 
 function addKeyListener(keycode, func){
     if(!key_state[keycode]) key_state[keycode] = {};
     
     var key_obj = key_state[keycode];
@@ -582,10 +622,11 @@
     
 	ctx.strokeStyle = "rgba(0, 0, 0, 0.9)";
     ctx.stroke();
     
 	ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
+	
     for(var k in solo_points){
        var pt = point_projections[k];
        if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
         
 	//
@@ -595,58 +636,67 @@
 	//  Because we use a 2d canvas library for the drawing the rest of the points/shapes after projection, these visual information nuances are important.
 	//
 
 	// axis lines and dots
 	
-    var faxis_pt = project(canvas, vector_add(origin, [0, 0, forward_axis_size]), view_transform, origin);
-	var vaxis_pt = project(canvas, vector_add(origin, [0, -vertical_axis_size, 0]), view_transform, origin);
+    var faxis_pt = project(canvas, vector_add(origin, [0, 0, FORWARD_AXIS_LEN]), view_transform, origin);
+	var vaxis_pt = project(canvas, vector_add(origin, [0, -VERTICAL_AXIS_LEN, 0]), view_transform, origin);
 	
-	ctx.fillStyle = "rgba(0,0,0,1.0)";
+	ctx.fillStyle = AXIS_POINT_COLOR;
 	
 	var fdot = vector_dot(view_transform[2], [0, 0, 1]);
-	var fr = 4 - 2.5 * fdot;
+	
+	var a = MIN_AXIS_POINT_RADIUS;  //random letters for intermediate computations
+	var b = MAX_AXIS_POINT_RADIUS;
+	var c = (a+b)/2;
+	var d = (b-a)/2;
+	
+	var fr = c - d * fdot;
 	var vdot = vector_dot(view_transform[2], [0, -1, 0]);
-	var vr = 4 - 2.5 * vdot;
+	var vr = c - d * vdot;
 	
-	ctx.lineWidth = 1.333;
+	ctx.lineWidth = AXIS_LINE_WIDTH;
 	ctx.beginPath();
 	
 	if(fdot >=0 && faxis_pt){ // occlude this axis, draw first
 		ctx.moveTo(w/2, h/2);
 		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
-		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
+		ctx.fillRect(faxis_pt[0] - fr, faxis_pt[1] - fr, 2*fr, 2*fr); }
 		
 	if(vdot >=0 && vaxis_pt){ // occlude this axis, draw first
 		ctx.moveTo(w/2, h/2);
 		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);	
-		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
+		ctx.fillRect(vaxis_pt[0] - vr, vaxis_pt[1] - vr, 2*vr, 2*vr); }
 	
-	ctx.stroke()
+	ctx.stroke();
 	
 		
 	// draw center red square
-	ctx.fillStyle = "rgba(250, 0, 0, 1.0)";
-	ctx.fillRect(w/2 - 3, h/2 - 3, 6, 6);
+	ctx.fillStyle = CENTER_POINT_COLOR;
+	var cr = CENTER_POINT_RADIUS;
+	ctx.fillRect(w/2 - cr, h/2 - cr, 2*cr, 2*cr);
 		
-	ctx.fillStyle = "rgba(0,0,0,1.0)";
-	ctx.beginPath();
+	ctx.fillStyle = AXIS_POINT_COLOR;
+	
 	
 	if(fdot < 0 && faxis_pt){
+		ctx.beginPath();
 		ctx.moveTo(w/2, h/2);
-		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
-		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
+		ctx.lineTo(faxis_pt[0], faxis_pt[1]);
+		ctx.stroke();
+		ctx.fillRect(faxis_pt[0] - fr, faxis_pt[1] - fr, 2*fr, 2*fr); }
 		
 	if(vdot < 0 && vaxis_pt){
+		ctx.beginPath();
 		ctx.moveTo(w/2, h/2);
 		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
-		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
-	
-	ctx.stroke();
+		ctx.stroke();
+		ctx.fillRect(vaxis_pt[0] - vr, vaxis_pt[1] - vr, 2*vr, 2*vr); }
 	
 
 	// reset line width
-	ctx.lineWidth = 1;
+	ctx.lineWidth = LINE_WIDTH;
 	
 	
 
     
 		
@@ -656,11 +706,11 @@
 		
 		if(selected_points[i] == -1)
 			pt = [w/2, h/2];
 		else pt = point_projections[selected_points[i]];
 		
-		ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
+		ctx.fillStyle = POINT_COLOR;
 		if(pt) ctx.fillRect(pt[0] - 4, pt[1] - 4, 8, 8); }
 	
 	
 	if(highlight_object !== null){
 		
@@ -670,11 +720,11 @@
 			if(highlight_object == -1)
 				pt = [w/2, h/2];
 			else pt = point_projections[highlight_object];
 			
 			ctx.fillStyle = "rgba(50, 50, 50, .6)";    
-			ctx.fillRect(pt[0] - 4, pt[1] - 4, 8, 8);
+			ctx.fillRect(pt[0] - 4, pt[1] - 4, 8, 8);  // TODO getting a error here that pt is null 
 			document.body.style.cursor = "hand"; }
 			
 		else if(highlight_object < point_projections.length + line_midpoint_projections.length){
 			// alert("drawing highlighted line");