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

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

function MainSLJ(canvas, acSlider, acText) {

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

    var context = canvas.getContext("2d");  // на context происходит рисование
  
    // Размерные параметры
    
    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 = 1.4 * a;  var ac2 = ac * ac;   // радиус обрезания взаимодействия
    
    const fps = 50;                         // frames per second - число кадров в секунду (качество отображения)

    // Область построения графика
    const x_min = 0.9 * a;  
    const x_max = 2.5 * a;
    const y_min = -1.2 * P;    
    const y_max = 2 * P;    
       
    // Установка слайдера
 
    // функция, запускающаяся при перемещении слайдера
    this.set_ac = function(input_ac) 
	{ 
		ac = input_ac * a;	// input_ac - значение на слайдере 
		ac2 = ac * ac; 
		draw();
	} 

    // настройка слайдеров и текстовых полей
    acSlider.min = 1.11 * a;       // лучше было бы взять acSlider.min = b, но b не кратно значению acSlider.step, что портит слайдер
    acSlider.max = x_max;
    acSlider.step = 0.01 * a;
    acSlider.value = ac;           // значение ползунка должно задаваться после min, max и step
    acText.value = ac;
    
   // Расчет параметров графики
    
    const N = canvas.width;                 // число точек по оси x
    const dx = x_max / N;                   // шаг по оси x
    const sx = canvas.width / x_max;        // масштаб по оси x
    const sy = canvas.height / (y_max - y_min); // масштаб по оси y
    const Y0 = canvas.height + y_min * sy;  // положение 0 оси y в экранных координатах

	draw();

    // Отображение

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);          // очистить экран
        
        // Горизонтальная ось
        context.strokeStyle = 'lightgrey';
        context.beginPath();
        context.moveTo(0, Y0);
        context.lineTo(canvas.width, 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;
        if (ac < 1.2)  { dX = 13; dY = 17; }        
        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);

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

    // Сила Леннард-Джонса
    
    function f_LJ(r)
    {
        var s2 = 1 / (r * r);
        var s4 = s2 * s2;
        return P0 * s4 * s4 * (s4 * s2 - 1) * 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>SLJ</title>
    <script src="SLJ.js"></script>
</head>
<body>
    <canvas id="canvasGraph" width="800" height="400" style="border:1px solid #000000;"></canvas>

    <div>
        Сила Леннард-Джонса: <BR>
        <font color="#000000" size="5"><B>—</B></font> полная (LJ)<BR>
        <font color="#ff0000" size="5"><B>—</B></font> укороченная (SLJ)<BR>
    </div>

    <!--слайдер-->
    <div>Радиус обрезания:
        <input type="range" id="acSlider" style="width: 150px;" oninput="app.set_ac(this.value); document.getElementById('acText').value = this.value;">
        <font face= "Times New Roman"><I>a</I><SUB>cut</SUB> =
        <input id="acText" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
            // если введено не число - строка не пройдет валидацию по паттерну выше, и checkValidity() вернет false
            if (!this.checkValidity()) return;
            app.set_ac(this.value);
            document.getElementById('acSlider').value = this.value;
        ">
     <I>a</I></font></div>
    <br>
    
    <script type="text/javascript">var app = new MainSLJ(document.getElementById('canvasGraph'),
            document.getElementById('acSlider'), document.getElementById('acText'));</script>

    <div style="clear:both;"></div>
</body>
</html>