@@ -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;