Check-in [4ceaad09ba]
Not logged in
Overview
SHA1:4ceaad09ba962f066c93d1b9885a0ab4f82bcc39
Date: 2013-01-05 03:08:42
User: Derek
Comment:got the draw function working.
Timelines: family | ancestors | trunk
Other Links: files | file ages | folders | manifest
Tags And Properties
Context
2013-01-05
03:08
[4ceaad09ba] Leaf: got the draw function working. (user: Derek, tags: trunk)
2013-01-03
20:26
[e9599cdacc] starting basic work on wireframe_model.js wrote some test cases in seperate page (user: Derek, tags: trunk)
Changes

Modified test_wireframe_model.html from [d11af1c4b7] to [4daac9ff13].

    77     77   // uncomment when you want to prove must throw error actually does something
    78     78   // mustThrowError(function(){ }, "check mustthrowerror works. have it do nothing.");
    79     79   
    80     80   
    81     81   
    82     82   
    83     83   
           84  +
           85  +
           86  +window.onload = function(){
           87  +
           88  +	var canvas = document.createElement("canvas");
           89  +	
           90  +	canvas.width = 500;
           91  +	canvas.height = 500;
           92  +	
           93  +	document.body.appendChild(canvas);
           94  +	
           95  +	var ctx = canvas.getContext("2d");
           96  +	
           97  +	
           98  +	var model = new WireframeModel();
           99  +	model.addPoint([0, 0, 0]);
          100  +	model.addPoint([0, .1, 0]);
          101  +	model.addPoint([0, 0, .1]);
          102  +	model.addPoint([-.1, .1, 0]);
          103  +	model.addPoint([-.1, 0, .1]);
          104  +	
          105  +	model.draw(canvas);
          106  +
          107  +
          108  +}
          109  +
    84    110   
    85    111   </script>
    86    112   
    87    113   
    88    114   </head>
    89    115   
    90    116   <body>

