-
Notifications
You must be signed in to change notification settings - Fork 5
/
vtvt_demo_5-1.html
82 lines (72 loc) · 3.42 KB
/
vtvt_demo_5-1.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
<!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</h3>
<p>Unit circle transformation + sine plot</p>
<p><button id='animation_trigger_5'>Press to animate unit circle transformation</button></p>
<div class="canvas-wrapper">
<canvas id='vector_canvas_5' class="canvas-wrapped"></canvas>
</div>
<script>
//*************************************************************************************************
// Demo canvas 5
// unit circle static vectors
// initialize the scene
var scene5 = new vtvt({canvas_id: "vector_canvas_5", grid_res: 16, circle_rad: 0.5, show_eig: false, frame_duration: 50, anim_trigger_id: "animation_trigger_5"});
// add columns of matrix T
scene5.addVector({coords: [4, -1], c: "70, 70, 120", draggable: true,label: "t1"});
scene5.addVector({coords: [-3, 5], c: "70, 120, 70", draggable: true, label: "t2"});
// add transformed + original unit circle vectors + 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.vectors[0].coord_x * cos +
scene5.vectors[1].coord_x * sin;
let y = scene5.vectors[0].coord_y * cos +
scene5.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.addVector({c: colour(), kind: 'point', map_coords: vec_map });
// add original unit circle vector
scene5.addVector({coords: [Math.cos(k * Math.PI / 180), Math.sin(k * Math.PI / 180)], c: colour(), selectable: false, kind: 'point' });
// add sine plot vector
scene5.addVector({c: "180,180,180", kind: 'point', map_coords: function() {
return {
mapX: -8 + i*16/180,
mapY: scene5.vectors[0].coord_y * cos + scene5.vectors[1].coord_y * sin }
} });
// animation for the unit circle vectors + sine plot
scene5.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: -8 + i*16/180,
mapY: scene5.vectors[0].coord_y * cos + scene5.vectors[1].coord_y * sin }
}
} ]);
if (k > 0) {
// copy animated vectors from the previous frame
scene5.vectors_animated[i].push(...scene5.vectors_animated[i-1].slice(2));
}
}
// render
scene5.render();
</script>
</body>
</html>