Check-in [1bc6e97248]
Not logged in
Overview
SHA1:1bc6e97248650e3b7913011f74d36314d56f1c3d
Date: 2012-12-23 19:18:39
User: Derek
Comment:removed superfulous code and comments. updated TODOs
Timelines: family | ancestors | descendants | both | trunk
Other Links: files | file ages | folders | manifest
Tags And Properties
Context
2012-12-24
03:52
[7c222a4184] moved globals to beginning of draw.html added some null checking to matrix_vector_lib.js fixed small bugs (zooming in to much messes up axis draw) (user: Derek, tags: trunk)
2012-12-23
19:18
[1bc6e97248] removed superfulous code and comments. updated TODOs (user: Derek, tags: trunk)
18:51
[257c455196] initial commit (user: Derek, tags: trunk)
Changes

Modified draw.html from [e44e8eb350] to [d50a5e8508].

     1      1   <html>
     2      2   <script src='matrix_vector_lib.js' ></script>
     3      3   
     4      4   <script>
     5      5   
     6         -//
     7         -//  Editor modes
     8         -//
     9         -//  Motion mode  -- change the camera center using the original movement system
    10         -//  --------Camera mode  -- adjust the camera,  scale zoom and position zoom, make it stationary or rotating about the center
    11         -//  Edit mode -- create points at camera center, move points, create lines by clicking on successive points, create closed polygons etc.
    12      6   
    13         -//  Editing Strategy
            7  +//  TODO control with zoom rotate or pan means that action is only applied to the camera not the selected points.
    14      8   
    15         -//  During draw mode only the very edges of the screen rotate the view, and at reduced speed
    16         -//  pressing enter or clicking on the center point creates a new point.
    17         -//  points are moved with the arrow keys, the direction is absolute, that means it does not depend on the camera angle.
    18         -//  the arrow keys move the selected point.
    19         -// clicking on a second point when one point is already selected creates a line.
    20      9   
    21         -//  TODO  control with zoom scales the selected object
    22         -//        control with rotate rotates the selected objects
    23         -
    24         -//  TODO clicking and dragging on a line allows you to place a point somewhere on that line.  Perhaps with the ctrl key it would break up the existing line into line segments.
           10  +//  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.
    25     11   
    26     12   //  TODO when lines are deleted, readd the solo points to the solo_points list
    27     13   //  
    28     14   
    29     15   //  TODO z for undo shift + z for redo.
    30     16   //
    31     17   
