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
|
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
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)";
ctx.fillStyle = "rgba(0,0,0,1.0)";
var dot = vector_dot(view_transform[2], [0, 0, 1]);
var r = 3.2 - 1.8 * dot;
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(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); }
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,0.9)";
ctx.fillStyle = "rgba(0,0,0,1.0)";
ctx.beginPath();
if(faxis_pt){
if(fdot < 0 && 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); }
ctx.fillRect(faxis_pt[0] - fr/2, faxis_pt[1] - fr/2, fr, fr); }
if(vaxis_pt){
if(vdot < 0 && 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.fillRect(vaxis_pt[0] - vr/2, vaxis_pt[1] - vr/2, vr, vr); }
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); }
// reset line width
ctx.lineWidth = 1;
|