-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
129 lines (119 loc) · 6.7 KB
/
index.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
121
122
123
124
125
126
127
128
129
<html>
<head>
<script src="ising.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38463781-6', 'mattbierbaum.github.io');
ga('send', 'pageview');
</script>
<link rel="stylesheet" href="style.css">
<title>ising.js</title>
</head>
<body>
<div id='big'>
<center><h1>Ising simulation</h1></center>
<div id='ising'>
<canvas id='canvas' height=512 width=512></canvas>
</div>
<div id='panelcontainer'>
<!-- =================== add control panel items between here ============== -->
<div id='panel'>
<pre class='code' id='label_time'>initializing</pre>
<pre class='code' id='label_energy'>initializing</pre>
<pre class='code' id='label_mag'>initializing</pre>
<br>
<div id='isinggraph'>
<canvas id='canvas-graph' height=150 width=370></canvas>
</div>
<br>
<div>
<label class='eb_label' for="temp" title="Temperature">Temperature</label>
<input style='width:150px;' type="range" id="temp" min=-5 max=2 step=0.000001 value=0 oninput='update_temp()' onchange="update_temp()"></input>
<span onclick='dotextbox(this.id)' class='eb_span' id="label_temp"></span>
<input style='width: 80px; display: none;' id='label_temp_input' type='text' value='' onblur='undotextbox(this.id)'>
</div>
<div>
<label class='eb_label' for="field" title="External field">Field</label>
<input style="width:150px;" type="range" id="field" min=-5 max=5 step=0.00001 value=0.0 oninput='update_field()' onchange="update_field()"></input>
<span onclick='dotextbox(this.id)' class='eb_span' id="label_field"></span>
<input style='width: 80px; display: none;' id='label_field_input' type='text' value='' onblur='undotextbox(this.id)'>
</div>
<div>
<label class='eb_label' for="frames" title="Samples per redraw">Sweep skip</label>
<input style="width:150px;" type="range" id="frames" min=-2 max=2 step=0.00001 value=0 oninput='update_frames()' onchange="update_frames()"></input>
<span onclick='dotextbox(this.id)' class='eb_span' id="label_frames"></span>
<input style='width: 80px; display: none;' id='label_frames_input' type='text' value='' onblur='undotextbox(this.id)'>
</div>
<div class="withspace">
<label class='eb_label' for='method'>Update method:</label>
<input type='radio' name='method' onclick='update_method()' checked=true id='method_metropolis' value='metropolis'>metropolis</input>
<input type='radio' name='method' onclick='update_method()' id='method_wolff' value='wolff'>wolff</input>
</div>
<div class="withspace">
<label class='eb_label' for='num'>Lattice size</label>
<select id='changenum' onchange='change_num()'>
<option value="512">512</option>
<option value="256" selected="selected">256</option>
<option value="128">128</option>
<option value="64">64</option>
<option value="32">32</option>
<option value="16">16</option>
</select>
</div>
<div class="withspace">
<label class='eb_label' for='num'>Graph type</label>
<!--<input type='text' id='num' value=0></input>
<input type='button' id='changenum' value='Change' onclick='change_num()'></input>-->
<select id='changegraph' onchange='change_graph()'>
<option value="none">none</option>
<option value="energy" selected='selected'>e(t)</option>
<option value="mag">m(t)</option>
<!--<option value="eavg"><e>(t)</option>-->
<!--<option value="mavg"><m>(t)</option>-->
</select>
</div>
<div>
<center>
<input type='button' id='dostep' value='Step' onclick='update_step()'></input>
<input type='button' id='pause' value='Pause' onclick='update_pause()'></input>
<input type='button' id='restart' value='Restart' onclick='update_restart()'></input>
<input type='button' id='resetdata' value='Reset data' onclick='init_measurements()'></input>
<br>
<input type='button' id='downloaddata' value='Download data' onclick='download_measurements()'></input>
<input type='button' id='downloadgraph' value='Download graph' onclick='download_graph()'></input>
<input type='button' id='downloadgraph' value='Download field' onclick='download_field()'></input>
</center>
</div>
</div>
<!-- ========================== and here ================================= -->
</div>
<br>
<br>
<p>Simulation of the Ising model. You can choose between two update methods -
metropolis and Wolff algorithm. Several measurements are stored while running
including the current energy and magnetization, their averages, and their
variances. The current value of each can be found at the top of the right
panel. A graph of one value versus time can be directly below that. The
particular variable can be changed via the 'Graph type' dropdown box. These
measurements can be reset at any time by pressing 'Reset data'. The 'Reset'
button restarts the simulation at infinite temperature (implies 'Reset
data').</p>
<p>The measurements as a time series as well as the graph and actual lattice
can be downloaded via the buttons on the button.</p>
<p>The other parameters can be set by the sliders or by clicking on the number
to the right of the slider, typing in a number, and pressing enter. They are:</p>
<ul>
<li>Temperature - typical temperature, critical is around T_c = 2.26918531421</li>
<li>Field - external magnetic field, H</li>
<li>Sweep skip - the simulation can be graphics limited, this determines the
number of sweeps between drawing</li>
<li>Lattice size - grid size on a side, height = width</li>
</ul>
<p>Note: the graph can slow down the simulation at long times. To speed up
simulation, select 'none' for 'Graph type'. Data is still being collected.</p>
</div>
</body>
</html>