Modified wireframe_model.js from [ba994e1850] to [52461a961c].

     7      7   // global namespace object
     8      8   var WireframeModel;
     9      9   
    10     10   
    11     11   (function(){
    12     12   
    13     13   
           14  +
           15  +
           16  +
           17  +// converts a point from three space to the canvas plane.
           18  +// Note: because of depth perspective, this conversion is not
           19  +// easy to define if the point lies behind the camera.
           20  +// There are two options:
           21  +// When drawing a line, another colinear point in front of the camera may be provided
           22  +// to help find an alternate point.
           23  +// if both points lie behind the camera or the colinear_point is not provided,
           24  +// this function will return null.
           25  + 
           26  +function project(canvas, xyz, view, colinear_point){
           27  +    if(!xyz) return null;  // point has been deleted or does not exist
           28  +    
           29  +	var view_transform = view.transform;
           30  +	var origin = view.origin;
           31  +	var zoom_scale = view.zoom_scale;
           32  +	var zoom_dist = view.zoom_dist;
           33  +	
           34  +	if(!zoom_scale) zoom_scale = 1;
           35  +	if(!zoom_dist) zoom_dist = 0;
           36  +	if(!origin) origin = [0,0,0];
           37  +	
           38  +	
           39  +    var w = canvas.width;
           40  +    var h = canvas.height;
           41  +    
           42  +    var scale = Math.min(w, h);
           43  +    
           44  +    var v = xyz.slice(0);
           45  +    if(origin) v = vector_minus(v, origin, v);
           46  +    
           47  +    var z = vector_dot(view_transform[2], v);
           48  +    
           49  +    if(z <= -zoom_dist){  // this point is on the wrong side of the viewer, find the closest point on the correct side if we can.
           50  +        if(!colinear_point) return null;
           51  +        
           52  +        var v2 = colinear_point.slice(0);
           53  +        if(origin) vector_minus(v2, origin, v2);
           54  +        
           55  +        var z2 = vector_dot(view_transform[2], v2);
           56  +        
           57  +        if(z2 < 0) return null;
           58  +        
           59  +        // get the coefficients for a complex combination.
           60  +        // t*z + (1-t)*z2 = 0.0002  -- z of new point is just barely infront of the camera.
           61  +        
           62  +        var t = (0.0002 - z2)/(z - z2);  // no division by zero, z is negative, z2 is positive
           63  +        
           64  +        vector_add(vector_scale(v, t, v),
           65  +                   vector_scale(v2, 1-t, v2),
           66  +                   v);
           67  +                   
           68  +        z = vector_dot(view_transform[2], v); }
           69  +
           70  +        
           71  +    var scale2 = zoom_scale * scale / (zoom_dist + z);
           72  +    
           73  +    return [ scale2 * vector_dot(view_transform[0], v) + 0.5 * w,
           74  +             scale2 * vector_dot(view_transform[1], v) + 0.5 * h ]; }
           75  +
           76  +
           77  +
           78  +//  Just like the project function above but for a set of points.
           79  +//  It's put into a loop a little better.
           80  +function project_all(canvas, points, point_projections, view){
           81  +
           82  +	var view_transform = view.transform;
           83  +	var origin = view.origin;
           84  +	var zoom_scale = view.zoom_scale;
           85  +	var zoom_dist = view.zoom_dist;
           86  +	
           87  +	if(!zoom_scale) zoom_scale = 1;
           88  +	if(!zoom_dist) zoom_dist = 0;
           89  +	if(!origin) origin = [0,0,0];
           90  +	
           91  +
           92  +    if(!point_projections) point_projections = [];
           93  +	point_projections.length = points.length;
           94  +    
           95  +    var w = canvas.width;
           96  +    var h = canvas.height;
           97  +	var w_2 = w/2;
           98  +	var h_2 = h/2;
           99  +    
          100  +    var scale = zoom_scale * Math.min(w, h);
          101  +	
          102  +	var v00 = view_transform[0][0];
          103  +	var v01 = view_transform[0][1];
          104  +	var v02 = view_transform[0][2];
          105  +	var v10 = view_transform[1][0];
          106  +	var v11 = view_transform[1][1];
          107  +	var v12 = view_transform[1][2];
          108  +	var v20 = view_transform[2][0];
          109  +	var v21 = view_transform[2][1];
          110  +	var v22 = view_transform[2][2];
          111  +	
          112  +    
          113  +	for(var i = 0; i < points.length; ++i){
          114  +		var pt = points[i];
          115  +		
          116  +		var x = pt[0];
          117  +		var y = pt[1];
          118  +		var z = pt[2];
          119  +		
          120  +		if(origin){
          121  +	         x -= origin[0];
          122  +			 y -= origin[1];
          123  +			 z -= origin[2]; }
          124  +		
          125  +		var depth = x*v20 + y*v21 + z*v22;
          126  +		var scale2 = scale / (zoom_dist + depth);
          127  +		
          128  +		if(!point_projections[i]) point_projections[i] = [0, 0];
          129  +		
          130  +		var point_projection = point_projections[i];
          131  +		
          132  +		point_projection[0] = scale2 * (x*v00 + y*v01 + z*v02) + w_2;
          133  +		point_projection[1] = scale2 * (x*v10 + y*v11 + z*v22) + h_2; }
          134  +	
          135  +	return point_projections; }
          136  +
          137  +
          138  +
    14    139   
    15    140   //  A wireframe model and all the controls needed to move the camera and draw.
    16    141   //  despite the name, it may also include polygon surfaces.
    17    142   function __WireframeModel(){
    18    143   
    19    144   	var WFMObj = this;
    20    145   	
................................................................................
    22    147   	var view_transform = [[1, 0, 0],
    23    148   	                      [0, 1, 0],
    24    149   						  [0, 0, 1]];
    25    150   
    26    151   
    27    152   
    28    153   	var points = []; //global
    29         -	var solo_points = {};
          154  +	var point_projections = [];
          155  +	//var solo_points = {};
    30    156   	var lines = [];
    31         -	
          157  +	var zoom_scale = 1;
          158  +	var zoom_dist = 1;
    32    159   	
    33    160   	// just because these actual objects is returned
    34    161   	// doesn't mean you should modify it externally if you can help it.
    35    162   	
    36    163   	WFMObj.getPoints = function getPoints(){
    37    164   		return points; }
          165  +		
          166  +	WFMObj.getPoint = function getPoint(index){
          167  +		return points[index].slice(0); }
    38    168   	
    39    169   	WFMObj.getLines = function getLines(){
    40    170   		return lines; }
          171  +		
          172  +	WFMObj.getLine = function getLine(index){
          173  +		return lines[index].slice(0); }
    41    174   	
    42    175   	WFMObj.getViewTransform = function getViewTransform(){
    43    176   		return view_transform; }
    44    177   	
    45    178   	
    46    179   	
    47    180   	WFMObj.addPoint = function addPoint(pt){
................................................................................
    74    207   				throw "pt ref at index " + i + " of line was not an integer: " + ptindex; }
    75    208   			
    76    209   			if(ptindex < 0 || ptindex >= points.length){
    77    210   				throw "pt ref at index " + i + " of line was not in bounds: " + ptindex; }}
    78    211   		
    79    212   		lines.push(line);
    80    213   		return lines.length - 1; }
    81         -				
    82         -	
          214  +
          215  +		
          216  +	WFMObj.draw = function draw(canvas){
          217  +		var ctx = canvas.getContext("2d");
          218  +		
          219  +		var view = {};
          220  +		view.transform = view_transform;
          221  +		view.origin = view_origin;
          222  +		view.zoom_scale = zoom_scale;
          223  +		view.zoom_dist = zoom_dist;
          224  +		
          225  +		project_all(canvas, points, point_projections, view);
          226  +		// project_all()
          227  +		
          228  +		for(var i = 0; i < point_projections.length; ++i){
          229  +			var point_projection = point_projections[i];
          230  +			if(point_projection) ctx.fillRect(point_projection[0] - 1, point_projection[1] - 1, 2, 2); }
          231  +	}
    83    232   }
    84    233   
    85    234   //  use constructor as global namespace object.
    86    235   WireframeModel = __WireframeModel;
    87    236   
    88    237   
    89    238   })();
