-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathewaldsphere3.html
98 lines (92 loc) · 3.24 KB
/
ewaldsphere3.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
<!DOCTYPE html>
<title>Ewald Sphere Tutorial</title>
<link rel="stylesheet" href="index.css">
<body onload="setup();">
<nav>
<a href="ewaldintro.html">Introduction</a>
<a href="ewaldsphere1.html">1</a>
<a href="ewaldsphere2.html">2</a>
<a href="ewaldsphere3.html">3</a>
<a href="ewaldsphere4.html">4</a>
<a href="ewaldsphere5.html">5</a>
</nav>
<div id="controls">
<div>
<label>Rotate crystal around Z</label><br>
<input type="range" min="-45" max="45" value="0" id="anglez" hidden><br>
<button id="rotl5z">⟲</button>
<button id="rotl1z">↶</button>
<span>θ = <span id="thetaz">0</span>°</span>
<button id="rotr1z">↷</button>
<button id="rotr5z">⟳</button>
</div>
<div>
<button id="clear">Clear detector</button>
<button id="recentre">Reset view</button>
</div>
<div>
<input type="checkbox" id="fullbeams" name="fullbeams" Checked>
<label for="fullbeams">Show Full Beams</label>
</div>
<div>
<label for="a">Unit Cell Length a in Å</label><br>
<input type="number" id="a" min="5" max="15" onchange="updateunitcelldimensions()" value="10">
</div>
<div>
<label for="b">Unit Cell Length b in Å</label><br>
<input type="number" id="b" min="5" max="15" onchange="updateunitcelldimensions()" value="10">
</div>
<div>
<label for="c">Unit Cell Length c in Å</label><br>
<input type="number" id="c" min="5" max="25" onchange="updateunitcelldimensions()" value="25">
</div>
<div>
<label>Rotate camera</label><br>
<input type="range" min="0" max="180" value="45" id="camera">
</div>
</div>
<canvas id="canvas"></canvas>
<div id="instructions">
<h2>Diffraction from an tetragonal crystal</h2>
<p>The next crystal has two short cell axes (a and b) and one long axis (c).</p>
<p>
Try rotating the crystal.
Could you tell from the diffraction pattern that there are at least two different axis lengths here?
Could you make an estimate of the ratio of the axes?
</p>
<p>
How would you reorient the crystal in order to get an estimate of the third cell axis?
Could you estimate the third axis from the spots available in this orientation? (This is much harder.)
</p>
</div>
<script>
var spacinga = 100 / 10;
var spacingb = 100 / 10;
var spacingc = 100 / 10;
var alpha = 90;
var beta = 90;
</script>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="index.js"></script>
<script>
function updateunitcelldimensions() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
if (A >= 5 && A <= 25) {
if (B >= 5 && B <= 25) {
if (C >= 5 && C <= 25) {
spacinga = 100.0 / Number(A);
spacingb = 100.0 / Number(B);
spacingc = 100.0 / Number(C);
alpha = 90;
beta = 90;
updateunitcell();
reset();
}
}
}
}
</script>
</body>