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

// Укороченное взаимодействий Леннард-Джонса 
// Short Lennard-Jones (SLJ) interaction
// Разработчик А.М. Кривцов 
// 17.05.2014 
// Интернет: tm.spbstu.ru/SLJ

function MainSLJ(canvas) {

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

	const X_max = canvas.width;
 	const Y_max = canvas.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 ac;   								// радиус обрезания взаимодействия

	var ac2;								// квадрат ac
	
    // Задание начальных значений параметров
   
	set_ac(1.4 * a);

    // Область построения графика
    const x_min = 0.9 * a;  
    const x_max = 2.5 * a;
    const y_min = -1.2 * P;    
    const y_max = 2 * P;      

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

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

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

    // настройка слайдеров и текстовых полей
 
	Slider_01.min = 1.11 * a;       		// лучше было бы взять acSlider.min = b, но b не кратно значению acSlider.step, что портит слайдер
    Slider_01.max = x_max;
    Slider_01.step = 0.01 * a;
    Slider_01.value = ac;     	
    Text_01.value = ac;
	
	draw();

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

	function set_ac(value)
	{
		ac = Number(value);
		ac2 = ac * ac;	
	}

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

		context = canvas.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);
        if (SLJ_flag)
		{
			var dX = 13, dY = 17;
			if (ac > 1.2)  { dX = 0; dY = 0; }        
			if (ac > 2.38) { dX = 0;  dY = 19; }
			context.fillText("a", ac * sx - 10 + dX, Y0 - 4 + dY);
			context.font = "12px Times";
			context.fillText("cut", ac * sx + dX, Y0 - 3 + dY);
		}
		
		// Графики сил
		Graph(F_SLJ, 	SLJ_flag, 	'red');
		Graph(F_LJ, 	LJ_flag, 	'black');
	}

	// Построение графика функции
	
	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_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;
    }
	
	// Укороченная сила Леннард-Джонса
    
    function F_SLJ(r)
    {
        return k(r) * F_LJ(r);
    }

	// Сглаживающий коэффициент
 
    function k(x)
    {
        if (x > ac) return 0; 
        if (x < b) return 1; 

        var z = (x * x - b2) / (ac2 - b2)
        var z2 = z * z;
        return (1 - z2) * (1 - z2);
    }

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Short Lennard-Jones Interaction (SLJ)</title>
    <script src="SLJ.js"></script>
</head>
<body>
    <canvas id="canvasGraph" width="800" height="400" 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="#ff0000" size="5"><B>—</B></font>
		<input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);" checked/>укороченная
    </div>	

    <!--Установка параметров взаимодействия (текстовые поля и слайдеры)-->
    <div>
        <font face= "Times New Roman">
		Радиус обрезания:
		<I>a</I><SUB>cut</SUB> = <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;">
		</font>
	</div>
    
	<script type="text/javascript">var app = new MainSLJ(
		document.getElementById('canvasGraph')
	);</script>

</body>
</html>