-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathvtvt_demo_7.html
79 lines (70 loc) · 3.53 KB
/
vtvt_demo_7.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
<!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 #7</h3>
<p>Interactive principal component analysis. The principal components are the eigenvectors of the covariance matrix T. </p>
<div class="canvas-wrapper">
<canvas id='vector_canvas_7' class="canvas-wrapped"></canvas>
</div>
<script>
// *************************************************************************************************
// Demo canvas 7
// initialize the scene
var scene_7 = new vtvt({canvas_id: "vector_canvas_7", grid_res: 16, circle_rad: 0.5, show_matrix: true, show_eig: true});
// add two invisible vectors whose coordinates will represent the covariance matrix (the mapping function will be added later)
scene_7.addVector({coords: [0,0], c: "0,0,0", draggable: false, visible: false});
scene_7.addVector({coords: [0,0], c: "0,0,0", draggable: false, visible: false});
var numPoints = 18
// add points
for (let k = 0; k < numPoints; k++) {
// setup colours
let cos = Math.cos(Math.random() * 2 * Math.PI);
let sin = Math.sin(Math.random() * 2 * Math.PI);
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º)
// random coords with some correlation
let x = Math.random()*14 - 7;
let y = 0.5*x + Math.random()*6 - 3;
// add point
scene_7.addVector({
coords: [x,y],
c: `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`,
draggable: true,
kind: 'point'});
}
// define mapping of vector 0 (invisible) to construct a covariance matrix
scene_7.vectors[0].map_coords = function() {
let sumX = 0, sumY = 0, sumX2 = 0, sumY2 = 0, sumXY = 0;
for (let k = 2; k < numPoints+2; k++) {
sumX += scene_7.vectors[k].coord_x;
sumY += scene_7.vectors[k].coord_y;
sumX2 += scene_7.vectors[k].coord_x * scene_7.vectors[k].coord_x;
sumXY += scene_7.vectors[k].coord_x * scene_7.vectors[k].coord_y;
}
return {mapX: (sumX2-sumX*sumX/numPoints)/numPoints, mapY: (sumXY-sumX*sumY/numPoints)/numPoints};
}
// define mapping of vector 1 (invisible) to construct a covariance matrix
scene_7.vectors[1].map_coords = function() {
let sumX = 0, sumY = 0, sumX2 = 0, sumY2 = 0, sumXY = 0;
for (let k = 2; k < numPoints+2; k++) {
sumX += scene_7.vectors[k].coord_x;
sumY += scene_7.vectors[k].coord_y;
sumY2 += scene_7.vectors[k].coord_y * scene_7.vectors[k].coord_y;
sumXY += scene_7.vectors[k].coord_x * scene_7.vectors[k].coord_y;
}
return {mapX: (sumXY-sumX*sumY/numPoints)/numPoints, mapY: (sumY2-sumY*sumY/numPoints)/numPoints};
}
// render
scene_7.render();
scene_7.render(); // have to render again to update the matrix. not sure why...
</script>
</body>
</html>