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

// Сравнение взаимодействий Морзе и Леннард-Джонса 
// Разработчики А.М. Кривцов и Д.В. Цветков
// 16.05.2014
// Интернет: tm.spbstu.ru/Morse

function MainMorse(canvas_1, canvas_2) {

    // Предварительные установки

	const X_max = canvas_1.width;
 	const Y_max = canvas_1.height;
	
    // Размерные параметры
    
    const a = 1.;    // длина связи
    const D = 1.;    // энергия связи

    // Расчет параметров взаимодействия

    const b = a * Math.pow(13./7, 1./6);    // положение минимума силы Леннард-Джонса (= 1.1086834 a)
    const b2 = b * b;
    const P0 = 12 * D / a;                  // коэффициент в выражении для силы Леннард-Джонса
    const P = 42. / 169 * P0 / b;           // модуль минимума силы Леннард-Джонса

    // Задаваемые параметры
   
    var kappa = 6;  						// параметр взаимодействия Морзе

    // Область построения графика
    const x_min = 0.3 * a;  
    const x_max = 2.5 * a;
    const y_min_1 = -1.5 * D;    
    const y_min_2 = -1.5 * P;    

    const y_max_1 = -y_min_1;    
    const y_max_2 = -y_min_2;    
	
	const N = X_max;                 	// число точек по оси x
	const dx = x_max / N;            	// шаг по оси x
	const sx = X_max / x_max;        	// масштаб по оси x

	var y_min;    
	var y_max;    
	var sy; 							// масштаб по оси y
	var Y0;  							// положение 0 оси y в экранных координатах
	var context;  						// на context происходит рисование

	// Установка флажков чекбоксов
	var LJ_flag = true;
	var Morse_flag = true;       

    Slider_02.min = 2;       	
    Slider_02.max = 18;
    Slider_02.step = 0.1;
    Slider_02.value = kappa;     
    Text_02.value = kappa;
	
	draw();

    // функция, запускающаяся при перемещении слайдера
    this.set_02 = function(input) { kappa = Number(input); 		draw(); }  
    
	// Функции, запускающиеся при изменении элементов управления
    this.setCheckbox_01 = function(bool) {LJ_flag = bool; 	 draw(); }
	this.setCheckbox_02 = function(bool) {Morse_flag = bool; draw(); }	

	// Отображение
	
	function draw() 
	{ 
		draw_1(); 
		draw_2(); 
	}

	function draw_1()
    {
	   // Расчет параметров графики
		
		y_min = y_min_1;    
		y_max = y_max_1;    
		
		sy = Y_max / (y_max - y_min); 			// масштаб по оси y
		Y0 = Y_max + y_min * sy;  				// положение 0 оси y в экранных координатах

		context = canvas_1.getContext("2d");  	// на context происходит рисование

		context.clearRect(0, 0, X_max, Y_max);  // очистить экран
        
        // Горизонтальная ось
        context.strokeStyle = 'lightgrey';
        context.beginPath();
        context.moveTo(0, Y0);
        context.lineTo(X_max, Y0);
        context.stroke();

        // Пунктирные линии
        context.beginPath();
        context.setLineDash([5]);
        context.moveTo(a * sx, Y0);
        context.lineTo(a * sx, Y0 + D * sy);
        context.lineTo(0,      Y0 + D * sy);
        context.stroke();
        context.setLineDash([0]);

        // Надписи
        context.fillStyle = 'black';
        context.font = "italic 20px Times"
        context.fillText("r", x_max * sx - 15, Y0 - 7);
        context.fillText("Π", 5, 20);
        context.fillText("0", 3, Y0 - 3);
        context.fillStyle = 'grey';
        context.fillText("a", a * sx - 5, Y0 - 3);
        context.fillText("-D", 3, Y0 + D * sy - 5);

		// Графики потенциалов
		Graph(U_LJ, 	LJ_flag, 	'grey');
		Graph(U_Morse, 	Morse_flag, 'magenta');
	}

    function draw_2()
    {
	   // Расчет параметров графики
		
		y_min = y_min_2;    
		y_max = y_max_2;    
		
		sy = Y_max / (y_max - y_min); 			// масштаб по оси y
		Y0 = Y_max + y_min * sy;  				// положение 0 оси y в экранных координатах

		context = canvas_2.getContext("2d");  	// на context происходит рисование

		context.clearRect(0, 0, X_max, Y_max); 	// очистить экран
        
        // Горизонтальная ось
        context.strokeStyle = 'lightgrey';
        context.beginPath();
        context.moveTo(0, Y0);
        context.lineTo(X_max, Y0);
        context.stroke();

        // Пунктирные линии
        context.beginPath();
        context.setLineDash([5]);
        context.moveTo(b * sx, Y0);
        context.lineTo(b * sx, Y0 + P * sy);
        context.lineTo(0,      Y0 + P * sy);
        context.stroke();
        context.setLineDash([0]);

        // Надписи
        context.fillStyle = 'black';
        context.font = "italic 20px Times";
        context.fillText("r", x_max * sx - 15, Y0 - 7);
        context.fillText("F", 5, 20);
        context.fillText("0", 3, Y0 - 3);
        context.fillStyle = 'grey';
        context.fillText("a", a * sx + 3, Y0 - 3);
        context.fillText("b", b * sx - 3, Y0 - 3);
        context.fillText("-P", 3, Y0 + P * sy - 5);
		
		// Графики сил
		Graph(F_LJ, 	LJ_flag, 	'g');
		Graph(F_Morse, 	Morse_flag, 'magenta');
	}

	// Построение графика функции
	
	function Graph(F, flag, color)
	{
		if (!flag) return;
		
		context.strokeStyle = color;
		context.beginPath();
		for (var x = x_min; x < x_max; x+=dx)
		{
			var y = F(x);
			var X = x * sx; 
			var Y = Y0 - y * sy; 

			if (Y > -Y_max) context.lineTo(X, Y);	// Графика, сильно выходящяя за границы области, отключается
		}
		context.stroke();
	}	

    // Потенциал Морзе
    
    function U_Morse(r)
    {
        var al = kappa / a;
		var s = Math.exp(al * (a - r));
        return D * s * (s - 2);
    }

	// Сила Морзе
    
    function F_Morse(r)
    {
        var al = kappa / a;
		var s = Math.exp(al * (a - r));
        return 2 * al * D * s * (s - 1);
    }
 
    // Потенциал Леннард-Джонса
    
    function U_LJ(r)
    {
        var s2 = 1 / (r * r);
        var s6 = s2 * s2 * s2;
        return D * s6 * (s6 - 2);
    }    
	
	// Сила Леннард-Джонса
    
    function F_LJ(r)
    {
        var s2 = 1 / (r * r);
        var s4 = s2 * s2;
        return P0 * s4 * s4 * (s4 * s2 - 1) * r;
    }

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>LJ & Morse Interaction</title>
    <script src="MLJ.js"></script>
</head>
<body>
    <canvas id="canvasGraph_1" width="800" height="300" style="border:1px solid #000000;"></canvas>
    <canvas id="canvasGraph_2" width="800" height="300" style="border:1px solid #000000;"></canvas>

 	<!--Выбор графика (чекбоксы)-->
	<div>
        Взаимодействие:
	<font color="#000000" size="5"><B>—</B></font>
	<input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);" checked/>Леннард-Джонса,
        <font color="#0000ff" size="5"><B>—</B></font>
	<input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>Морзе:
 		<font face= "Times New Roman"><I>
		αa =  
		<input id="Text_02" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
            if (!this.checkValidity()) return;
            app.set_02(this.value);
            document.getElementById('Slider_02').value = this.value;
        ">
		<input type="range" id="Slider_02" style="width: 100px;" oninput="app.set_02(this.value); document.getElementById('Text_02').value = this.value;">
		</I></font>
	</div>
		
	<script type="text/javascript">var app = new MainMorse(
		document.getElementById('canvasGraph_1'), 
		document.getElementById('canvasGraph_2')
	);</script>

</body>
</html>