Check-in [b454ce1c79]
Not logged in
Overview
SHA1:b454ce1c7923771bfe316f4e19b5da5b6a8f8e55
Date: 2012-12-24 19:03:36
User: Derek
Comment:adjusted sizes of center and axis squares.
Timelines: family | ancestors | descendants | both | trunk
Other Links: files | file ages | folders | manifest
Tags And Properties
Context
2012-12-27
20:24
[29f4bb3e29] started working on some changes for rotating and scaling selected points. (user: Derek, tags: trunk)
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)
Changes

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

     1      1   <html>
     2      2   <script src='matrix_vector_lib.js' ></script>
     3      3   
     4      4   <script>
     5      5   
     6      6   //  TODO rotate selected points
     7      7   //  TODO control with zoom rotate or pan means that action is only applied to the camera not the selected points.
     8         -
     9         -
    10      8   //  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.
    11         -
    12      9   //  TODO when lines are deleted, readd the solo points to the solo_points list
    13         -//  
    14         -
    15     10   //  TODO z for undo shift + z for redo.
    16         -//
    17     11   //  TODO 
    18         -//
    19         -
    20     12   //  TODO drop down minimalist menu in top right of canvas.
    21     13   
    22     14   
    23         -//  drag to connect points
           15  +
           16  +//
           17  +//
           18  +//  Global variables
           19  +//
           20  +//  use longer more descriptive names, especially for obscure variables, to avoid conflict in the global space,
           21  +//  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.
           22  +//
           23  +//  All caps indicates a constant
           24  +//  Some lower case variables may also be constants
           25  +//  Capitalized constants indicate that we expect that variable to remain a constant
           26  +//  even in future code changes, ie statically configured with an initial.
           27  +//
           28  +//
           29  +
    24     30   
    25     31   
    26     32   var canvas;
    27     33   var origin = [0, 0, 0];
    28     34   var frame_rate = 20;
    29     35   var saveTimeout = 10*1000;
    30         -
    31         -var forward_axis_size = 0.1;
    32         -var vertical_axis_size = 0.05;      
    33         -
    34     36   
    35     37   
    36     38   
    37     39   // to prevent camera from rotating beyond straight vertical
    38     40   var vertical_camera_rotation = 0;
    39         -var zoom_dist = 1;
    40         -var zoom_factor = 0.83;
           41  +
    41     42   var zoom_scale = 2.667;  // scalar zoom property.
           43  +var zoom_dist = 1;
    42     44   var last_zoom_dist = 1;
           45  +var zoom_factor = 0.83;
           46  +
    43     47   
    44     48   
    45     49   // camera animation
    46     50   var max_move_delta = 0.01;
    47     51   var max_angle_delta = Math.PI;
    48     52   
    49     53   var delta_horizontal_angle = 0;
