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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
...
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412




413
414
415
416
417
418
419
...
578
579
580
581
582
583
584
585





586
587
588
589
590
591
592
593











594
595
596
597
598
599
600
601
602
603
604






605
606
607
608
609
610
611
612
613
614
615
616
617

var delta_horizontal_angle = 0;
var delta_vertical_angle = 0;
var delta_position = [0,0,0];


//  Use to rotate selected points about a vector line
var selection_rotation_vector = null;
var rotation_center = origin.slice(0);





var points = []; //global
................................................................................


function writeMsg(canvas, msg){
	var lines = msg.split("\n");
	var ctx = canvas.getContext("2d");
	ctx.font = "9pt sans-serif"
	for(var i = 0; i < lines.length; ++i){
		ctx.fillText(lines[i], 5, 10 + 15 *  i); }}

    
//  camera functions

function rotateView(norm, theta, cameracentric){

    // camera centric uses the camera axes to perform the rotation instead of the space axes.   
    if(cameracentric) norm = matrix_mult(view_transform, [norm])[0];
    var rotation = vector_rotation(norm, theta);
    
    view_transform = matrix_mult(rotation, view_transform); }




    
    
    
function rotateHorizontal(theta){
    rotateView([0, 1, 0], theta, false); }
    
function rotateVertical(theta){
................................................................................
    ctx.stroke();
    
	ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
    for(var k in solo_points){
       var pt = point_projections[k];
       if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
        
    






	// axis lines and dots
	ctx.beginPath();
    var faxis_pt = project(canvas, vector_add(origin, [0, 0, forward_axis_size, 0, 0]), view_transform, origin);
	var vaxis_pt = project(canvas, vector_add(origin, [0, -vertical_axis_size, 0]), view_transform, origin);
	
	ctx.fillStyle = "rgba(0,0,0,0.9)";
	











	if(faxis_pt){
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(faxis_pt[0], faxis_pt[1]);
		ctx.fillRect(faxis_pt[0] - 2, faxis_pt[1] - 2, 4, 4); }
		
	if(vaxis_pt){
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
		ctx.fillRect(vaxis_pt[0] - 2, vaxis_pt[1] - 2, 4, 4); }
		
	ctx.stroke();	






	
	

    // red center dot.
	ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
	ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4);
		
	
	for(var i = 0; i < selected_points.length; ++i){
		var pt;
		
		if(selected_points[i] == -1)
			pt = [w/2, h/2];







|







 







|











>
>
>
>







 







<
>
>
>
>
>



|




>
>
>
>
>
>
>
>
>
>
>


|
|





|
|
>
>
>
>
>
>



|
<
<







48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
...
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
...
582
583
584
585
586
587
588

589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633


634
635
636
637
638
639
640

var delta_horizontal_angle = 0;
var delta_vertical_angle = 0;
var delta_position = [0,0,0];


//  Use to rotate selected points about a vector line
var selection_rotation_axis = null;
var rotation_center = origin.slice(0);





var points = []; //global
................................................................................


function writeMsg(canvas, msg){
	var lines = msg.split("\n");
	var ctx = canvas.getContext("2d");
	ctx.font = "9pt sans-serif"
	for(var i = 0; i < lines.length; ++i){
		ctx.fillText(lines[i], 5, 10 + 16 *  i); }}

    
//  camera functions

function rotateView(norm, theta, cameracentric){

    // camera centric uses the camera axes to perform the rotation instead of the space axes.   
    if(cameracentric) norm = matrix_mult(view_transform, [norm])[0];
    var rotation = vector_rotation(norm, theta);
    
    view_transform = matrix_mult(rotation, view_transform); }
	
	
function rotatePoint(point, axis, angle, center){
}
    
    
    
function rotateHorizontal(theta){
    rotateView([0, 1, 0], theta, false); }
    
function rotateVertical(theta){
................................................................................
    ctx.stroke();
    
	ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
    for(var k in solo_points){
       var pt = point_projections[k];
       if(pt) ctx.fillRect(pt[0] - 2, pt[1] - 2, 4, 4); }
        

	//
	//  The following drawing of axes is to help provide an perspective
	//  The nuances of this draw behavior are created to provide visual cues for interpreting perspective and depth.
	//  
	//

	// axis lines and dots
	ctx.beginPath();
    var faxis_pt = project(canvas, vector_add(origin, [0, 0, forward_axis_size]), view_transform, origin);
	var vaxis_pt = project(canvas, vector_add(origin, [0, -vertical_axis_size, 0]), view_transform, origin);
	
	ctx.fillStyle = "rgba(0,0,0,0.9)";
	
	var dot = vector_dot(view_transform[2], [0, 0, 1]);
	var r = 3.2 - 1.8 * dot;
	
	ctx.lineWidth = 1.333;
	
	if(dot < 0){  // draw red square first to partially occlude with axes
		ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
		ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4); }
		
	ctx.fillStyle = "rgba(0,0,0,0.9)";
	
	if(faxis_pt){
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
		ctx.fillRect(faxis_pt[0] - r/2, faxis_pt[1] - r/2, r, r); }
		
	if(vaxis_pt){
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
		ctx.fillRect(vaxis_pt[0] - 2, vaxis_pt[1] - 2, 4, 4); }
	
	ctx.stroke();
	
	if(dot >= 0){  // draw red square last so it is not occluded by axes
		ctx.fillStyle = "rgba(250, 0, 0, 0.9)";
		ctx.fillRect(w/2 - 2, h/2 - 2, 4, 4); }
		
	ctx.lineWidth = 1;
	
	

    


		
	
	for(var i = 0; i < selected_points.length; ++i){
		var pt;
		
		if(selected_points[i] == -1)
			pt = [w/2, h/2];