Хрупкое взаимодействие Леннард-Джонса — различия между версиями

  1 // Хрупкое взаимодействий Леннард-Джонса 
  2 // Brittle Lennard-Jones (BLJ) interaction
  3 // Разработчик А.М. Кривцов 
  4 // 17.05.2014 
  5 // 06.11.2014 коррекция - удаление const (Цветков)
  6 // Интернет: tm.spbstu.ru/BLJ
  7 
  8 function MainBLJ(canvas) {
  9 
 10     // Предварительные установки
 11 
 12 	var X_max = canvas.width;
 13  	var Y_max = canvas.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 al;   								// alpha - параметр взаимодействия
 30 	var ac;   								// радиус обрезания взаимодействия
 31 	
 32 	var al1, ac2;							// производные параметры
 33 	
 34     // Задание начальных значений параметров
 35    
 36 	set_al(1);
 37 	set_ac(1.5 * a);
 38 
 39     // Область построения графика
 40     var x_min = 0.9 * a;  
 41     var x_max = 2.5 * a;
 42     var y_min = -1.2 * P;    
 43     var y_max = 2 * P;      
 44 
 45  	var N = X_max;                 	// число точек по оси x
 46 	var dx = x_max / N;            	// шаг по оси x
 47 	var sx = X_max / x_max;        	// масштаб по оси x
 48 
 49 	var sy; 							// масштаб по оси y
 50 	var Y0;  							// положение 0 оси y в экранных координатах
 51 	var context;  						// на context происходит рисование
 52 
 53 	// Установка флажков чекбоксов
 54 	var LJ_flag = true;
 55 	var BLJ_flag = true;
 56 
 57     // настройка слайдеров и текстовых полей
 58     Slider_01.min = 0;       
 59     Slider_01.max = 4;
 60     Slider_01.step = 0.01;
 61     Slider_01.value = al;     			// значение ползунка должно задаваться после min, max и step
 62     Text_01.value = al;
 63     Slider_02.min = 1.2 * a;       		// лучше было бы взять acSlider.min = b, но b не кратно значению acSlider.step, что портит слайдер
 64     Slider_02.max = x_max;
 65     Slider_02.step = 0.01 * a;
 66     Slider_02.value = ac;     	
 67     Text_02.value = ac;
 68 	
 69 	draw();
 70 
 71     // функция, запускающаяся при перемещении слайдера
 72     this.set_01 = function(input) { set_al(input);	draw(); }  
 73     this.set_02 = function(input) { set_ac(input);	draw(); }  
 74     
 75 	// Функции, запускающиеся при изменении элементов управления
 76     this.setCheckbox_01 = function(bool) {LJ_flag = bool; 	 draw(); }
 77 	this.setCheckbox_02 = function(bool) {BLJ_flag = bool; 	 draw(); }	
 78 
 79 	function set_ac(value)
 80 	{
 81 		ac = Number(value);
 82 		ac2 = ac * ac;	
 83 	}
 84 
 85 	function set_al(value)
 86 	{
 87 		al = Number(value);
 88 		al1 = 1 + Math.sqrt(al / (1 + al));	
 89 	}
 90 	
 91 	// Отображение
 92 	
 93 	function draw() 
 94 	{ 
 95 	   // Расчет параметров графики
 96 		
 97 		sy = Y_max / (y_max - y_min); 			// масштаб по оси y
 98 		Y0 = Y_max + y_min * sy;  				// положение 0 оси y в экранных координатах
 99 
100 		context = canvas.getContext("2d");  	// на context происходит рисование
101 
102 		context.clearRect(0, 0, X_max, Y_max); 	// очистить экран
103         
104         // Горизонтальная ось
105         context.strokeStyle = 'lightgrey';
106         context.beginPath();
107         context.moveTo(0, Y0);
108         context.lineTo(X_max, Y0);
109         context.stroke();
110 
111         // Пунктирные линии
112         context.beginPath();
113         context.setLineDash([5]);
114         context.moveTo(b * sx, Y0);
115         context.lineTo(b * sx, Y0 + P * sy);
116         context.lineTo(0,      Y0 + P * sy);
117         context.stroke();
118         context.setLineDash([0]);
119 
120         // Надписи
121         context.fillStyle = 'black';
122         context.font = "italic 20px Times";
123         context.fillText("r", x_max * sx - 15, Y0 - 7);
124         context.fillText("F", 5, 20);
125         context.fillText("0", 3, Y0 - 3);
126         context.fillStyle = 'grey';
127         context.fillText("a", a * sx + 3, Y0 - 3);
128         context.fillText("b", b * sx - 3, Y0 - 3);
129         context.fillText("-P", 3, Y0 + P * sy - 5);
130         if (BLJ_flag)
131 		{
132 			var dX = 0, dY = 17;
133 			if (ac > 1.5)  { dX = 10; dY = 0; }        
134 			if (ac > 2.38) { dX = 0;  dY = 19; }
135 			context.fillText("a", ac * sx - 10 + dX, Y0 - 4 + dY);
136 			context.font = "12px Times";
137 			context.fillText("cut", ac * sx + dX, Y0 - 3 + dY);
138 		}
139 		
140 		// Графики сил
141 		Graph(F_BLJ, 	BLJ_flag, 	'red');
142 		Graph(F_LJ, 	LJ_flag, 	'black');
143 	}
144 
145 	// Построение графика функции
146 	
147 	function Graph(F, flag, color)
148 	{
149 		if (!flag) return;
150 		
151 		context.strokeStyle = color;
152 		context.beginPath();
153 		for (var x = x_min; x < x_max; x+=dx)
154 		{
155 			var y = F(x);
156 			var X = x * sx; 
157 			var Y = Y0 - y * sy; 
158 
159 			if (Y > -Y_max) context.lineTo(X, Y);	// Графика, сильно выходящяя за границы области, отключается
160 		}
161 		context.stroke();
162 	}	
163 	
164     // Потенциал Леннард-Джонса
165     
166     function U_LJ(r)
167     {
168         var s2 = 1 / (r * r);
169         var s6 = s2 * s2 * s2;
170         return D * s6 * (s6 - 2);
171     }    
172 	
173 	// Сила Леннард-Джонса
174     
175     function F_LJ(r)
176     {
177         var s2 = 1 / (r * r);
178         var s4 = s2 * s2;
179         return P0 * s4 * s4 * (s4 * s2 - 1) * r;
180     }
181 	
182 	// Укороченная сила Леннард-Джонса
183     
184     function F_BLJ(r)
185     {
186         return k(r) * F_LJ(r);
187     }
188 
189     // Rоэффициент формы
190  
191     function k(x)
192     {
193         if (x > ac) return 0; 
194         if (x < b) return 1; 
195 
196         var z = (x * x - b2) / (ac2 - b2)
197         var z2 = z * z;
198         return (1 + al) * (1 - al1 * z2) * (1 - al1 * z2) - al;
199 	}    
200 	
201 	// Сглаживающий коэффициент
202  
203     function k1(x)
204     {
205         if (x > ac) return 0; 
206         if (x < b) return 1; 
207 
208         var z = (x * x - b2) / (ac2 - b2)
209         var z2 = z * z;
210         return (1 - z2) * (1 - z2);
211     }
212 
213 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Brittle Lennard-Jones Interaction (BLJ)</title>
 6     <script src="BLJ.js"></script>
 7 </head>
 8 <body>
 9     <canvas id="canvasGraph" width="800" height="400" style="border:1px solid #000000;"></canvas>
10 
11  	<!--Выбор графика (чекбоксы)-->
12 	<div>
13         Сила взаимодействия Леннард-Джонса:
14 		<font color="#000000" size="5"><B>—</B></font>
15 		<input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>классическая,
16         <font color="#ff0000" size="5"><B>—</B></font>
17 		<input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>хрупкая
18     </div>	
19 
20     <!--Установка параметров взаимодействия (текстовые поля и слайдеры)-->
21     <div>
22         <font face= "Times New Roman"><I>
23         α = <input id="Text_01" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
24             // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
25             if (!this.checkValidity()) return;
26             app.set_01(this.value);
27             document.getElementById('Slider_01').value = this.value;
28         "> 
29 		<input type="range" id="Slider_01" style="width: 100px;" oninput="app.set_01(this.value); document.getElementById('Text_01').value = this.value;">
30 		a</I><SUB>cut</SUB> = <input id="Text_02" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
31             if (!this.checkValidity()) return;
32             app.set_02(this.value);
33             document.getElementById('Slider_02').value = this.value;
34         "><I> a</I>
35 		<input type="range" id="Slider_02" style="width: 100px;" oninput="app.set_02(this.value); document.getElementById('Text_02').value = this.value;">
36 		</font>
37 	</div>
38     
39 	<script type="text/javascript">var app = new MainBLJ(
40 		document.getElementById('canvasGraph')
41 	);</script>
42 
43 </body>
44 </html>