................................................................................
    66     70   var point_projections = [];
    67     71   var line_midpoint_projections = [];
    68     72   
    69     73   var highlight_object = null;
    70     74   var mouse_dragging = false;
    71     75   var last_mouse_down = null;
    72     76   var mouse_loc = null;
    73         -var MIN_DRAG_DIST = 10;
    74         -var POINT_HIGHLIGHT_DIST = 10;
    75         -var LINE_HIGHLIGHT_DIST = 15;
    76     77   
    77         -var MOTION_SPEED_BASE =  2.8;
           78  +
    78     79   
    79     80   var selected_points = [];
    80     81   var selected_lines = [];
    81     82   
    82         -var msg = //"3D drawing tool\n\n" +
    83         -          "Select     Left Click\n" +
    84         -		  "Rotate     Right Click\n" +
    85         -		  "Move       wasd, qe\n" +
    86         -		  "Copy       Space\n" +
    87         -		  "Delete     x\n" +
    88         -		  "\n" +
    89         -		  "Click the red dot to create a point\n" +
    90         -	      "Spam a motion key to increase speed\n";		  
    91         -	
    92         -	
           83  +var helpmsg = //"3D drawing tool\n\n" +
           84  +              "Select     Left Click\n" +
           85  +		      "Rotate     Right Click\n" +
           86  +		      "Move       wasd, qe\n" +
           87  +		      "Copy       Space\n" +
           88  +		      "Delete     x\n" +
           89  +		      "\n" +
           90  +		      "Click the red dot to create a point\n" +
           91  +			  "Drag between two points to connect them" +
           92  +	          "Spam a motion key to increase speed\n";
           93  +			  
           94  +var msg = helpmsg;
    93     95   
    94     96   
    95     97   var view_transform =
    96     98       [[1, 0, 0],
    97     99        [0, 1, 0],
    98    100        [0, 0, 1]];
    99    101   
   100         -            
   101    102   
   102    103   var key_state = {};
   103    104   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.
          105  +
          106  +
          107  +
          108  +
          109  +// constants
          110  +var MIN_DRAG_DIST = 10;
          111  +var POINT_HIGHLIGHT_DIST = 10;
          112  +var LINE_HIGHLIGHT_DIST = 15;
          113  +
          114  +var MOTION_SPEED_BASE =  2.8;
          115  +
          116  +var CENTER_POINT_COLOR = "rgba(250, 0, 0, 1.0)";
          117  +var AXIS_POINT_COLOR = "rgba(0, 0, 250, 1.0)";
          118  +
          119  +var CENTER_POINT_RADIUS = 2.5;
          120  +var MIN_AXIS_POINT_RADIUS = 1;
          121  +var MAX_AXIS_POINT_RADIUS = 4;
          122  +var AXIS_LINE_WIDTH = 1.333;
          123  +
          124  +var FORWARD_AXIS_LEN = 0.15;
          125  +var VERTICAL_AXIS_LEN = 0.075;
          126  +
          127  +
          128  +//  The point, line, and fill colors are the same for a reason.
          129  +//  Because all the colors are the same we don't have to worry about occlusion and z-order,
          130  +//  because no matter which order colors are painted onto a pixel, the final result will be the same.
          131  +//  Observe that this assertion holds even with a color with an alpha channel.
          132  +//  This helps us use our 2d canvas happily and not have to worry about draw order or non-sensical visual effects from wrong order.
          133  +//  With transparency we can still see each individual object and it almost mimics occlusion.
          134  +//  This is meant to be a lightweight drawing tool, not a full featured one, so this decision is limiting but fits our goals perfectly.
          135  +
          136  +var POINT_COLOR = "rgba(0, 0, 0, 0.9)";
          137  +var LINE_COLOR = "rgba(0, 0, 0, 0.9)";
          138  +var FILL_COLOR = "rgba(0, 0, 0, 0.9)";
          139  +
          140  +var LINE_WIDTH = 1;
          141  +
          142  +
          143  +
   104    144   
   105    145   function addKeyListener(keycode, func){
   106    146       if(!key_state[keycode]) key_state[keycode] = {};
   107    147       
   108    148       var key_obj = key_state[keycode];
   109    149       if(!key_obj.listeners) key_obj.listeners = [];
   110    150       
................................................................................
   580    620       ctx.clearRect(0, 0, w, h);
   581    621   	
   582    622       
   583    623   	ctx.strokeStyle = "rgba(0, 0, 0, 0.9)";
   584    624       ctx.stroke();
   585    625       
   586    626   	ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
          627  +	
   587    628       for(var k in solo_points){
   588    629          var pt = point_projections[k];
   589    630          if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
   590    631           
   591    632   	//
   592    633   	//  The following drawing of axes is to help provide an perspective
   593    634   	//  The nuances of this draw behavior are created to provide visual cues for interpreting perspective and depth.
   594    635   	//  
   595    636   	//  Because we use a 2d canvas library for the drawing the rest of the points/shapes after projection, these visual information nuances are important.
   596    637   	//
   597    638   
   598    639   	// axis lines and dots
   599    640   	
   600         -    var faxis_pt = project(canvas, vector_add(origin, [0, 0, forward_axis_size]), view_transform, origin);
   601         -	var vaxis_pt = project(canvas, vector_add(origin, [0, -vertical_axis_size, 0]), view_transform, origin);
          641  +    var faxis_pt = project(canvas, vector_add(origin, [0, 0, FORWARD_AXIS_LEN]), view_transform, origin);
          642  +	var vaxis_pt = project(canvas, vector_add(origin, [0, -VERTICAL_AXIS_LEN, 0]), view_transform, origin);
   602    643   	
   603         -	ctx.fillStyle = "rgba(0,0,0,1.0)";
          644  +	ctx.fillStyle = AXIS_POINT_COLOR;
   604    645   	
   605    646   	var fdot = vector_dot(view_transform[2], [0, 0, 1]);
   606         -	var fr = 4 - 2.5 * fdot;
          647  +	
          648  +	var a = MIN_AXIS_POINT_RADIUS;  //random letters for intermediate computations
          649  +	var b = MAX_AXIS_POINT_RADIUS;
          650  +	var c = (a+b)/2;
          651  +	var d = (b-a)/2;
          652  +	
          653  +	var fr = c - d * fdot;
   607    654   	var vdot = vector_dot(view_transform[2], [0, -1, 0]);
   608         -	var vr = 4 - 2.5 * vdot;
          655  +	var vr = c - d * vdot;
   609    656   	
   610         -	ctx.lineWidth = 1.333;
          657  +	ctx.lineWidth = AXIS_LINE_WIDTH;
   611    658   	ctx.beginPath();
   612    659   	
   613    660   	if(fdot >=0 && faxis_pt){ // occlude this axis, draw first
   614    661   		ctx.moveTo(w/2, h/2);
   615    662   		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
   616         -		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
          663  +		ctx.fillRect(faxis_pt[0] - fr, faxis_pt[1] - fr, 2*fr, 2*fr); }
   617    664   		
   618    665   	if(vdot >=0 && vaxis_pt){ // occlude this axis, draw first
   619    666   		ctx.moveTo(w/2, h/2);
   620    667   		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);	
   621         -		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
          668  +		ctx.fillRect(vaxis_pt[0] - vr, vaxis_pt[1] - vr, 2*vr, 2*vr); }
   622    669   	
   623         -	ctx.stroke()
          670  +	ctx.stroke();
   624    671   	
   625    672   		
   626    673   	// draw center red square
   627         -	ctx.fillStyle = "rgba(250, 0, 0, 1.0)";
   628         -	ctx.fillRect(w/2 - 3, h/2 - 3, 6, 6);
          674  +	ctx.fillStyle = CENTER_POINT_COLOR;
          675  +	var cr = CENTER_POINT_RADIUS;
          676  +	ctx.fillRect(w/2 - cr, h/2 - cr, 2*cr, 2*cr);
   629    677   		
   630         -	ctx.fillStyle = "rgba(0,0,0,1.0)";
   631         -	ctx.beginPath();
          678  +	ctx.fillStyle = AXIS_POINT_COLOR;
          679  +	
   632    680   	
   633    681   	if(fdot < 0 && faxis_pt){
          682  +		ctx.beginPath();
   634    683   		ctx.moveTo(w/2, h/2);
   635         -		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
   636         -		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
          684  +		ctx.lineTo(faxis_pt[0], faxis_pt[1]);
          685  +		ctx.stroke();
          686  +		ctx.fillRect(faxis_pt[0] - fr, faxis_pt[1] - fr, 2*fr, 2*fr); }
   637    687   		
   638    688   	if(vdot < 0 && vaxis_pt){
          689  +		ctx.beginPath();
   639    690   		ctx.moveTo(w/2, h/2);
   640    691   		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
   641         -		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
   642         -	
   643         -	ctx.stroke();
          692  +		ctx.stroke();
          693  +		ctx.fillRect(vaxis_pt[0] - vr, vaxis_pt[1] - vr, 2*vr, 2*vr); }
   644    694   	
   645    695   
   646    696   	// reset line width
   647         -	ctx.lineWidth = 1;
          697  +	ctx.lineWidth = LINE_WIDTH;
   648    698   	
   649    699   	
   650    700   
   651    701       
   652    702   		
   653    703   	
   654    704   	for(var i = 0; i < selected_points.length; ++i){
   655    705   		var pt;
   656    706   		
   657    707   		if(selected_points[i] == -1)
   658    708   			pt = [w/2, h/2];
   659    709   		else pt = point_projections[selected_points[i]];
   660    710   		
   661         -		ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
          711  +		ctx.fillStyle = POINT_COLOR;
   662    712   		if(pt) ctx.fillRect(pt[0] - 4, pt[1] - 4, 8, 8); }
   663    713   	
   664    714   	
   665    715   	if(highlight_object !== null){
   666    716   		
   667    717   		
   668    718   		if(highlight_object < point_projections.length){
   669    719   			var pt;
   670    720   			if(highlight_object == -1)
   671    721   				pt = [w/2, h/2];
   672    722   			else pt = point_projections[highlight_object];
   673    723   			
   674    724   			ctx.fillStyle = "rgba(50, 50, 50, .6)";    
   675         -			ctx.fillRect(pt[0] - 4, pt[1] - 4, 8, 8);
          725  +			ctx.fillRect(pt[0] - 4, pt[1] - 4, 8, 8);  // TODO getting a error here that pt is null 
   676    726   			document.body.style.cursor = "hand"; }
   677    727   			
   678    728   		else if(highlight_object < point_projections.length + line_midpoint_projections.length){
   679    729   			// alert("drawing highlighted line");
   680    730   			
   681    731   			var line = lines[highlight_object - point_projections.length];
   682    732   			if(line){