Check-in [fb2f9f8895]
Not logged in
Overview
SHA1:fb2f9f8895f29e13f3bb846f1e1407ff967c4c9d
Date: 2012-12-24 17:44:14
User: Derek
Comment:improved axes prespective, changed motion speed base.
Timelines: family | ancestors | descendants | both | trunk
Other Links: files | file ages | folders | manifest
Tags And Properties
Context
2012-12-24
19:03
[b454ce1c79] adjusted sizes of center and axis squares. (user: Derek, tags: trunk)
17:44
[fb2f9f8895] improved axes prespective, changed motion speed base. (user: Derek, tags: trunk)
17:03
[d59b29f2f5] changed drawing of axes to provide more visual cues for perspective (user: Derek, tags: trunk)
Changes

Modified draw.html from [b1e8bca2b5] to [936850004e].

    70     70   var mouse_dragging = false;
    71     71   var last_mouse_down = null;
    72     72   var mouse_loc = null;
    73     73   var MIN_DRAG_DIST = 10;
    74     74   var POINT_HIGHLIGHT_DIST = 10;
    75     75   var LINE_HIGHLIGHT_DIST = 15;
    76     76   
           77  +var MOTION_SPEED_BASE =  2.8;
           78  +
    77     79   var selected_points = [];
    78     80   var selected_lines = [];
    79     81   
    80     82   var msg = //"3D drawing tool\n\n" +
    81     83             "Select     Left Click\n" +
    82     84   		  "Rotate     Right Click\n" +
    83     85   		  "Move       wasd, qe\n" +
................................................................................
   203    205   
   204    206       
   205    207   function changeVelocity(direction, positive, state, lastState){
   206    208       if(state == 0){
   207    209           state = lastState;
   208    210           positive = !positive; }  // reverse the velocity
   209    211       
   210         -    var delta = Math.pow(2, state - 1) * max_move_delta / frame_rate;
          212  +    var delta = Math.pow(MOTION_SPEED_BASE, state - 1) * max_move_delta / frame_rate;
   211    213       if(!positive) delta = -delta;
   212    214       
   213    215       var velocityChange = [0, 0, 0];
   214    216       velocityChange[direction] = delta;
   215    217       vector_add(delta_position, velocityChange, delta_position); }
   216    218       
   217    219   
................................................................................
   586    588          var pt = point_projections[k];
   587    589          if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
   588    590           
   589    591   	//
   590    592   	//  The following drawing of axes is to help provide an perspective
   591    593   	//  The nuances of this draw behavior are created to provide visual cues for interpreting perspective and depth.
   592    594   	//  
          595  +	//  Because we use a 2d canvas library for the drawing the rest of the points/shapes after projection, these visual information nuances are important.
   593    596   	//
   594    597   
   595    598   	// axis lines and dots
   596         -	ctx.beginPath();
          599  +	
   597    600       var faxis_pt = project(canvas, vector_add(origin, [0, 0, forward_axis_size]), view_transform, origin);
   598    601   	var vaxis_pt = project(canvas, vector_add(origin, [0, -vertical_axis_size, 0]), view_transform, origin);
   599    602   	
   600         -	ctx.fillStyle = "rgba(0,0,0,0.9)";
          603  +	ctx.fillStyle = "rgba(0,0,0,1.0)";
   601    604   	
   602         -	var dot = vector_dot(view_transform[2], [0, 0, 1]);
   603         -	var r = 3.2 - 1.8 * dot;
          605  +	var fdot = vector_dot(view_transform[2], [0, 0, 1]);
          606  +	var fr = 4 - 2.5 * fdot;
          607  +	var vdot = vector_dot(view_transform[2], [0, -1, 0]);
          608  +	var vr = 4 - 2.5 * vdot;
   604    609   	
   605    610   	ctx.lineWidth = 1.333;
          611  +	ctx.beginPath();
          612  +	
          613  +	if(fdot >=0 && faxis_pt){ // occlude this axis, draw first
          614  +		ctx.moveTo(w/2, h/2);
          615  +		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
          616  +		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
          617  +		
          618  +	if(vdot >=0 && vaxis_pt){ // occlude this axis, draw first
          619  +		ctx.moveTo(w/2, h/2);
          620  +		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);	
          621  +		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
          622  +	
          623  +	ctx.stroke()
   606    624   	
   607         -	if(dot < 0){  // draw red square first to partially occlude with axes
   608         -		ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
   609         -		ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4); }
   610    625   		
   611         -	ctx.fillStyle = "rgba(0,0,0,0.9)";
          626  +	// draw center red square
          627  +	ctx.fillStyle = "rgba(250, 0, 0, 1.0)";
          628  +	ctx.fillRect(w/2 - 3, h/2 - 3, 6, 6);
          629  +		
          630  +	ctx.fillStyle = "rgba(0,0,0,1.0)";
          631  +	ctx.beginPath();
   612    632   	
   613         -	if(faxis_pt){
          633  +	if(fdot < 0 && faxis_pt){
   614    634   		ctx.moveTo(w/2, h/2);
   615    635   		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
   616         -		ctx.fillRect(faxis_pt[0] - r/2, faxis_pt[1] - r/2, r, r); }
          636  +		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
   617    637   		
   618         -	if(vaxis_pt){
          638  +	if(vdot < 0 && vaxis_pt){
   619    639   		ctx.moveTo(w/2, h/2);
   620    640   		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
   621         -		ctx.fillRect(vaxis_pt[0] - 2, vaxis_pt[1] - 2, 4, 4); }
          641  +		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
   622    642   	
   623    643   	ctx.stroke();
   624    644   	
   625         -	if(dot >= 0){  // draw red square last so it is not occluded by axes
   626         -		ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
   627         -		ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4); }
   628         -		
          645  +
          646  +	// reset line width
   629    647   	ctx.lineWidth = 1;
   630    648   	
   631    649   	
   632    650   
   633    651       
   634    652   		
   635    653