Overview
Comment: | changed drawing of axes to provide more visual cues for perspective |
---|---|
Timelines: | family | ancestors | descendants | both | trunk |
Files: | files | file ages | folders |
SHA1: |
d59b29f2f5f1034baad0d317f823186d |
User & Date: | Derek on 2012-12-24 17:03:45 |
Other Links: | manifest | tags |
Context
2012-12-24
| ||
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 | |
04:23 | (no comment) check-in: 17fe78b11b user: Derek tags: trunk | |
Changes
Modified draw.html from [6762019ffe] to [b1e8bca2b5].
︙ | ︙ | |||
48 49 50 51 52 53 54 | 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 | | | 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 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 |
︙ | ︙ | |||
394 395 396 397 398 399 400 | 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){ | | > > > > | 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 | 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){ |
︙ | ︙ | |||
578 579 580 581 582 583 584 | 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); } | | > > > > | > > > > > > > > > > > | | | | > > > > > > | < < | 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 | 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]; |
︙ | ︙ |