-
Notifications
You must be signed in to change notification settings - Fork 5
/
vtvt_demo_4.html
56 lines (47 loc) · 2.63 KB
/
vtvt_demo_4.html
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
<!DOCTYPE html>
<html lang="en-CA">
<head>
<title>vtvt demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="vtvt_demo_styles.css">
<script type="text/javascript" src="vtvt.js"></script>
</head>
<body>
<h3>Demo canvas #4</h3>
<p>Power iteration algorithm. Adjust t1 and t2 to change matrix T and its eigenvectors. iter0 is the first iteration of the algorithm. </p>
<div class="canvas-wrapper">
<p><button id='animation_trigger_4' onclick="">Press to animate power iteration</button></p>
<canvas id='vector_canvas_4' class="canvas-wrapped"></canvas>
</div>
<script>
// *************************************************************************************************
// Demo canvas 4
// initialize the scene
var scene4 = new vtvt({canvas_id: "vector_canvas_4", grid_res: 16, circle_rad: 0.5, eig_col: "150, 150, 150", frame_duration: 500, anim_trigger_id: "animation_trigger_4"});
// add columns of matrix T
scene4.addVector({coords: [2, -1], c: "190, 0, 190", draggable: true, label: "t1", visible: true});
scene4.addVector({coords: [-1, 3], c: "0, 160, 190", draggable: true, label: "t2", visible: true});
// add input vector for power iteration algorithm
scene4.addVector({coords: [-6, 1], c: "100, 220, 170", draggable: true, label: "iter0"});
// add the first animated vector (mapped to iter0)
scene4.addAnimationFrame([{coords: [-6, 1], c: "100, 220, 170", label: "iter0",
map_coords: function(){ return {mapX: scene4.vectors[2].coord_x, mapY: scene4.vectors[2].coord_y} } }]);
// add additional animated vectors (each mapped to the previous one)
for (let k = 0; k < 20; k++) {
let map_func = function() {
let x = scene4.vectors[0].coord_x * scene4.vectors_animated[k][0].coord_x +
scene4.vectors[1].coord_x * scene4.vectors_animated[k][0].coord_y;
let y = scene4.vectors[0].coord_y * scene4.vectors_animated[k][0].coord_x +
scene4.vectors[1].coord_y * scene4.vectors_animated[k][0].coord_y;
let norm = Math.sqrt(x*x + y*y);
return {mapX: x / norm * 4, mapY: y = y / norm * 4};
}
// add vector to the animation sequence
scene4.addAnimationFrame([ {coords: [1, 1], c: "100, 220, 170", label: `iter${k+1}`, kind: 'custom', draw_line: true, map_coords: map_func} ]);
}
// render
scene4.render();
</script>
</body>
</html>