-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwheel-diagram.html
120 lines (104 loc) · 4.25 KB
/
wheel-diagram.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
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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body style="box-sizing: border-box;">
<form>
Sequence: <input type="text" name="input_sequence" size="60" value="LEQLEQDCNDICERMKNVEKDFSN" />
<input type="button" value="Submit" onclick="plot_wheel_diagram()" />
</form>
<canvas id="main_canvas" width="500px" height="500px" style="border: 1px solid black; position: absolute; left: 64; top: 64; z-index: 100;"></canvas>
<canvas id="under_canvas" width="500px" height="500px" style="border: 1px solid black; position: absolute; left: 64; top: 64; z-index: 50;"></canvas>
<script><!--
function wheel_diagram(seq){
var result=[];
const RESIDUES = ["A","L","I","V","F","Y","W","M","C","G","P","N","Q","S","T","H","R","K","D","E", "*"];
const kyte_doolittle = [1.8,3.8,4.5,4.2,2.8,-1.3,-0.9,1.9,2.5,-0.4,-1.6,-3.5,-3.5,-0.8,-0.7,-3.2,-4.5,-3.9,-3.5,-3.5, 0];
cycle = 0;
moment = [0,0];
for (var i = 0; i < seq.length; i++){
result.push([i, cycle, seq[i], kyte_doolittle[RESIDUES.indexOf(seq[i])]]);
moment[0] = moment[0] + (kyte_doolittle[RESIDUES.indexOf(seq[i])] * Math.cos(i*100/180*Math.PI));
moment[1] = moment[1] + (kyte_doolittle[RESIDUES.indexOf(seq[i])] * Math.sin(i*100/180*Math.PI));
if ((i+1)%18 == 0 && i != 0){
cycle += 1;
}
}
return [result, moment, Math.sqrt(moment[0]**2+moment[1]**2)/seq.length]
}
function plot_wheel_diagram(){
var ctx = document.getElementById('main_canvas').getContext('2d');
ctx.clearRect(0, 0, 500, 500);
var utx = document.getElementById('under_canvas').getContext('2d');
utx.fillStyle="#FFFFFF";
utx.fillRect(0, 0, 500, 500);
var initial_radius = 128;
var marker_size = 40;
var [result, moment_vec, moment_val] = wheel_diagram($('input[name="input_sequence"]').val());
var prev_point = [initial_radius,0];
var color = "#FFFFFF";
for(var res of result){
if(["R", "K", "H"].includes(res[2])){
color="#007AB7";
}else if(["D", "E"].includes(res[2])){
color="#C7243A";
}else if(["N", "Q", "S", "T"].includes(res[2])){
color="#23AC0E";
}else {
color="#333333";
}
current_point = [Math.cos(res[0]*100/180*Math.PI)*(initial_radius+res[1]*marker_size),Math.sin(res[0]*100/180*Math.PI)*(initial_radius+res[1]*marker_size)];
//Draw line
utx.beginPath();
utx.strokeStyle="#DDDDDD";
utx.fillStyle="#DDDDDD";
utx.lineWidth = 3;
utx.lineCap = "Round";
utx.moveTo(prev_point[0]+250, prev_point[1]+250);
utx.lineTo(current_point[0]+250, current_point[1]+250);
utx.stroke();
//Draw circle
ctx.strokeStyle=color;
ctx.fillStyle="#FFFFFF";
ctx.lineWidth = 5;
ctx.beginPath () ;
ctx.arc(current_point[0]+250, current_point[1]+250, marker_size/2, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
//Draw residue letter
ctx.strokeStyle=color;
ctx.fillStyle=color;
ctx.lineWidth = 0;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "bold 21px 'Helvetica Arial'";
ctx.fillText(res[2], current_point[0]+250, current_point[1]+250);
prev_point = current_point;
}
//Draw arrow
ctx.beginPath();
ctx.strokeStyle="#DDDDDD";
ctx.fillStyle="#DDDDDD";
ctx.lineWidth = 0;
ctx.lineCap = "Round";
ctx.moveTo(250, 250);
ctx.lineTo(250+moment_vec[0], 250+moment_vec[1]);
ctx.stroke();
ctx.beginPath () ;
ctx.arc(250+moment_vec[0], 250+moment_vec[1], marker_size/10, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
//Draw moment
ctx.strokeStyle="#333333";
ctx.fillStyle="#333333";
ctx.lineWidth = 0;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "bold 21px 'Helvetica Arial'";
ctx.fillText(Math.round(moment_val * 1000)/1000, 250, 250);
}
-->
</script>
</body>
</html>