Index: draw.html
==================================================================
--- draw.html
+++ draw.html
@@ -72,10 +72,12 @@
 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" +
@@ -205,11 +207,11 @@
 function changeVelocity(direction, positive, state, lastState){
     if(state == 0){
         state = lastState;
         positive = !positive; }  // reverse the velocity
     
-    var delta = Math.pow(2, state - 1) * max_move_delta / frame_rate;
+    var delta = Math.pow(MOTION_SPEED_BASE, state - 1) * max_move_delta / frame_rate;
     if(!positive) delta = -delta;
     
     var velocityChange = [0, 0, 0];
     velocityChange[direction] = delta;
     vector_add(delta_position, velocityChange, delta_position); }
@@ -588,46 +590,62 @@
         
 	//
 	//  The following drawing of axes is to help provide an perspective
 	//  The nuances of this draw behavior are created to provide visual cues for interpreting perspective and depth.
 	//  
+	//  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
-	ctx.beginPath();
+	
     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);
 	
-	ctx.fillStyle = "rgba(0,0,0,0.9)";
+	ctx.fillStyle = "rgba(0,0,0,1.0)";
 	
-	var dot = vector_dot(view_transform[2], [0, 0, 1]);
-	var r = 3.2 - 1.8 * dot;
+	var fdot = vector_dot(view_transform[2], [0, 0, 1]);
+	var fr = 4 - 2.5 * fdot;
+	var vdot = vector_dot(view_transform[2], [0, -1, 0]);
+	var vr = 4 - 2.5 * vdot;
 	
 	ctx.lineWidth = 1.333;
-	
-	if(dot < 0){  // draw red square first to partially occlude with axes
-		ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
-		ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4); }
-		
-	ctx.fillStyle = "rgba(0,0,0,0.9)";
-	
-	if(faxis_pt){
+	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); }
+		
+	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.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 = "rgba(0,0,0,1.0)";
+	ctx.beginPath();
+	
+	if(fdot < 0 && faxis_pt){
 		ctx.moveTo(w/2, h/2);
 		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
-		ctx.fillRect(faxis_pt[0] - r/2, faxis_pt[1] - r/2, r, r); }
+		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
 		
-	if(vaxis_pt){
+	if(vdot < 0 && vaxis_pt){
 		ctx.moveTo(w/2, h/2);
 		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
-		ctx.fillRect(vaxis_pt[0] - 2, vaxis_pt[1] - 2, 4, 4); }
+		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
 	
 	ctx.stroke();
 	
-	if(dot >= 0){  // draw red square last so it is not occluded by axes
-		ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
-		ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4); }
-		
+
+	// reset line width
 	ctx.lineWidth = 1;