................................................................................
   131    117           var button = event.button;
   132    118           var keycode = button + 1000;  //treat clicks like a button press but with higher keycode.
   133    119           keyDown({keyCode: keycode}); }  // it seems the keyCode of the original event cant be overwritten.
   134    120           
   135    121       document.body.onmousewheel = function(event){
   136    122           var delta = event.wheelDelta;
   137    123           
   138         -        //if(editor_mode == MODE_DRAWING){
   139    124   		if(delta < 0)
   140    125   			zoom_dist /= zoom_factor;
   141    126   		else if(delta > 0)
   142    127   			zoom_dist *= zoom_factor; }
   143    128           
   144    129           
   145    130       document.body.onmouseup = function(event){
................................................................................
   185    170       changeVelocity(2, false, s, lasts); }
   186    171       
   187    172   function forwardPress(e, s, lasts){
   188    173       changeVelocity(2, true, s, lasts); }
   189    174           
   190    175           
   191    176   function zoomInPress(e, s, lasts){
   192         -    //if(editor_mode == MODE_CAMERA_POSITION)
   193         -    //    changeVelocity(2, true, s, lasts);
   194         -    //else if(editor_mode == MODE_CAMERA_ROTATION)
   195         -        zoom_dist *= zoom_factor; }
          177  +    zoom_dist *= zoom_factor; }
   196    178           
   197    179           
   198    180   function zoomOutPress(e, s, lasts){
   199         -    //if(editor_mode == MODE_CAMERA_POSITION)
   200         -    //    changeVelocity(2, true, s, lasts);
   201         -    //else if(editor_mode == MODE_CAMERA_ROTATION)
   202         -        zoom_dist *= zoom_factor; }
          181  +    zoom_dist *= zoom_factor; }
   203    182   
   204    183   
   205    184   function copySelectedPoints(e, s, lasts){
   206    185       if(s){
   207    186           var new_selection = [];
   208    187           var selection_map = {};
   209    188           
................................................................................
   246    225   addKeyListener(83, backwardPress);
   247    226   addKeyListener(69, upPress);
   248    227   addKeyListener(81, downPress);
   249    228   
   250    229   
   251    230   addKeyListener(88, function(e, s, lasts){  // x
   252    231   
   253         -    //if(editor_mode == MODE_DRAWING && s){  // alert('deleting points');
   254         -	
   255    232       if(s){
   256    233           if(highlight_object !== null && highlight_object > 0){  // delete highlighted object
   257    234               
   258    235               if(highlight_object < point_projections.length){  // point
   259    236                   points[highlight_object] = null; }
   260    237                   
   261    238               else if(highlight_object < point_projections.length + line_midpoint_projections.length){  // line
................................................................................
   267    244                   points[selected_points[i]] = null; }
   268    245               selected_points.length = 0; }
   269    246           
   270    247           cleanupDeletedPoints();
   271    248           highlight_object = null;
   272    249           selected_points.length = 0; }});
   273    250   
   274         -// addKeyListener(1000, aForwardPress);    // mouse buttons
   275         -// addKeyListener(1002, cameraBackwardPress);
   276         -
   277         -
   278         -
   279         -// addKeyListener(13, function(e, s, lasts){ if(s) nextMode(); });  // switch modes
   280         -
   281         -
          251  +		
   282    252   //  select point
   283    253   addKeyListener(1000, function(e, s, lasts){
   284    254   
   285         -    //if(editor_mode == MODE_DRAWING){
   286         -        if(s){
   287         -            if(highlight_object !== null){
   288         -                if(highlight_object == -1)
   289         -                    highlight_object = addPoint(origin);  // create a new point at the origin
   290         -                    
   291         -                
   292         -                var alreadySelected = false;  // only set for shift clicks
   293         -                
   294         -                if(key_state[16] && key_state[16].state){  // shift key is pressed.
   295         -                
   296         -                    for(var i = 0; i < selected_points.length; ++i){
   297         -                        if(selected_points[i] == highlight_object){
   298         -                           selected_points.splice(i, 1); // deselect point
   299         -                           alreadySelected = true; 
   300         -                           break; }}}
   301         -                else{
   302         -                    selected_points.length = 0;}
   303         -                    
   304         -                if(!alreadySelected) selected_points.push(highlight_object); }
   305         -
   306         -            else if(!key_state[16] || !key_state[16].state)
   307         -                selected_points.length = 0; }
   308         -            
   309         -            
   310         -        else if(lasts && mouse_dragging ){  // drag actions
   311         -            
   312         -            //  connect selected points to highlight point with lines
   313         -            if(selected_points.length && (!key_state[16] || !key_state[16].state)){  //  TODO right now this really only works for drawing a single line, 
   314         -            
   315         -                if(highlight_object !== null && highlight_object < point_projections.length){
   316         -                    if(highlight_object == -1) highlight_object = addPoint(origin);
   317         -                    
   318         -                    for(var i = 0; i < selected_points.length; ++i){
   319         -                        var pt = selected_points[i];
   320         -                        if(pt == highlight_object) continue;
   321         -                        addLine(pt, highlight_object); }
   322         -                    selected_points.length = 0; }}
   323         -                
   324         -            // select points inside selection rectangle
   325         -            else if(mouse_loc && last_mouse_down){ 
   326         -            
   327         -                var minx = Math.min(mouse_loc[0], last_mouse_down[0]);
   328         -                var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
   329         -                var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
   330         -                var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
   331         -                
   332         -                
   333         -                var selected_point_map = {};             
   334         -                
   335         -                if(!key_state[16] || !key_state[16].state){
   336         -                    selected_points.length = 0;
   337         -                    selected_lines.length = 0; }
   338         -                else{
   339         -                    for(var i = 0; i < selected_points.length; ++i){
   340         -                        selected_point_map[selected_points[i]] = i; }}
   341         -                
   342         -                for(var i = 0; i < point_projections.length; ++i){
   343         -                    if(selected_point_map[i]) continue; // already selected.
   344         -                    
   345         -                    var pt = point_projections[i];
   346         -                    if(!pt) continue;
   347         -                    var _x = pt[0];
   348         -                    var _y = pt[1];
   349         -                    
   350         -                    if(minx < _x && _x < maxx
   351         -                     && miny < _y && _y < maxy){
   352         -                       selected_points.push(i); }}}                
          255  +	if(s){
          256  +		if(highlight_object !== null){
          257  +			if(highlight_object == -1)
          258  +				highlight_object = addPoint(origin);  // create a new point at the origin
          259  +				
          260  +			
          261  +			var alreadySelected = false;  // only set for shift clicks
          262  +			
          263  +			if(key_state[16] && key_state[16].state){  // shift key is pressed.
          264  +			
          265  +				for(var i = 0; i < selected_points.length; ++i){
          266  +					if(selected_points[i] == highlight_object){
          267  +					   selected_points.splice(i, 1); // deselect point
          268  +					   alreadySelected = true; 
          269  +					   break; }}}
          270  +			else{
          271  +				selected_points.length = 0;}
          272  +				
          273  +			if(!alreadySelected) selected_points.push(highlight_object); }
          274  +
          275  +		else if(!key_state[16] || !key_state[16].state)
          276  +			selected_points.length = 0; }
          277  +		
          278  +		
          279  +	else if(lasts && mouse_dragging ){  // drag actions
          280  +		
          281  +		//  connect selected points to highlight point with lines
          282  +		if(selected_points.length && (!key_state[16] || !key_state[16].state)){  //  TODO right now this really only works for drawing a single line, 
          283  +		
          284  +			if(highlight_object !== null && highlight_object < point_projections.length){
          285  +				if(highlight_object == -1) highlight_object = addPoint(origin);
          286  +				
          287  +				for(var i = 0; i < selected_points.length; ++i){
          288  +					var pt = selected_points[i];
          289  +					if(pt == highlight_object) continue;
          290  +					addLine(pt, highlight_object); }
          291  +				selected_points.length = 0; }}
          292  +			
          293  +		// select points inside selection rectangle
          294  +		else if(mouse_loc && last_mouse_down){ 
          295  +		
          296  +			var minx = Math.min(mouse_loc[0], last_mouse_down[0]);
          297  +			var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
          298  +			var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
          299  +			var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
          300  +			
          301  +			
          302  +			var selected_point_map = {};             
          303  +			
          304  +			if(!key_state[16] || !key_state[16].state){
          305  +				selected_points.length = 0;
          306  +				selected_lines.length = 0; }
          307  +			else{
          308  +				for(var i = 0; i < selected_points.length; ++i){
          309  +					selected_point_map[selected_points[i]] = i; }}
          310  +			
          311  +			for(var i = 0; i < point_projections.length; ++i){
          312  +				if(selected_point_map[i]) continue; // already selected.
          313  +				
          314  +				var pt = point_projections[i];
          315  +				if(!pt) continue;
          316  +				var _x = pt[0];
          317  +				var _y = pt[1];
          318  +				
          319  +				if(minx < _x && _x < maxx
          320  +				 && miny < _y && _y < maxy){
          321  +				   selected_points.push(i); }}}                
   353    322           }});
   354    323   
   355    324   
   356    325   
   357    326   
   358    327   
   359    328   // to prevent camera from rotating beyond straight vertical
................................................................................
   370    339   var max_angle_delta = Math.PI / 2;
   371    340   
   372    341   var delta_horizontal_angle = 0;
   373    342   var delta_vertical_angle = 0;
   374    343   var delta_position = [0,0,0];
   375    344   
   376    345   
   377         -// var MODE_DRAWING = 0;
   378         -// var MODE_CAMERA_POSITION = 1; //  change the camera focus point
   379         -// var MODE_CAMERA_ROTATION = 2; //  rotate and zoom camera
   380    346   
   381         -// var editor_mode = MODE_DRAWING;
   382         -
   383         -/*
   384         -function drawMode(){
   385         -    editor_mode = MODE_DRAWING;
   386         -    delta_position = [0,0,0];
   387         -    // delta_horizontal_angle = 0;
   388         -    // delta_vertical_angle = 0;
   389         -    if(last_zoom_dist) zoom_dist = last_zoom_dist;
   390         -    else zoom_dist = 1;
   391         -               
   392         -    document.body.style.cursor = "crosshair"; }
   393         -    
   394         -function cameraPositionMode(){
   395         -    document.body.style.cursor = "default";
   396         -    last_zoom_dist = zoom_dist;
   397         -    delta_horizontal_angle = 0;
   398         -    delta_vertical_angle = 0;
   399         -    zoom_dist = NAVIGATION_ZOOM_DIST;
   400         -    editor_mode = MODE_CAMERA_POSITION; }
   401         -
   402         -function cameraRotationMode(){
   403         -    document.body.style.cursor = "default";
   404         -    delta_horizontal_angle = 0;
   405         -    delta_vertical_angle = 0;
   406         -    if(last_zoom_dist) zoom_dist = last_zoom_dist;
   407         -    else zoom_dist = 1;
   408         -    editor_mode = MODE_CAMERA_ROTATION; }
   409         -    
   410         -function nextMode(){
   411         -    if(editor_mode == MODE_DRAWING) cameraPositionMode();
   412         -    else if(editor_mode == MODE_CAMERA_POSITION) drawMode(); }
   413         -
   414         -    // skipping camera rotation mode
   415         -    //else if(editor_mode == MODE_CAMERA_POSITION) cameraRotationMode();
   416         -    //else if(editor_mode == MODE_CAMERA_ROTATION)  drawMode(); }  
   417         -    
   418         -   */ 
   419    347   
   420    348   
   421    349   var points = []; //global
   422    350   var solo_points = {};
   423    351   var lines = [];
   424    352   
   425    353   var point_projections = [];
................................................................................
   570    498       return index; }
   571    499       
   572    500       
   573    501   function addLine(pt0, pt1){
   574    502       delete solo_points[pt0];
   575    503       delete solo_points[pt1];
   576    504       lines.push([pt0, pt1]);
   577         -    return lines.length - 1; }
   578         -
   579         -function addBox(xyz, wdh){
   580         -    var x = xyz[0];
   581         -    var y = xyz[1];
   582         -    var z = xyz[2];
   583         -    
   584         -    var w = wdh[0];
   585         -    var d = wdh[1];
   586         -    var h = wdh[2];
   587         -    
   588         -    var x0 = x - w/2;
   589         -    var y0 = y - d/2;
   590         -    var z0 = z - d/2;
   591         -    
   592         -    var x1 = x + w/2;
   593         -    var y1 = y + d/2;
   594         -    var z1 = z + h/2;
   595         -    
   596         -    var a = addPoint([x0, y0, z0]);
   597         -    var b = addPoint([x1, y0, z0]);
   598         -    var c = addPoint([x1, y1, z0]);
   599         -    var d = addPoint([x0, y1, z0]);
   600         -    var e = addPoint([x0, y0, z1]);
   601         -    var f = addPoint([x1, y0, z1]);
   602         -    var g = addPoint([x1, y1, z1]);
   603         -    var h = addPoint([x0, y1, z1]);
   604         -   
   605         -
   606         -    addLine(a, b);
   607         -    addLine(b, c);
   608         -    addLine(c, d);
   609         -    addLine(d, a);
   610         -    addLine(e, f);
   611         -    addLine(f, g);
   612         -    addLine(g, h);
   613         -    addLine(h, e);
   614         -    
   615         -    addLine(a, e);
   616         -    addLine(b, f);
   617         -    addLine(c, g);
   618         -    addLine(d, h); }
   619         -    
          505  +    return lines.length - 1; }    
   620    506       
   621    507       
   622    508       
   623    509   function draw(canvas){
   624    510       var ctx = canvas.getContext('2d');
   625    511       var w = canvas.width;
   626    512       var h = canvas.height;
................................................................................
   674    560       for(var k in solo_points){
   675    561          var pt = point_projections[k];
   676    562          if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
   677    563           
   678    564       
   679    565       
   680    566       
   681         -    //if(editor_mode == MODE_DRAWING){
   682    567   	ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
   683    568   	ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4);
   684    569   	
   685    570   	for(var i = 0; i < selected_points.length; ++i){
   686    571   		var pt;
   687    572   		
   688    573   		if(selected_points[i] == -1)
................................................................................
   753    638   	}
   754    639       
   755    640       ctx.fillStyle = "rgb(0,0,0)";
   756    641       ctx.fillText(msg, 5, 20); }
   757    642   
   758    643       
   759    644       
   760         -//function buildFractal(children, func, levels, origin, scale, baseonly){
   761         -    
   762         -//}
   763         -
   764         -
   765         -function serpenskiPyramid(level, origin, scale){
   766         -    if(!scale) scale = 1;
   767         -    if(!origin) origin = [0, 0, 0];
   768         -    if(level === undefined) level = 4;
   769         -
   770         -    var spoints = [[0,0,0], [0.5,0,0], [0, -0.5, 0], [0, 0, 0.5]];
   771         -    
   772         -    
   773         -    for(var i = 0; i < spoints.length; ++i){
   774         -        var x = spoints[i];
   775         -        vector_scale(x, scale);
   776         -        vector_add(x, origin, x); }
   777         -    
   778         -    
   779         -    if(level > 0){
   780         -        for(var i = 0; i < spoints.length; ++i){
   781         -            var point = spoints[i];
   782         -            vector_add(origin, point, origin);
   783         -            serpenskiPyramid(level - 1, origin, 0.5 * scale);
   784         -            vector_minus(origin, point, origin); }
   785         -            
   786         -    }
   787         -    else if(level == 0){
   788         -        var pointRefs = [];
   789         -        for(var i = 0; i < spoints.length; ++i){
   790         -            vector_scale(spoints[i], 2);  // scale to points to full length;
   791         -            pointRefs[i] = addPoint(spoints[i]); }
   792         -            
   793         -        
   794         -        for(var i = 0; i < spoints.length; ++i){
   795         -            var a = pointRefs[i];
   796         -            
   797         -            for(var j = i + 1; j < spoints.length; ++j){
   798         -                var b = pointRefs[j];
   799         -                addLine(a, b); }}}
   800         -}
   801         -
   802         -    
   803         -function buildArray(origin, increment, size, buildfunc, extra1, extra2, extra3){
   804         -    var point = origin.slice(0);
   805         -    point_indexes = [];
   806         -    
   807         -    for(var i = 0; i < size.length; ++i){
   808         -        point_indexes[i] = 0; }
   809         -    
   810         -    var last_index = point_indexes.length - 1;
   811         -    var index = last_index;
   812         -    
   813         -    // build object at origin.
   814         -    buildfunc(point, extra1, extra2, extra3);
   815         -    
   816         -    while(index >= 0){
   817         -        //depth first
   818         -        
   819         -        if(point_indexes[index] == size[index] - 1){
   820         -            point[index] = origin[index];
   821         -            point_indexes[index] = 0;
   822         -            --index; }
   823         -        else{
   824         -            ++point_indexes[index];
   825         -            point[index] += increment[index];
   826         -            index = last_index;  // always go to the end position
   827         -            buildfunc(point, extra1, extra2, extra3); }}
   828         -}
   829         -    
   830         -
   831    645   window.onload = function(){
   832    646   
   833    647       // load localStorage saved state.
   834    648       if(localStorage.points && localStorage.lines){
   835    649           points = JSON.parse(localStorage.points);
   836    650           lines = JSON.parse(localStorage.lines); }
   837    651       
................................................................................
   842    656       canvas.height = window.innerHeight - 20;
   843    657       
   844    658       
   845    659       window.onresize = function(){
   846    660           canvas.width = window.innerWidth - 20;
   847    661           canvas.height = window.innerHeight - 20; }
   848    662   
   849         -    //addBox([0, 0, 0], [.5, .5, .5]);
   850         -    
   851         -    /*
   852         -    buildArray( [0, 0, 0],  // origin
   853         -                [2, 2, 2], // increment
   854         -                [11, 1, 11], // size
   855         -                addBox,
   856         -                [.5, .5, .5]); */
   857         -    
   858         -    //var a = addPoint([0, 0, 1]);
   859         -    //var b = addPoint([.5, 0, 1]);
   860         -    //var c = addPoint([0, .5, 1]);
   861         -    
   862         -
   863         -    
   864         -    //addLine(a, b);
   865         -    //addLine(b, c);
   866         -    //addLine(c, a);
   867         -    
   868         -    //serpenskiPyramid(5, null, 1);
   869         -    
   870    663       
   871    664       
   872    665       function getRotationAngle(x, size, max, center_size){
   873    666   
   874    667           if(!center_size) center_size = 0.25;  // the proportional size of the area in which no rotation is effected by the mouse movement
   875    668           if(!max) max = Math.PI/128;
   876    669           x -= size/2;
................................................................................
   900    693               var _y = y - last_mouse_down[1];
   901    694               
   902    695               var dist2 = _x*_x + _y*_y;
   903    696               
   904    697               if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
   905    698                   mouse_dragging = true; }}
   906    699                   
   907         -    /*
   908         -        if(editor_mode == MODE_CAMERA_ROTATION){   //  rotate about center
   909         -        
   910         -            delta_horizontal_angle = getRotationAngle(x, w, max_angle_delta/frame_rate);
   911         -            delta_vertical_angle = -getRotationAngle(y, h, max_angle_delta/frame_rate); }
   912    700   
   913         -
   914         -        if(editor_mode == MODE_CAMERA_POSITION){        
   915         -        
   916         -            delta_horizontal_angle = -getRotationAngle(x, w, max_angle_delta/frame_rate);
   917         -            delta_vertical_angle = getRotationAngle(y, h, max_angle_delta/frame_rate); }
   918         -            
   919         -
   920         -        else if(editor_mode == MODE_DRAWING){ */
   921         -
          701  +				
   922    702   		delta_horizontal_angle = getRotationAngle(x, w, max_angle_delta/frame_rate, no_rotate_area);
   923    703   		delta_vertical_angle = -getRotationAngle(y, h, max_angle_delta/frame_rate, no_rotate_area);
   924    704   		
   925    705   		var min_point_dist2 = LINE_HIGHLIGHT_DIST * LINE_HIGHLIGHT_DIST;
   926    706   		highlight_object = null;
   927    707   		
   928    708   		var _x = canvas.width/2 - x;
................................................................................
   972    752       // ctx.fillRect(0, 0, canvas.width, canvas.height);
   973    753       
   974    754       // 
   975    755       
   976    756       
   977    757       function animateLoop(){
   978    758           
   979         -        //if(editor_mode == MODE_DRAWING){
   980    759   		if(selected_points.length){  // move selection if exists
   981    760   			for(var i = 0; i < selected_points.length; ++i){
   982    761   				var pt = points[selected_points[i]];
   983    762   				vector_add(pt, delta_position, pt); }}
   984    763   		
   985    764   		else{
   986    765   			moveCamera(delta_position, false); }
   987         -        
   988         -        //else if(editor_mode == MODE_CAMERA_POSITION){
   989         -        //    if(delta_position)  moveCamera(delta_position, true); }  // motion depends on camera angle
   990         -        
          766  +      
   991    767           if(delta_horizontal_angle) rotateHorizontal(delta_horizontal_angle);
   992    768           if(delta_vertical_angle) rotateVertical(delta_vertical_angle);
   993    769           
   994    770          
   995    771           //  overwrite point projections
   996    772           //  TODO this may not be perfect if points are deleted etc.        
   997    773           point_projections.length = 0;