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

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

function MainMie(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 m = 6;  							// параметр взаимодействия Ми
    var n = 12;  							// параметр взаимодействия Ми
    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 Mie_flag = true;
	var Morse_flag = true;       
	var nm_flag = false;
	var n2m_flag = false;
	var kappa_flag = false;

    // настройка слайдеров и текстовых полей
    Slider_01.min = 2;       	
    Slider_01.max = 18;
    Slider_01.step = 0.1;
    Slider_01.value = m;     	// значение ползунка должно задаваться после min, max и step
    Text_01.value = m;
    Slider_02.min = Slider_01.min;       	
    Slider_02.max = Slider_01.max;
    Slider_02.step = Slider_01.step;
    Slider_02.value = n;     
    Text_02.value = n;
	Slider_03.min = Slider_01.min;       	
	Slider_03.max = Slider_01.max;
    Slider_03.step = Slider_01.step;
    Slider_03.value = kappa;     
    Text_03.value = kappa;
	
	draw();

    // функция, запускающаяся при перемещении слайдера
    this.set_01 = function(input) { m = Number(input); 											draw(); } 
    this.set_02 = function(input) { n = Number(input); 			nm_flag = n2m_flag = false;  	draw(); }  
    this.set_03 = function(input) { kappa = Number(input); 		kappa_flag = false;  			draw(); }  
    
	// Функции, запускающиеся при изменении элементов управления
    this.setCheckbox_01 = function(bool) {LJ_flag = bool; 	 draw(); }
	this.setCheckbox_02 = function(bool) {Mie_flag = bool; 	 draw(); }	
	this.setCheckbox_03 = function(bool) {Morse_flag = bool; draw(); }	
    this.setCheckbox_04 = function(bool) {nm_flag = bool;  		if(!bool) return; 	n2m_flag = false;  	draw(); }
    this.setCheckbox_05 = function(bool) {n2m_flag = bool; 		if(!bool) return; 	nm_flag = false;  	draw(); }
    this.setCheckbox_06 = function(bool) {kappa_flag = bool; 	if(!bool) return; 						draw(); }

	function set_n(value) 		{ n = value; 		Slider_02.value = n; 		Text_02.value = n;		}
	function set_kappa(value) 	{ kappa = value; 	Slider_03.value = kappa; 	Text_03.value = kappa;	}
	
	// Отображение
	
	function draw() 
	{ 
		if (nm_flag) set_n(m); 
		if (n2m_flag) set_n(2 * m); 
		if (kappa_flag) set_kappa(Math.sqrt(m * n / 2)); 
	
		checkbox_04.checked = nm_flag;
		checkbox_05.checked = n2m_flag;
		checkbox_06.checked = kappa_flag;
	
		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_Mie, 	Mie_flag, 	'blue');
		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_Mie, 	Mie_flag, 	'blue');
		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 (x == x_min) context.moveTo(X, Y);
			else            context.lineTo(X, Y);
		}
		context.stroke();
	}	
	
    // Потенциал Ми
    
    function U_Mie(r)
    {
		var s = a / r;
//        return D / (n - m) * (m * Math.pow(s, n) - n * Math.pow(s, m));
        var n1 = n + 0.00001;		// для обработки случая m = n
		return D / (n1 - m) * (m * Math.pow(s, n1) - n1 * Math.pow(s, m));
    }

	// Сила Ми
    
    function F_Mie(r)
    {
		var s = a / r;
//        return n * m / (n - m) * D / a * (Math.pow(s, n + 1) - Math.pow(s, m + 1));
        var n1 = n + 0.00001;		// для обработки случая m = n
        return n1 * m / (n1 - m) * D / a * (Math.pow(s, n1 + 1) - Math.pow(s, m + 1));
    }
 
    // Потенциал Морзе
    
    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, Mie & Morse Interaction</title>
    <script src="Mie.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 color="#ff00ff" size="5"><B>—</B></font>
		<input type="checkbox" id="checkbox_03" name="" onchange="app.setCheckbox_03(this.checked);" checked/>Морзе
    </div>	

    <!--Установка параметров взаимодействия (текстовые поля и слайдеры)-->
    <div>Ми:
        <font face= "Times New Roman"><I>
        m = <input id="Text_01" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
            // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
            if (!this.checkValidity()) return;
            app.set_01(this.value);
            document.getElementById('Slider_01').value = this.value;
        "> 
		<input type="range" id="Slider_01" style="width: 100px;" oninput="app.set_01(this.value); document.getElementById('Text_01').value = this.value;">
		n = <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>
		Морзе:
		<font face= "Times New Roman"><I>
		αa =  
		<input id="Text_03" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
            if (!this.checkValidity()) return;
            app.set_03(this.value);
            document.getElementById('Slider_03').value = this.value;
        ">
		<input type="range" id="Slider_03" style="width: 100px;" oninput="app.set_03(this.value); document.getElementById('Text_03').value = this.value;">
		</I></font>
	</div>
    
	 <!--Задание связей (чекбоксы)-->
	<div>
        Связь между параметрами:<font face= "Times New Roman"><I>
		<input type="checkbox" id="checkbox_04" name="" onchange="app.setCheckbox_04(this.checked);" unchecked/>n = m,
		<input type="checkbox" id="checkbox_05" name="" onchange="app.setCheckbox_05(this.checked);" unchecked/>n = 2m,
		<input type="checkbox" id="checkbox_06" name="" onchange="app.setCheckbox_06(this.checked);" unchecked/>(αa)<SUP>2</SUP> = nm/2 
		</I></font>
    </div>	
	
	<script type="text/javascript">var app = new MainMie(
		document.getElementById('canvasGraph_1'), 
		document.getElementById('canvasGraph_2')
	);</script>

</body>
</html>