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

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

function MainMLJ(canvas_1, canvas_2, Slider_01, Text_01) {

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

	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 fps = 50;                         // frames per second - число кадров в секунду (качество отображения)

    // Область построения графика
    const x_min = 0.1 * a;  
    const x_max = 2.5 * a;
    const y_min_1 = -1.5 * D;    
    const y_max_1 = -y_min_1;    
    const y_min_2 = -1.5 * P;    
    const y_max_2 = -y_min_2;    
	
	// Установка флажков чекбоксов
	var LJ_flag = true;
	var Morse_flag = true;       

    // настройка слайдеров и текстовых полей
    Slider_01.min = 2;       	// лучше было бы взять Slider_01.min = b, но b не кратно значению Slider_01.step, что портит слайдер
    Slider_01.max = 18;
    Slider_01.step = 0.1;
    Slider_01.value = kappa;     // значение ползунка должно задаваться после min, max и step
    Text_01.value = kappa;
    
	draw_1(); draw_2();

    // функция, запускающаяся при перемещении слайдера
    this.set_01 = function(input) 
	{ 
		kappa = input;	// input - значение на слайдере 
		draw_1(); draw_2();
	} 
    
	// Функции, запускающиеся при изменении элементов управления

    this.setCheckbox_01 = function(bool) {LJ_flag = bool; draw_1(); draw_2(); }
	this.setCheckbox_02 = function(bool) {Morse_flag = bool; draw_1(); draw_2(); }	
	
    // Отображение
	
	function draw_1()
    {
	   // Расчет параметров графики
		
		const y_min = y_min_1;    
		const y_max = y_max_1;    
		
		const N = X_max;                 	// число точек по оси x
		const dx = x_max / N;            	// шаг по оси x
		const sx = X_max / x_max;        	// масштаб по оси x
		const sy = Y_max / (y_max - y_min); // масштаб по оси y
		const Y0 = Y_max + y_min * sy;  	// положение 0 оси y в экранных координатах

		var 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);

        // График (потенциал Леннард-Джонса)
        context.strokeStyle = 'black';
        context.beginPath();
        if (LJ_flag)
		for (var x = x_min; x < x_max; x+=dx)
        {
            var y = U_LJ(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();

        // График (потенциал Морзе)
        context.strokeStyle = 'blue';
        context.beginPath();
		if (Morse_flag)
        for (var x = x_min; x < x_max; x+=dx)
        {
            var y = U_Morse(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 draw_2()
    {
	   // Расчет параметров графики
		
		const y_min = y_min_2;    
		const y_max = y_max_2;    
		
		const N = X_max;                 	// число точек по оси x
		const dx = x_max / N;            	// шаг по оси x
		const sx = X_max / x_max;        	// масштаб по оси x
		const sy = Y_max / (y_max - y_min); // масштаб по оси y
		const Y0 = Y_max + y_min * sy;  	// положение 0 оси y в экранных координатах

		var 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);
        var dX = 0, dY = 0;

        // График (полная сила Леннард-Джонса)
        context.strokeStyle = 'black';
        context.beginPath();
        if (LJ_flag)
        for (var x = x_min; x < x_max; x+=dx)
        {
            var y = F_LJ(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();

        // График (полная сила Морзе)
        context.strokeStyle = 'blue';
        context.beginPath();
        if (Morse_flag)
		for (var x = x_min; x < x_max; x+=dx)
        {
            var y = F_Morse(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_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>Morse & Lennard-Jones</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/>Морзе
    </div>	

    <!--слайдер-->
    <div>Безразмерный параметр потенциала Морзе:
        <input type="range" id="Slider_01" style="width: 150px;" oninput="app.set_01(this.value); document.getElementById('Text_01').value = this.value;">
        <font face= "Times New Roman"><I>αa</I> =
        <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;
        ">
     </font></div>
    <br>
    
    <script type="text/javascript">var app = new MainMLJ(document.getElementById('canvasGraph_1'), document.getElementById('canvasGraph_2'),
            document.getElementById('Slider_01'), document.getElementById('Text_01'));</script>
</body>
</html>