Потенциал Ми — различия между версиями

  1 // Сравнение взаимодействий Леннард-Джонса, Ми и Морзе 
  2 // Разработчики А.М. Кривцов и Д.В. Цветков
  3 // 06.05.2014
  4 // 15.05.2014 коррекция для совместимости с Google Chrome
  5 // 06.11.2014 коррекция - удаление const (Цветков)
  6 // Интернет: tm.spbstu.ru/Mie
  7 
  8 function MainMie(canvas_1, canvas_2) {
  9 
 10     // Предварительные установки
 11 
 12 	var X_max = canvas_1.width;
 13  	var Y_max = canvas_1.height;
 14 	
 15     // Размерные параметры
 16     
 17     var a = 1.;    // длина связи
 18     var D = 1.;    // энергия связи
 19 
 20     // Расчет параметров взаимодействия
 21 
 22     var b = a * Math.pow(13./7, 1./6);    // положение минимума силы Леннард-Джонса (= 1.1086834 a)
 23     var b2 = b * b;
 24     var P0 = 12 * D / a;                  // коэффициент в выражении для силы Леннард-Джонса
 25     var P = 42. / 169 * P0 / b;           // модуль минимума силы Леннард-Джонса
 26 
 27     // Задаваемые параметры
 28    
 29     var m = 6;  							// параметр взаимодействия Ми
 30     var n = 12;  							// параметр взаимодействия Ми
 31     var kappa = 6;  						// параметр взаимодействия Морзе
 32 
 33     // Область построения графика
 34     var x_min = 0.3 * a;  
 35     var x_max = 2.5 * a;
 36     var y_min_1 = -1.5 * D;    
 37     var y_min_2 = -1.5 * P;    
 38 
 39     var y_max_1 = -y_min_1;    
 40     var y_max_2 = -y_min_2;    
 41 	
 42 	var N = X_max;                 	// число точек по оси x
 43 	var dx = x_max / N;            	// шаг по оси x
 44 	var sx = X_max / x_max;        	// масштаб по оси x
 45 
 46 	var y_min;    
 47 	var y_max;    
 48 	var sy; 							// масштаб по оси y
 49 	var Y0;  							// положение 0 оси y в экранных координатах
 50 	var context;  						// на context происходит рисование
 51 
 52 	// Установка флажков чекбоксов
 53 	var LJ_flag = true;
 54 	var Mie_flag = true;
 55 	var Morse_flag = true;       
 56 	var nm_flag = false;
 57 	var n2m_flag = false;
 58 	var kappa_flag = false;
 59 
 60     // настройка слайдеров и текстовых полей
 61     Slider_01.min = 2;       	
 62     Slider_01.max = 18;
 63     Slider_01.step = 0.1;
 64     Slider_01.value = m;     	// значение ползунка должно задаваться после min, max и step
 65     Text_01.value = m;
 66     Slider_02.min = Slider_01.min;       	
 67     Slider_02.max = Slider_01.max;
 68     Slider_02.step = Slider_01.step;
 69     Slider_02.value = n;     
 70     Text_02.value = n;
 71 	Slider_03.min = Slider_01.min;       	
 72 	Slider_03.max = Slider_01.max;
 73     Slider_03.step = Slider_01.step;
 74     Slider_03.value = kappa;     
 75     Text_03.value = kappa;
 76 	
 77 	draw();
 78 
 79     // функция, запускающаяся при перемещении слайдера
 80     this.set_01 = function(input) { m = Number(input); 											draw(); } 
 81     this.set_02 = function(input) { n = Number(input); 			nm_flag = n2m_flag = false;  	draw(); }  
 82     this.set_03 = function(input) { kappa = Number(input); 		kappa_flag = false;  			draw(); }  
 83     
 84 	// Функции, запускающиеся при изменении элементов управления
 85     this.setCheckbox_01 = function(bool) {LJ_flag = bool; 	 draw(); }
 86 	this.setCheckbox_02 = function(bool) {Mie_flag = bool; 	 draw(); }	
 87 	this.setCheckbox_03 = function(bool) {Morse_flag = bool; draw(); }	
 88     this.setCheckbox_04 = function(bool) {nm_flag = bool;  		if(!bool) return; 	n2m_flag = false;  	draw(); }
 89     this.setCheckbox_05 = function(bool) {n2m_flag = bool; 		if(!bool) return; 	nm_flag = false;  	draw(); }
 90     this.setCheckbox_06 = function(bool) {kappa_flag = bool; 	if(!bool) return; 						draw(); }
 91 
 92 	function set_n(value) 		{ n = value; 		Slider_02.value = n; 		Text_02.value = n;		}
 93 	function set_kappa(value) 	{ kappa = value; 	Slider_03.value = kappa; 	Text_03.value = kappa;	}
 94 	
 95 	// Отображение
 96 	
 97 	function draw() 
 98 	{ 
 99 		if (nm_flag) set_n(m); 
100 		if (n2m_flag) set_n(2 * m); 
101 		if (kappa_flag) set_kappa(Math.sqrt(m * n / 2)); 
102 	
103 		checkbox_04.checked = nm_flag;
104 		checkbox_05.checked = n2m_flag;
105 		checkbox_06.checked = kappa_flag;
106 	
107 		draw_1(); 
108 		draw_2(); 
109 	}
110 
111 	function draw_1()
112     {
113 	   // Расчет параметров графики
114 		
115 		y_min = y_min_1;    
116 		y_max = y_max_1;    
117 		
118 		sy = Y_max / (y_max - y_min); 			// масштаб по оси y
119 		Y0 = Y_max + y_min * sy;  				// положение 0 оси y в экранных координатах
120 
121 		context = canvas_1.getContext("2d");  	// на context происходит рисование
122 
123 		context.clearRect(0, 0, X_max, Y_max);  // очистить экран
124         
125         // Горизонтальная ось
126         context.strokeStyle = 'lightgrey';
127         context.beginPath();
128         context.moveTo(0, Y0);
129         context.lineTo(X_max, Y0);
130         context.stroke();
131 
132         // Пунктирные линии
133         context.beginPath();
134         context.setLineDash([5]);
135         context.moveTo(a * sx, Y0);
136         context.lineTo(a * sx, Y0 + D * sy);
137         context.lineTo(0,      Y0 + D * sy);
138         context.stroke();
139         context.setLineDash([0]);
140 
141         // Надписи
142         context.fillStyle = 'black';
143         context.font = "italic 20px Times"
144         context.fillText("r", x_max * sx - 15, Y0 - 7);
145         context.fillText("Π", 5, 20);
146         context.fillText("0", 3, Y0 - 3);
147         context.fillStyle = 'grey';
148         context.fillText("a", a * sx - 5, Y0 - 3);
149         context.fillText("-D", 3, Y0 + D * sy - 5);
150 
151 		// Графики потенциалов
152 		Graph(U_LJ, 	LJ_flag, 	'grey');
153 		Graph(U_Mie, 	Mie_flag, 	'blue');
154 		Graph(U_Morse, 	Morse_flag, 'magenta');
155 	}
156 
157     function draw_2()
158     {
159 	   // Расчет параметров графики
160 		
161 		y_min = y_min_2;    
162 		y_max = y_max_2;    
163 		
164 		sy = Y_max / (y_max - y_min); 			// масштаб по оси y
165 		Y0 = Y_max + y_min * sy;  				// положение 0 оси y в экранных координатах
166 
167 		context = canvas_2.getContext("2d");  	// на context происходит рисование
168 
169 		context.clearRect(0, 0, X_max, Y_max); 	// очистить экран
170         
171         // Горизонтальная ось
172         context.strokeStyle = 'lightgrey';
173         context.beginPath();
174         context.moveTo(0, Y0);
175         context.lineTo(X_max, Y0);
176         context.stroke();
177 
178         // Пунктирные линии
179         context.beginPath();
180         context.setLineDash([5]);
181         context.moveTo(b * sx, Y0);
182         context.lineTo(b * sx, Y0 + P * sy);
183         context.lineTo(0,      Y0 + P * sy);
184         context.stroke();
185         context.setLineDash([0]);
186 
187         // Надписи
188         context.fillStyle = 'black';
189         context.font = "italic 20px Times";
190         context.fillText("r", x_max * sx - 15, Y0 - 7);
191         context.fillText("F", 5, 20);
192         context.fillText("0", 3, Y0 - 3);
193         context.fillStyle = 'grey';
194         context.fillText("a", a * sx + 3, Y0 - 3);
195         context.fillText("b", b * sx - 3, Y0 - 3);
196         context.fillText("-P", 3, Y0 + P * sy - 5);
197 		
198 		// Графики сил
199 		Graph(F_LJ, 	LJ_flag, 	'grey');
200 		Graph(F_Mie, 	Mie_flag, 	'blue');
201 		Graph(F_Morse, 	Morse_flag, 'magenta');
202 	}
203 
204 	// Построение графика функции
205 	
206 	function Graph(F, flag, color)
207 	{
208 		if (!flag) return;
209 		
210 		context.strokeStyle = color;
211 		context.beginPath();
212 		for (var x = x_min; x < x_max; x+=dx)
213 		{
214 			var y = F(x);
215 			var X = x * sx; 
216 			var Y = Y0 - y * sy; 
217 
218 //			if (x == x_min) 	context.moveTo(X, Y);   // Не требуется?
219 			if (Y > -Y_max) 	context.lineTo(X, Y);	// Отключение графики сильно выходящей за границы области
220 		}
221 		context.stroke();
222 	}	
223 	
224     // Потенциал Ми
225     
226     function U_Mie(r)
227     {
228 		var s = a / r;
229 //        return D / (n - m) * (m * Math.pow(s, n) - n * Math.pow(s, m));
230         var n1 = n + 0.00001;		// для обработки случая m = n
231 		return D / (n1 - m) * (m * Math.pow(s, n1) - n1 * Math.pow(s, m));
232     }
233 
234 	// Сила Ми
235     
236     function F_Mie(r)
237     {
238 		var s = a / r;
239 //        return n * m / (n - m) * D / a * (Math.pow(s, n + 1) - Math.pow(s, m + 1));
240         var n1 = n + 0.00001;		// для обработки случая m = n
241         return n1 * m / (n1 - m) * D / a * (Math.pow(s, n1 + 1) - Math.pow(s, m + 1));
242     }
243  
244     // Потенциал Морзе
245     
246     function U_Morse(r)
247     {
248         var al = kappa / a;
249 		var s = Math.exp(al * (a - r));
250         return D * s * (s - 2);
251     }
252 
253 	// Сила Морзе
254     
255     function F_Morse(r)
256     {
257         var al = kappa / a;
258 		var s = Math.exp(al * (a - r));
259         return 2 * al * D * s * (s - 1);
260     }
261  
262     // Потенциал Леннард-Джонса
263     
264     function U_LJ(r)
265     {
266         var s2 = 1 / (r * r);
267         var s6 = s2 * s2 * s2;
268         return D * s6 * (s6 - 2);
269     }    
270 	
271 	// Сила Леннард-Джонса
272     
273     function F_LJ(r)
274     {
275         var s2 = 1 / (r * r);
276         var s4 = s2 * s2;
277         return P0 * s4 * s4 * (s4 * s2 - 1) * r;
278     }
279 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>LJ, Mie & Morse Interaction</title>
 6     <script src="Mie.js"></script>
 7 </head>
 8 <body>
 9     <canvas id="canvasGraph_1" width="800" height="300" style="border:1px solid #000000;"></canvas>
10     <canvas id="canvasGraph_2" width="800" height="300" style="border:1px solid #000000;"></canvas>
11 
12  	<!--Выбор графика (чекбоксы)-->
13 	<div>
14         Взаимодействие:
15 		<font color="#000000" size="5"><B>—</B></font>
16 		<input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>Леннард-Джонса,
17         <font color="#0000ff" size="5"><B>—</B></font>
18 		<input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>Ми,
19         <font color="#ff00ff" size="5"><B>—</B></font>
20 		<input type="checkbox" id="checkbox_03" name="" onchange="app.setCheckbox_03(this.checked);" checked/>Морзе
21     </div>	
22 
23     <!--Установка параметров взаимодействия (текстовые поля и слайдеры)-->
24     <div>Ми:
25         <font face= "Times New Roman"><I>
26         m = <input id="Text_01" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
27             // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
28             if (!this.checkValidity()) return;
29             app.set_01(this.value);
30             document.getElementById('Slider_01').value = this.value;
31         "> 
32 		<input type="range" id="Slider_01" style="width: 100px;" oninput="app.set_01(this.value); document.getElementById('Text_01').value = this.value;">
33 		n = <input id="Text_02" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
34             if (!this.checkValidity()) return;
35             app.set_02(this.value);
36             document.getElementById('Slider_02').value = this.value;
37         ">
38 		<input type="range" id="Slider_02" style="width: 100px;" oninput="app.set_02(this.value); document.getElementById('Text_02').value = this.value;">
39 		</I></font>
40 		Морзе:
41 		<font face= "Times New Roman"><I>
42 		αa =  
43 		<input id="Text_03" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
44             if (!this.checkValidity()) return;
45             app.set_03(this.value);
46             document.getElementById('Slider_03').value = this.value;
47         ">
48 		<input type="range" id="Slider_03" style="width: 100px;" oninput="app.set_03(this.value); document.getElementById('Text_03').value = this.value;">
49 		</I></font>
50 	</div>
51     
52 	 <!--Задание связей (чекбоксы)-->
53 	<div>
54         Связь между параметрами:<font face= "Times New Roman"><I>
55 		<input type="checkbox" id="checkbox_04" name="" onchange="app.setCheckbox_04(this.checked);" unchecked/>n = m,
56 		<input type="checkbox" id="checkbox_05" name="" onchange="app.setCheckbox_05(this.checked);" unchecked/>n = 2m,
57 		<input type="checkbox" id="checkbox_06" name="" onchange="app.setCheckbox_06(this.checked);" unchecked/>(αa)<SUP>2</SUP> = nm/2 
58 		</I></font>
59     </div>	
60 	
61 	<script type="text/javascript">var app = new MainMie(
62 		document.getElementById('canvasGraph_1'), 
63 		document.getElementById('canvasGraph_2')
64 	);</script>
65 
66 </body>
67 </html>