Check-in [d59b29f2f5]
Not logged in
Overview
SHA1:d59b29f2f5f1034baad0d317f823186d8030e97d
Date: 2012-12-24 17:03:45
User: Derek
Comment:changed drawing of axes to provide more visual cues for perspective
Timelines: family | ancestors | descendants | both | trunk
Other Links: files | file ages | folders | manifest
Tags And Properties
Context
2012-12-24
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)
04:23
[17fe78b11b] (no comment) (user: Derek, tags: trunk)
Changes

Modified draw.html from [6762019ffe] to [b1e8bca2b5].

    48     48   
    49     49   var delta_horizontal_angle = 0;
    50     50   var delta_vertical_angle = 0;
    51     51   var delta_position = [0,0,0];
    52     52   
    53     53   
    54     54   //  Use to rotate selected points about a vector line
    55         -var selection_rotation_vector = null;
           55  +var selection_rotation_axis = null;
    56     56   var rotation_center = origin.slice(0);
    57     57   
    58     58   
    59     59   
    60     60   
    61     61   
    62     62   var points = []; //global
................................................................................
   394    394   
   395    395   
   396    396   function writeMsg(canvas, msg){
   397    397   	var lines = msg.split("\n");
   398    398   	var ctx = canvas.getContext("2d");
   399    399   	ctx.font = "9pt sans-serif"
   400    400   	for(var i = 0; i < lines.length; ++i){
   401         -		ctx.fillText(lines[i], 5, 10 + 15 *  i); }}
          401  +		ctx.fillText(lines[i], 5, 10 + 16 *  i); }}
   402    402   
   403    403       
   404    404   //  camera functions
   405    405   
   406    406   function rotateView(norm, theta, cameracentric){
   407    407   
   408    408       // camera centric uses the camera axes to perform the rotation instead of the space axes.   
   409    409       if(cameracentric) norm = matrix_mult(view_transform, [norm])[0];
   410    410       var rotation = vector_rotation(norm, theta);
   411    411       
   412    412       view_transform = matrix_mult(rotation, view_transform); }
          413  +	
          414  +	
          415  +function rotatePoint(point, axis, angle, center){
          416  +}
   413    417       
   414    418       
   415    419       
   416    420   function rotateHorizontal(theta){
   417    421       rotateView([0, 1, 0], theta, false); }
   418    422       
   419    423   function rotateVertical(theta){
................................................................................
   578    582       ctx.stroke();
   579    583       
   580    584   	ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
   581    585       for(var k in solo_points){
   582    586          var pt = point_projections[k];
   583    587          if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
   584    588           
   585         -    
          589  +	//
          590  +	//  The following drawing of axes is to help provide an perspective
          591  +	//  The nuances of this draw behavior are created to provide visual cues for interpreting perspective and depth.
          592  +	//  
          593  +	//
   586    594   
   587    595   	// axis lines and dots
   588    596   	ctx.beginPath();
   589         -    var faxis_pt = project(canvas, vector_add(origin, [0, 0, forward_axis_size, 0, 0]), view_transform, origin);
          597  +    var faxis_pt = project(canvas, vector_add(origin, [0, 0, forward_axis_size]), view_transform, origin);
   590    598   	var vaxis_pt = project(canvas, vector_add(origin, [0, -vertical_axis_size, 0]), view_transform, origin);
   591    599   	
   592    600   	ctx.fillStyle = "rgba(0,0,0,0.9)";
   593    601   	
          602  +	var dot = vector_dot(view_transform[2], [0, 0, 1]);
          603  +	var r = 3.2 - 1.8 * dot;
          604  +	
          605  +	ctx.lineWidth = 1.333;
          606  +	
          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  +		
          611  +	ctx.fillStyle = "rgba(0,0,0,0.9)";
          612  +	
   594    613   	if(faxis_pt){
   595    614   		ctx.moveTo(w/2, h/2);
   596         -		ctx.lineTo(faxis_pt[0], faxis_pt[1]);
   597         -		ctx.fillRect(faxis_pt[0] - 2, faxis_pt[1] - 2, 4, 4); }
          615  +		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
          616  +		ctx.fillRect(faxis_pt[0] - r/2, faxis_pt[1] - r/2, r, r); }
   598    617   		
   599    618   	if(vaxis_pt){
   600    619   		ctx.moveTo(w/2, h/2);
   601    620   		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
   602    621   		ctx.fillRect(vaxis_pt[0] - 2, vaxis_pt[1] - 2, 4, 4); }
          622  +	
          623  +	ctx.stroke();
          624  +	
          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); }
   603    628   		
   604         -	ctx.stroke();	
          629  +	ctx.lineWidth = 1;
   605    630   	
   606    631   	
   607    632   
   608         -    // red center dot.
   609         -	ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
   610         -	ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4);
          633  +    
   611    634   		
   612    635   	
   613    636   	for(var i = 0; i < selected_points.length; ++i){
   614    637   		var pt;
   615    638   		
   616    639   		if(selected_points[i] == -1)
   617    640   			pt = [w/2, h/2];