/
vtvt_demo_5-2.html
93 lines (82 loc) · 4.19 KB
/
vtvt_demo_5-2.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
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
<!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 #5-2</h3>
<p>Unit circle transformation + sine plot</p>
<p><button id='animation_trigger_5_2'>Press to animate unit circle transformation</button></p>
<div class="canvas-wrapper">
<canvas id='vector_canvas_5_2' class="canvas-wrapped"></canvas>
</div>
<script>
//*************************************************************************************************
// Demo canvas 5
// unit circle static vectors
// initialize the scene
var scene5_2 = new vtvt({canvas_id: "vector_canvas_5_2", grid_res: 16, circle_rad: 0.5, show_eig: false, frame_duration: 50, anim_trigger_id: "animation_trigger_5_2"});
// add columns of matrix T
scene5_2.addVector({coords: [4, -1], c: "70, 70, 120", draggable: true,label: "t1"});
scene5_2.addVector({coords: [-3, 5], c: "70, 120, 70", draggable: true, label: "t2"});
// add transformed and original unit circle vectors, as well as the sine plot
for (let i = 0, k = 0; k < 360; i++, k=k+2) {
let cos = Math.cos(k * Math.PI / 180);
let sin = Math.sin(k * Math.PI / 180);
let vec_map = function() {
let x = scene5_2.vectors[0].coord_x * cos +
scene5_2.vectors[1].coord_x * sin;
let y = scene5_2.vectors[0].coord_y * cos +
scene5_2.vectors[1].coord_y * sin;
return {mapX: x, mapY: y};
}
let colour = function() {
let r = 150 + 100*cos; //(phase shift 0º)
let g = 150 + 100*(-0.5*cos - 0.866*sin); //(phase shift 120º)
let b = 150 + 100*(-0.5*cos + 0.866*sin); //(phase shift 240º)
return `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`;
}
// add transformed unit circle vector
scene5_2.addVector({c: colour(), kind: 'point', map_coords: vec_map });
// add original unit circle vector
scene5_2.addVector({coords: [Math.cos(k * Math.PI / 180), Math.sin(k * Math.PI / 180)], c: colour(), kind: 'point' });
// add sine curve vector
if (i>0) {
scene5_2.addVector({c: colour(), kind: 'custom', draw_arrow: false, map_coords: function() {
return {
mapXo: scene5_2.vectors[i*3+1].coord_x + scene5_2.vectors[i*3+1].orig_x,
mapYo: scene5_2.vectors[i*3+1].coord_y + scene5_2.vectors[i*3+1].orig_y,
mapX: -7.9 + i*16/180 - scene5_2.vectors[i*3+1].coord_x - scene5_2.vectors[i*3+1].orig_x,
mapY: scene5_2.vectors[0].coord_y * cos + scene5_2.vectors[1].coord_y * sin - scene5_2.vectors[i*3+1].coord_y - scene5_2.vectors[i*3+1].orig_y }
} });
} else {
scene5_2.addVector({c: colour(), visible: false, map_coords: function() {
return {
mapX: -7.9,
mapY: scene5_2.vectors[0].coord_y * cos + scene5_2.vectors[1].coord_y * sin }
} });
}
// add animated vectors for the unit circles and the sine curve
scene5_2.addAnimationFrame([
{c: colour(), map_coords: vec_map },
{coords: [Math.cos(k * Math.PI / 180), Math.sin(k * Math.PI / 180)], c: colour, selectable: false},
{c: colour(), kind: 'point', map_coords: function() {
return {
mapX: -7.9 + i*16/180,
mapY: scene5_2.vectors[0].coord_y * cos + scene5_2.vectors[1].coord_y * sin }
}
} ]);
if (k > 0) {
// copy the sine plot vectors from the previous frame
scene5_2.vectors_animated[i].push(...scene5_2.vectors_animated[i-1].slice(2));
}
}
// render
scene5_2.render();
</script>
</body>
</html>