................................................................................
   112    261       if(cameracentric) offset = matrix_mult(view_transform, [offset])[0];
   113    262       //alert("offset: " + offset);
   114    263       vector_add(origin, offset, origin); }
   115    264   	
   116    265   	
   117    266   	
   118    267   	
   119         -    
          268  +   
   120    269   
   121         -// converts a point from three space to the canvas plane.
   122         -// Note: because of depth perspective, this conversion is not
   123         -// easy to define if the point lies behind the camera.
   124         -// There are two options:
   125         -// When drawing a line, another colinear point in front of the camera may be provided
   126         -// to help find an alertnate point.
   127         -// if both points lie behind the camera or the colinear_point is not provided,
   128         -// this function will return null.
   129         - 
   130         -function project(canvas, xyz, view_transform, origin, colinear_point){
   131         -    if(!xyz) return null;  // point has been deleted or does not exist
   132         -    
   133         -    var w = canvas.width;
   134         -    var h = canvas.height;
   135         -    
   136         -    var scale = Math.min(w, h);
   137         -    
   138         -    var v = xyz.slice(0);
   139         -    if(origin) v = vector_minus(v, origin, v);
   140         -    
   141         -    var z = vector_dot(view_transform[2], v);
   142         -    
   143         -    if(z <= -zoom_dist){
   144         -        if(!colinear_point) return null;
   145         -        
   146         -        var v2 = colinear_point.slice(0);
   147         -        if(origin) vector_minus(v2, origin, v2);
   148         -        
   149         -        var z2 = vector_dot(view_transform[2], v2);
   150         -        
   151         -        if(z2 < 0) return null;
   152         -        
   153         -        // get the coefficients for a complex combination.
   154         -        // t*z + (1-t)*z2 = 0.0002  -- z of new point is just barely infront of the camera.
   155         -        
   156         -        var t = (0.0002 - z2)/(z - z2);  // no division by zero, z is negative, z2 is positive
   157         -        
   158         -        vector_add(vector_scale(v, t, v),
   159         -                   vector_scale(v2, 1-t, v2),
   160         -                   v);
   161         -                   
   162         -        z = vector_dot(view_transform[2], v); }
   163         -
   164         -        
   165         -    var scale2 = zoom_scale * scale / (zoom_dist + z);
   166         -    
   167         -    return [ scale2 * vector_dot(view_transform[0], v) + 0.5 * w,
   168         -             scale2 * vector_dot(view_transform[1], v) + 0.5 * h ]; }
   169    270      
   170    271   
   171    272      
   172    273   //  removes deleted points and lines
   173    274   //  works with global objects.
   174    275   
   175    276   function cleanupDeletedPoints(){