Overview
| Comment: | 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) |
|---|---|
| Timelines: | family | ancestors | descendants | both | trunk |
| Files: | files | file ages | folders |
| SHA1: |
7c222a418440d4b512c4e1de9395f2f0 |
| User & Date: | Derek on 2012-12-24 03:52:54 |
| Other Links: | manifest | tags |
Context
|
2012-12-24
| ||
| 04:23 | (no comment) check-in: 17fe78b11b user: Derek tags: trunk | |
| 03:52 | 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) check-in: 7c222a4184 user: Derek tags: trunk | |
|
2012-12-23
| ||
| 19:18 | removed superfulous code and comments. updated TODOs check-in: 1bc6e97248 user: Derek tags: trunk | |
Changes
Modified draw.html from [d50a5e8508] to [97f687849d].
1 2 3 4 5 | <html> <script src='matrix_vector_lib.js' ></script> <script> | | > > > > | | | > > > > > > | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<html>
<script src='matrix_vector_lib.js' ></script>
<script>
// TODO rotate selected points
// TODO control with zoom rotate or pan means that action is only applied to the camera not the selected points.
// 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.
// TODO when lines are deleted, readd the solo points to the solo_points list
//
// TODO z for undo shift + z for redo.
//
// TODO
//
// TODO drop down minimalist menu in top right of canvas.
// drag to connect points
var canvas;
var origin = [0, 0, 0];
var frame_rate = 20;
var saveTimeout = 10*1000;
var forward_axis_size = 0.1;
var vertical_axis_size = 0.05;
// to prevent camera from rotating beyond straight vertical
var vertical_camera_rotation = 0;
var zoom_dist = 1;
var zoom_factor = 0.83;
var zoom_scale = 2.667; // scalar zoom property.
var last_zoom_dist = 1;
// camera animation
var max_move_delta = 0.01;
var max_angle_delta = Math.PI;
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
var solo_points = {};
var lines = [];
var point_projections = [];
var line_midpoint_projections = [];
var highlight_object = null;
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" +
"Copy Space\n" +
"Delete x\n" +
"\n" +
"Click the red dot to create a point\n" +
"Spam a motion key to increase speed\n";
var view_transform =
[[1, 0, 0],
[0, 1, 0],
[0, 0, 1]];
var key_state = {};
var key_state_augmentation_timeout = 150; // the permissible time in milliseconds since the last key event to still allow the key state to augment instead of clearing.
function addKeyListener(keycode, func){
if(!key_state[keycode]) key_state[keycode] = {};
var key_obj = key_state[keycode];
if(!key_obj.listeners) key_obj.listeners = [];
|
| ︙ | ︙ | |||
60 61 62 63 64 65 66 |
var state = key_obj.state;
if(state) return; //key is already pressed.
state = 0;
var latest = key_obj.latest;
| | | 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
var state = key_obj.state;
if(state) return; //key is already pressed.
state = 0;
var latest = key_obj.latest;
if(latest && time - latest < key_state_augmentation_timeout)
state = key_obj.state = key_obj.lastState + 1;
else
state = key_obj.state = 1;
key_obj.latest = time;
key_obj.lastState = state;
|
| ︙ | ︙ | |||
146 147 148 149 150 151 152 |
if(!positive) delta = -delta;
var velocityChange = [0, 0, 0];
velocityChange[direction] = delta;
vector_add(delta_position, velocityChange, delta_position); }
| | | < | 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 |
if(!positive) delta = -delta;
var velocityChange = [0, 0, 0];
velocityChange[direction] = delta;
vector_add(delta_position, velocityChange, delta_position); }
function leftPress(e, s, lasts){
changeVelocity(0, false, s, lasts); }
function rightPress(e, s, lasts){
changeVelocity(0, true, s, lasts); }
|
| ︙ | ︙ | |||
318 319 320 321 322 323 324 |
if(minx < _x && _x < maxx
&& miny < _y && _y < maxy){
selected_points.push(i); }}}
}});
| | | | < < < < < < < < < < < < < | | < | < < < < | | < < | < < < < < < < | < < | < < < < < < < < | 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 |
if(minx < _x && _x < maxx
&& miny < _y && _y < maxy){
selected_points.push(i); }}}
}});
// right click
addKeyListener(1002, function(e, s, lasts){
if(s == 0){
delta_horizontal_angle = 0;
delta_vertical_angle = 0; }});
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.
|
| ︙ | ︙ | |||
541 542 543 544 545 546 547 |
var x1 = _pt1[0];
var y1 = _pt1[1];
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1); }
ctx.clearRect(0, 0, w, h);
| < < | < < < < < | > | > > > > | > > > > > > > > > > > > > > > > > > | 575 576 577 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 618 619 620 621 622 623 624 625 |
var x1 = _pt1[0];
var y1 = _pt1[1];
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1); }
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = "rgba(0, 0, 0, 0.9)";
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];
else pt = point_projections[selected_points[i]];
|
| ︙ | ︙ | |||
614 615 616 617 618 619 620 |
else{
document.body.style.cursor = "crosshair"; }
if(mouse_dragging){
if(selected_points.length && (!key_state[16] || !key_state[16].state)){ // if shift is held, we are selecting more points.
| | < | | | | | | > > > | | | | | | | | | 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 |
else{
document.body.style.cursor = "crosshair"; }
if(mouse_dragging){
if(selected_points.length && (!key_state[16] || !key_state[16].state)){ // if shift is held, we are selecting more points.
if(mouse_loc && key_state[1000] && key_state[1000].state){
ctx.beginPath();
var pt = point_projections[selected_points[0]];
if(pt){
ctx.moveTo(mouse_loc[0], mouse_loc[1]);
ctx.lineTo(pt[0], pt[1]); }
ctx.stroke(); }}
else if(mouse_loc && last_mouse_down){
if(key_state[1000] && key_state[1000].state){ // select points inside square
var minx = Math.min(mouse_loc[0], last_mouse_down[0]);
var maxx = Math.max(mouse_loc[0], last_mouse_down[0]);
var miny = Math.min(mouse_loc[1], last_mouse_down[1]);
var maxy = Math.max(mouse_loc[1], last_mouse_down[1]);
ctx.beginPath();
ctx.rect(minx, miny, maxx - minx, maxy - miny);
ctx.stroke(); }}
}
ctx.fillStyle = "rgb(0,0,0)";
writeMsg(canvas, msg); }
window.onload = function(){
// load localStorage saved state.
if(localStorage.points && localStorage.lines){
|
| ︙ | ︙ | |||
660 661 662 663 664 665 666 |
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20; }
function getRotationAngle(x, size, max, center_size){
| | < | 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 |
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20; }
function getRotationAngle(x, size, max, center_size){
if(!center_size) center_size = 0.05; // the proportional size of the area in which no rotation is effected by the mouse movement
if(!max) max = Math.PI/128;
// center does nothing
if(Math.abs(x) < size * center_size/2) x = 0;
else if(x < 0) x += size * center_size/2;
else x -= size * center_size/2;
return max * x / ((1 - center_size) * size/2); }
|
| ︙ | ︙ | |||
695 696 697 698 699 700 701 |
var dist2 = _x*_x + _y*_y;
if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
mouse_dragging = true; }}
| > | | | > | 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 |
var dist2 = _x*_x + _y*_y;
if(dist2 > MIN_DRAG_DIST * MIN_DRAG_DIST){
mouse_dragging = true; }}
if(key_state[1002] && key_state[1002].state && last_mouse_down){
delta_horizontal_angle = getRotationAngle(x - last_mouse_down[0], w, max_angle_delta/frame_rate, 0);
delta_vertical_angle = -getRotationAngle(y - last_mouse_down[1], h, max_angle_delta/frame_rate, 0); }
var min_point_dist2 = LINE_HIGHLIGHT_DIST * LINE_HIGHLIGHT_DIST;
highlight_object = null;
var _x = canvas.width/2 - x;
var _y = canvas.height/2 - y;
var point_dist = _x*_x + _y*_y;
|
| ︙ | ︙ |
Modified matrix_vector_lib.js from [8300025cc5] to [0be33777c1].
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// matrix and vector functions.
//
//
function vector_add(a, b, result){
if(!result) result = [];
if(a.length > b.lemgth){
var tmp = a;
a = b; b = tmp; }
for(var i = 0; i < a.length; ++i){
result[i] = a[i] + b[i]; }
for(var i = a.length; i < b.length; ++i){
result[i] = b[i]; }
return result; }
function vector_cpy(result, a){
for(var i = 0; i < a.length; ++i){
result[i] = a[i]; }
}
function vector_minus(a, b, result){
if(!result) result = [];
var lim = Math.max(a.length, b.length);
for(var i = 0; i < lim; ++i){
var aValue, bValue;
if(i < a.length)
aValue = a[i];
| > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// matrix and vector functions.
//
//
function vector_add(a, b, result){
if(!result) result = [];
if(!a) throw "first argument to vector_add missing";
if(!b) throw "second argument to vector_add missing";
if(a.length > b.lemgth){
var tmp = a;
a = b; b = tmp; }
for(var i = 0; i < a.length; ++i){
result[i] = a[i] + b[i]; }
for(var i = a.length; i < b.length; ++i){
result[i] = b[i]; }
return result; }
function vector_cpy(result, a){
if(!a) throw "first argument to vector_cpy missing";
for(var i = 0; i < a.length; ++i){
result[i] = a[i]; }
}
function vector_minus(a, b, result){
if(!result) result = [];
if(!a) throw "first argument to vector_minus missing";
if(!b) throw "second argument to vector_minus missing";
var lim = Math.max(a.length, b.length);
for(var i = 0; i < lim; ++i){
var aValue, bValue;
if(i < a.length)
aValue = a[i];
|
| ︙ | ︙ | |||
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
return result; }
function vector_dot(a, b){
var lim = Math.min(a.length, b.length);
var result = 0;
for(var i = 0; i < lim; ++i){
result += a[i] * b[i]; }
return result; }
function vector_norm(a){
return Math.sqrt(vector_dot(a,a)); }
function vector_scale(a, s, result){
if(!result) result = [];
for(var i = 0; i < a.length; ++i){
result[i] = s * a[i]; }
return result; }
// returns true iff the zero tail padded vectors match
function vector_cmp(a, b){
if(a.length > b.length){
var tmp = a;
a = b; b = tmp; }
for(var i = 0; i < a.length; ++i){
if(a[i] != b[i])
return false; }
for(var i = a.length; i < b.length; ++i){
if(b[i] != 0)
return false; }
return true; }
| > > > > > > > > | > > | 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
return result; }
function vector_dot(a, b){
var lim = Math.min(a.length, b.length);
if(!a) throw "first argument to vector_dot missing";
if(!b) throw "second argument to vector_dot missing";
var result = 0;
for(var i = 0; i < lim; ++i){
result += a[i] * b[i]; }
return result; }
function vector_norm(a){
if(!a) throw "argument to vector_norm missing";
return Math.sqrt(vector_dot(a,a)); }
function vector_scale(a, s, result){
if(!a) throw "first argument to vector_scale missing";
if(s === undefined || s === null) throw "scalar argument to vector_scale missing";
if(!result) result = [];
for(var i = 0; i < a.length; ++i){
result[i] = s * a[i]; }
return result; }
// returns true iff the zero tail padded vectors match
function vector_cmp(a, b){
if(!a) throw "first argument to vector_cmp missing";
if(!b) throw "second argument to vector_cmp missing";
if(a.length > b.length){
var tmp = a;
a = b; b = tmp; }
for(var i = 0; i < a.length; ++i){
if(a[i] != b[i])
return false; }
for(var i = a.length; i < b.length; ++i){
if(b[i] != 0)
return false; }
return true; }
function vector_midpoint(a, b, result){
if(!a) throw "first argument to vector_midpoint missing";
if(!b) throw "second argument to vector_midpoint missing";
if(b.length > a.length){
var tmp = a;
a = b; b = tmp; }
if(!result) result = new Array(b.length);
|
| ︙ | ︙ | |||
115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
}
//this function may not care, but the expected matrix format in this project is a list of column vectors.
function matrix_transpose(matrix){
var result = [];
var dim0 = matrix.length;
if(!dim0)
return result;
var dim1 = matrix[0].length;
| > | 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
}
//this function may not care, but the expected matrix format in this project is a list of column vectors.
function matrix_transpose(matrix){
if(!matrix) throw "argument to matrix_transpose missing";
var result = [];
var dim0 = matrix.length;
if(!dim0)
return result;
var dim1 = matrix[0].length;
|
| ︙ | ︙ | |||
139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
function matrix_mult(a, b){
var result = [];
var a = matrix_transpose(a);
var dim0 = a.length;
var dim1 = b.length;
for(var i = 0; i < dim1; ++i){
| > > | 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
function matrix_mult(a, b){
if(!a) throw "first argument to matrix_mult missing";
if(!b) throw "second argument to matrix_mult missing";
var result = [];
var a = matrix_transpose(a);
var dim0 = a.length;
var dim1 = b.length;
for(var i = 0; i < dim1; ++i){
|
| ︙ | ︙ | |||
160 161 162 163 164 165 166 167 168 169 170 171 172 173 |
// finds the inverse of a 3 by 3 matrix, returns false if matrix has determinant zero.
//
function matrix33inv(m){
// the matrix format is a list of column vectors.
var a = m[0][0];
var b = m[1][0];
var c = m[2][0];
var d = m[0][1];
var e = m[1][1];
| > | 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
// finds the inverse of a 3 by 3 matrix, returns false if matrix has determinant zero.
//
function matrix33inv(m){
if(!m) throw "argument to matrix33inv missing";
// the matrix format is a list of column vectors.
var a = m[0][0];
var b = m[1][0];
var c = m[2][0];
var d = m[0][1];
var e = m[1][1];
|
| ︙ | ︙ | |||
203 204 205 206 207 208 209 | // the matrix format is a list of column vectors. var result = [[di*A, di*B, di*C], [di*D, di*E, di*F], [di*G, di*H, di*K]]; return result; } | | > > > > | 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 |
// the matrix format is a list of column vectors.
var result = [[di*A, di*B, di*C],
[di*D, di*E, di*F],
[di*G, di*H, di*K]];
return result; }
// does not check if function is differentiable.
function compute_gradient(func, point, error){
if(!func) throw "function argument to compute_gradient missing";
if(!point) throw "point argument to compute_gradient missing";
if(!error) error = 0.00001;
// find gradient
var otherpoint = point.slice(0);
var gradient = new Array(point.length);
var pointvalue = func(point);
|
| ︙ | ︙ | |||
232 233 234 235 236 237 238 |
//
// equation at:
// http://inside.mines.edu/~gmurray/ArbitraryAxisRotation/ArbitraryAxisRotation.html
// creates a rotation matrix about the given vector.
//
function vector_rotation(vector, s){
| > > | | 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 |
//
// equation at:
// http://inside.mines.edu/~gmurray/ArbitraryAxisRotation/ArbitraryAxisRotation.html
// creates a rotation matrix about the given vector.
//
function vector_rotation(vector, s){
if(!vector) throw "vector argument to vector_rotation missing";
if(!s) throw "angle argument to vector_rotation missing";
var len = Math.sqrt(vector[0]*vector[0]
+ vector[1]*vector[1]
+ vector[2]*vector[2]);
var u = vector[0]/len;
var v = vector[1]/len;
var w = vector[2]/len;
|
| ︙ | ︙ |