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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>LJ & Morse Interaction</title>
 6     <script src="MLJ.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 face= "Times New Roman"><I>
20 		αa =  
21 		<input id="Text_02" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
22             if (!this.checkValidity()) return;
23             app.set_02(this.value);
24             document.getElementById('Slider_02').value = this.value;
25         ">
26 		<input type="range" id="Slider_02" style="width: 100px;" oninput="app.set_02(this.value); document.getElementById('Text_02').value = this.value;">
27 		</I></font>
28 	</div>
29 		
30 	<script type="text/javascript">var app = new MainMorse(
31 		document.getElementById('canvasGraph_1'), 
32 		document.getElementById('canvasGraph_2')
33 	);</script>
34 
35 </body>
36 </html>