Check-in [fb2f9f8895]
Not logged in
Home Timeline Files Branches Tags Tickets Wiki Login
Overview
Comment:improved axes prespective, changed motion speed base.
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1: fb2f9f8895f29e13f3bb846f1e1407ff967c4c9d
User & Date: Derek on 2012-12-24 17:44:14
Other Links: manifest | tags
Context
2012-12-24
19:03
adjusted sizes of center and axis squares. check-in: b454ce1c79 user: Derek tags: trunk
17:44
improved axes prespective, changed motion speed base. check-in: fb2f9f8895 user: Derek tags: trunk
17:03
changed drawing of axes to provide more visual cues for perspective check-in: d59b29f2f5 user: Derek tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

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

︙︙
70
71
72
73
74
75
76


77
78
79
80
81
82
83

var mouse_dragging = false;
var last_mouse_down = null;
var mouse_loc = null;
var MIN_DRAG_DIST = 10;
var POINT_HIGHLIGHT_DIST = 10;
var LINE_HIGHLIGHT_DIST = 15;



var selected_points = [];
var selected_lines = [];

var msg = //"3D drawing tool\n\n" +
          "Select     Left Click\n" +
		  "Rotate     Right Click\n" +
		  "Move       wasd, qe\n" +








>
>








70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

var mouse_dragging = false;
var last_mouse_down = null;
var mouse_loc = null;
var MIN_DRAG_DIST = 10;
var POINT_HIGHLIGHT_DIST = 10;
var LINE_HIGHLIGHT_DIST = 15;

var MOTION_SPEED_BASE =  2.8;

var selected_points = [];
var selected_lines = [];

var msg = //"3D drawing tool\n\n" +
          "Select     Left Click\n" +
		  "Rotate     Right Click\n" +
		  "Move       wasd, qe\n" +
︙︙
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217


    
function changeVelocity(direction, positive, state, lastState){
    if(state == 0){
        state = lastState;
        positive = !positive; }  // reverse the velocity
    
    var delta = Math.pow(2, state - 1) * max_move_delta / frame_rate;
    if(!positive) delta = -delta;
    
    var velocityChange = [0, 0, 0];
    velocityChange[direction] = delta;
    vector_add(delta_position, velocityChange, delta_position); }
    









|








205
206
207
208
209
210
211
212
213
214
215
216
217
218
219


    
function changeVelocity(direction, positive, state, lastState){
    if(state == 0){
        state = lastState;
        positive = !positive; }  // reverse the velocity
    
    var delta = Math.pow(MOTION_SPEED_BASE, state - 1) * max_move_delta / frame_rate;
    if(!positive) delta = -delta;
    
    var velocityChange = [0, 0, 0];
    velocityChange[direction] = delta;
    vector_add(delta_position, velocityChange, delta_position); }
︙︙
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

       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;
	
	

    
		
	








>



|



|

|
|
>
>


>

>
>
>
>
|
>
>
>
>
>
>
>
>
>
|
|

|
>

|


|

|


|



<
<
<
|
>








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
641
642
643
644



645
646
647
648
649
650
651
652
653

       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.
	//  
	//  Because we use a 2d canvas library for the drawing the rest of the points/shapes after projection, these visual information nuances are important.
	//

	// axis lines and dots
	
    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,1.0)";
	
	var fdot = vector_dot(view_transform[2], [0, 0, 1]);
	var fr = 4 - 2.5 * fdot;
	var vdot = vector_dot(view_transform[2], [0, -1, 0]);
	var vr = 4 - 2.5 * vdot;
	
	ctx.lineWidth = 1.333;
	ctx.beginPath();
	
	if(fdot >=0 && faxis_pt){ // occlude this axis, draw first
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
		
	if(vdot >=0 && vaxis_pt){ // occlude this axis, draw first
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);	
		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
	
	ctx.stroke()
	
		
	// draw center red square
	ctx.fillStyle = "rgba(250, 0, 0, 1.0)";
	ctx.fillRect(w/2 - 3, h/2 - 3, 6, 6);
		
	ctx.fillStyle = "rgba(0,0,0,1.0)";
	ctx.beginPath();
	
	if(fdot < 0 && faxis_pt){
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(faxis_pt[0], faxis_pt[1]);	
		ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
		
	if(vdot < 0 && vaxis_pt){
		ctx.moveTo(w/2, h/2);
		ctx.lineTo(vaxis_pt[0], vaxis_pt[1]);
		ctx.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
	
	ctx.stroke();
	




	// reset line width
	ctx.lineWidth = 1;
︙︙

Fossil version [8be0372c10] 2024-04-23 13:25:26