View source for Dynamics of interacting particles

[[ru:Динамика взаимодействующих частиц]]
[[Virtual laboratory]] > [[Dynamics of interacting particles]] <HR>

Here is the latest version of the program, which simulates the dynamics of interacting particles.
Each particle is a viscoelastic sphere. The interaction between the spheres is described by the [[:ru:Потенциал_Леннард-Джонса|Lennard-Jones potential]]

<htmlet nocache="yes">Tcvetkov/Balls/Balls_v6_release/Balls_v6_TM</htmlet>

Download program: [[Media:Balls_v6_release.zip|Balls_v6_release.zip]]
<div class="mw-collapsible mw-collapsed">
'''The text of the program is written in JavaScript (developed by [[Anton Krivtsov]], [[Tsvetkov Denis]]):''' <div class="mw-collapsible-content"> 
File '''"Balls_v6_release.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function MainBalls(canvas, slider_01, text_01, slider_02, text_02) {

    canvas.onselectstart = function () {return false;};     // lock allocation canvas

    // Starting parameters

    var context = canvas.getContext("2d");                  // context for drawing
    canvas.oncontextmenu = function (e) {return false;};    // lock context menu

    var Pi = 3.1415926;                 // "pi"

    var m0 = 1;                         // weight
    var t0 = 1;                         // Time (period of fluctuation)
    var a0 = 1;                         // length (sphere's diameter)

    var g0 = a0 / t0 / t0;              // acceleration
    var k0 = 2 * Pi / t0;               // frequency
    var C0 = m0 * k0 * k0;              // rigidity
    var B0 = 2 * m0 * k0;               // viscosity

    // *** Physical parameters  ***

    var Ny = 5;                         // The number of the spheres which are placed vertically
    var m = 1 * m0;                     // weight
    var CWall = 10 * C0;                // wall's rigidity
    var CBall = 0.1 * CWall;            // rigidity between spheres
    var BVisc = 0.008 * B0;             // viscosity of the environment
    var BInternal = 0.01 * B0;          // internal friction
    var BWall = 0.03 * B0;              // viscosity of the walls
    var mg = 0.25 * m * g0;             // gravitational force
    var r = 0.5 * a0;                   // radius of the sphere
    var K = 0.7;                        // forces depending on radius
    var a = 2 * r;                      // equilibrium state between particles
    var aCut = 2 * a;                   // cutting radius
    var TGoalK = 2;                     // temperature of the system TGoalK * D
    var TActualMaxK = 200;              // maximum temperature when thermostat work

    // *** Calculation parameters ***

    var fps = 60;                       // frames per second
    var spf = 100;                      // steps per frame
    var dt  = 0.04 * t0 / fps;          // integration step

    // Running program 

    var r2 = r * r;                     // optimizing
    var a2 = a * a;                     // optimizing
    var D = a2 * CBall / 72;            // bond's energy between spheres
    var LJCoeff = 12 * D / a2;          // coefficient for Lennard-Jones potential
    var b = Math.pow(13 / 7, 6) * a;    // coefficient for SLJ potential
    var b2 = b * b;                     // optimizing
    var SLJDenominator = 1 / (aCut * aCut - b2);    // denominator for calculation SLJ potential

    var thermostatEnabled = document.getElementById('checkbox_02').checked;     // thermostat for viscosity of the environment 
    var addRandomV = document.getElementById('checkbox_03').checked;            // random speed for acceleration of the spheres
    var T0 = 1 * D;                     // temperature
    var TGoal = TGoalK * T0;            // goal temperature 
    var TActualMax = TActualMaxK * T0;  // maximum temperature for thermostat
    var TActual = 0;                    // actual temperature 
    var k = 1;                          // Boltzmann constant
    var Tk = m / k;                     // optimizing
    var viscFrictionTh = document.getElementById('checkbox_04').checked;        // application thermostat for the viscosity environment
    var internalFrictionTh = document.getElementById('checkbox_05').checked;    // application thermostat for the internal friction

    var Ka = K * a;                     // optimizing
    var K2a2 = K * K * a2;              // optimizing

    var dNd = null;                     // taken sphere by cursor (drag & drop)
    var grad;                           // gradient
    var SLJEnabled = document.getElementById('checkbox_01').checked;

    this.setSlider_01 = function(c) {mg = c * m * g0;}; // gravitation function
    this.setSlider_02 = function(c) {TGoal = c;};       // thermostat function
    this.setNy = function(ny) {
        Ny = ny;
        if (Ny > 8) {
            grad = false;                   // gradient doesn't work if Ny > 8
            context.fillStyle = "#3070d0";  // sphere's colour
        } else
            grad = true;
    };
    this.setNy(Ny);                         // start
    this.setCheckbox_01 = function(bool) {SLJEnabled = bool;};
    this.setCheckbox_02 = function(bool) {
        thermostatEnabled = bool;
        document.getElementById('checkbox_03').disabled = !bool;
        document.getElementById('checkbox_04').disabled = !bool;
        document.getElementById('checkbox_05').disabled = !bool;
        document.getElementById('slider_02').disabled = !bool;
        document.getElementById('text_02').disabled = !bool;
        if (bool) {
            TempIntervalID = setInterval(   // update informtion about temperature
                function(){document.getElementById('Temperature').innerHTML = TActual.toFixed(3);}, 1000 / 3);
        }
        else {
            clearInterval(TempIntervalID);  // delete updating informtion about temperature
            document.getElementById('Temperature').innerHTML = "???"
        }
    };
    this.setCheckbox_02(thermostatEnabled); // start for updating parameters
    this.setCheckbox_03 = function(bool) {addRandomV = bool;};
    this.setCheckbox_04 = function(bool) {viscFrictionTh = bool;};
    this.setCheckbox_05 = function(bool) {internalFrictionTh = bool;};

    // Setup of the interface

    slider_01.min = 0;               slider_01.max = 5;
    slider_01.step = 0.05;
    slider_01.value = mg / m / g0;          // the first position of the slider
    text_01.value = mg / m / g0;
    slider_02.min = 0;               slider_02.max = 5;
    slider_02.step = 0.05;
    slider_02.value = TGoal;                // the first position of the slider
    text_02.value = TGoal.toFixed(1);

    // Start of the new system

    // the following variables have to be recalculated every time when we change value Ny
    var scale, w, h;
    var rScale13, rScaleShift;
    this.newSystem = function() {
        scale = canvas.height / Ny / a0;    // coefficient for transition from settlement to screen coordinates
        w = canvas.width / scale;           // window width in settlement coordinates
        h = canvas.height / scale;          // window height in settlement coordinates

        rScale13 = r * scale * 1.3;         // optimizing
        rScaleShift = r * scale / 5;        // optimizing

        this.setRandom();                   // set random configuration
    };

    // Работа с мышью

    var mx_, my_;                               // cursor position

    canvas.onmousedown = function(e) {          // function for press on the cursor
        var m = mouseCoords(e);                 // coordinates for calculation of the cursor position
        //return cycle
        for (var i = balls.length - 1; i >= 0; i--) {
            var b = balls[i];
            var rx = b.x - m.x;
            var ry = b.y - m.y;
            var rLen2 = rx * rx + ry * ry;              // length between cursor and sphere
            if (rLen2 <= r2) {                          // the cursor has pressed on a sphere
                if (e.which == 1) {                     // mouse's left button has pressed
                    dNd = b;
                    dNd.xPlus = dNd.x - m.x;            // shift of the cursor on X
                    dNd.yPlus = dNd.y - m.y;            // shift of the cursor on Y
                    mx_ = m.x;    my_ = m.y;
                    canvas.onmousemove = mouseMove;     // shift function work while button press
                } else if (e.which == 3)                // mouse's right button has pressed
                    balls.splice(i, 1);                 // delete sphere
                return;
            }
        }

        // if don't exit - add new sphere
        if (e.which == 1) {
            dNd = addNewBall(m.x, m.y, true);   // add sphere and take it
            if (dNd == null) return;            // return if the ball doesn't add
            dNd.xPlus = 0;  dNd.yPlus = 0;      // set ball in center position
            mx_ = m.x;    my_ = m.y;
            canvas.onmousemove = mouseMove;     // shift function works while mouse's button has pressed
        }
    };

    document.onmouseup = function(e) {          // function when mouse's button let off
        canvas.onmousemove = null;              // shift function equal null when mouse's button let of
        dNd = null;                             // ball doesn't exist when mouse's button let of
    };

    function mouseMove(e) {                     // shift function when left mouse's button pressed
        var m = mouseCoords(e);                 // coordinates for calculation
        dNd.x = m.x + dNd.xPlus;
        dNd.y = m.y + dNd.yPlus;
        dNd.vx = 0.6 * (m.x - mx_) / dt / fps;   dNd.vy = 0.6 * (m.y - my_) / dt / fps;
        mx_ = m.x;    my_ = m.y;
    }

    function mouseCoords(e) {                   // function returns settlement coordinates of the cursor of a mouse
        var m = [];
        var rect = canvas.getBoundingClientRect();
        m.x = (e.clientX - rect.left) / scale;
        m.y = (e.clientY - rect.top) / scale;
        return m;
    }

    // Работа с массивом

    var balls = [];                             // sphere's massive
    var addNewBall =  function(x, y, check) {
        // check - whether is crossed a new sphere with walls or already existing spheres
        if (check) {
            if (x - r < 0 || x + r > w || y - r < 0 || y + r > h) return null;
            for (var i = 0; i < balls.length; i++) {
                var rx = balls[i].x - x;
                var ry = balls[i].y - y;
                var rLen2 = rx * rx + ry * ry;
                if (rLen2 < 4 * r2) return null;
            }
        }

        var b = [];

        b.x = x;                b.y = y;        // calculation cordinates
        b.fx = 0;               b.fy = mg;      // force
        b.vx = 0;               b.vy = 0;       // velocity

        balls[balls.length] = b;                // add an element in end of massive
        return b;
    };

    this.setEmpty = function() {balls = [];};   // free area

    this.setRandom = function() {               // random configuration
        balls = [];
        for (var i = 0; i < 1000; i++)
            addNewBall(Math.random() * w, Math.random() * h, true);
    };

    var sqrt3 = Math.sqrt(3);
    this.setTriangularLattice = function() {            // triangle lattice
        balls = [];
        var center = (w - Math.floor(w / r) * r) / 2;   // shift
        for (var j = 0; j < Math.floor(h / (sqrt3 * r)); j++)
            for (var i = 0; i < Math.floor(w / r) - 1; i++)
                if ((i + j) % 2 == 0) addNewBall(r * (i + 1) + center, h - r * (1 + sqrt3 * j), false);
    };

    // program's cycle

    function control() {
        physics();
        draw();
    }

    // calculation part

    function physics() {                            
        for (var s = 1; s <= spf; s++) {

            var BViscTh = BVisc;
            var BInternalTh = BInternal;
            // работа термостата
            if (thermostatEnabled) {
                if (balls.length > 0) {
                    var v2Sum = 0;
                    for (var i1 = 0; i1 < balls.length; i1++)
                        v2Sum += balls[i1].vx * balls[i1].vx + balls[i1].vy * balls[i1].vy;
                    var v2Average = v2Sum / balls.length;
                    TActual = Tk * v2Average;

                    if (addRandomV) {               // random velocities if the temperature is low
                        if (TGoal > 0.15 && TActual < 0.1) {
                            for (var i2 = 0; i2 < balls.length; i2++) {
                                balls[i2].vx += 0.3 * (1 - 2 * Math.random());
                                balls[i2].vy += 0.3 * (1 - 2 * Math.random());
                            }
                        }
                    }

                    if (TActual < TActualMax) {         //because of the fact that a mouse spheres can set ultraboundary speed
                        if (viscFrictionTh) BViscTh = BVisc * (TActual - TGoal);                // thermostat
                        if (internalFrictionTh) BInternalTh = BInternal * (TActual - TGoal);    // thermostat
                    }
                } else
                    TActual = 0;                        // for thermostat on page
            }

            //recalculation of forces goes the certain massif since forces of interaction between spheres will be added further
            for (var i0 = 0; i0 < balls.length; i0++) {
                balls[i0].fx = - BViscTh * balls[i0].vx;
                balls[i0].fy = mg - BViscTh * balls[i0].vy;
            }

            for (var i = 0; i < balls.length; i++) {
                // calculation of interaction is made with all following spheres in the massif not to consider each interaction twice
                var b = balls[i];
                for (var j = i + 1; j < balls.length; j++) {
                    var b2 = balls[j];
                    var rx = b.x - b2.x;   var ry = b.y - b2.y;         // vector on the first ball (b)
                    var r2 = rx * rx + ry * ry;                         // length between spheres
                    var rLen = (Math.sqrt(r2));
                    if (rLen > aCut) continue;                          // check for cutting radius

                    // if the distance between particles isn't enough, forces will be counted like K * a
                    if (rLen < Ka) {
                        if (rLen > 0.00001) {                           // check
                            rx = rx / rLen * Ka;
                            ry = ry / rLen * Ka;
                        }
                        r2 = K2a2;
                        rLen = Ka;                                 
                    }

                    // сила взаимодействия
                    var s2 = a2 / r2;         var s4 = s2 * s2;         // optimizing
                    var F = LJCoeff * s4 * s4 * (s4 * s2 - 1);          // LJ interaction force
                    if (SLJEnabled) {
                        var kSLJ;                                           // k(r) - coefficient SLJ potential
                        if (r <= b) kSLJ = 1;
                        else {
                            var brackets = (r2 - b2) * SLJDenominator;
                            kSLJ = 1 - brackets * brackets;
                        }                                                  
                        F *= kSLJ;
                    }

                    // internal friction between spheres
                    if (r2 < a2) {
                        var vx21 = b.vx - b2.vx;    var vy21 = b.vy - b2.vy;    // vector on the first ball (b)
                        var ex = rx / rLen;         var ey = ry / rLen;
                        var v = vx21 * ex + vy21 * ey;
                        F -= F * BInternalTh / rLen * v;
                    }

                    // summirize forces
                    var Fx = F * rx;        var Fy = F * ry;

                    b.fx += Fx;             b.fy += Fy;
                    b2.fx -= Fx;            b2.fy -= Fy;
                }

                if (b == dNd) continue;  // if the sphere is grabbed with the cursor - his interaction with walls and we don't consider movement

                if (b.y + r > h) { b.fy += -CWall * (b.y + r - h) - BWall * b.vy; }
                if (b.y - r < 0) { b.fy += -CWall * (b.y - r) - BWall * b.vy;}
                if (b.x + r > w) { b.fx += -CWall * (b.x + r - w) - BWall * b.vx; }
                if (b.x - r < 0) { b.fx += -CWall * (b.x - r) - BWall * b.vx; }

                b.vx += b.fx / m * dt;        b.vy += b.fy / m * dt;
                b.x += b.vx * dt;             b.y += b.vy * dt;
            }
        }
    }

    // drawing
    function draw() {
        context.clearRect(0, 0, w * scale, h * scale);      // clear
        for (var i = 0; i < balls.length; i++){
            var xS = balls[i].x * scale;           var yS = balls[i].y * scale;
            if (grad) {
                // calculation of a gradient needs to be carried out for each sphere
                var gradient = context.createRadialGradient(xS, yS, rScale13, xS - rScaleShift, yS + rScaleShift, 0);
                gradient.addColorStop(0, "#0000bb");
                gradient.addColorStop(1, "#44ddff");
                context.fillStyle = gradient;
            }

            context.beginPath();
            context.arc(xS, yS, r * scale, 0, 2 * Math.PI, false);
            context.closePath();
            context.fill();
        }
    }

    // Start
    this.newSystem();
    setInterval(control, 1000 / fps);
    // function updates information on quantity of particles in the field
    setInterval(function(){document.getElementById('ballsNum').innerHTML = balls.length;}, 1000 / 20);
}
</syntaxhighlight>
Файл '''"Balls_v6_release.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Balls</title>
    <script src="Balls_v6_release.js"></script>
</head>
<body>
    <canvas id="canvasBalls" width="800" height="600" style="border:1px solid #000000;"></canvas>
    <br>
    <div>Gravitation: 
        <input type="range" id="slider_01" style="width: 150px;" oninput="app.setSlider_01(this.value); document.getElementById('text_01').value = this.value;">
        mg =
        <input id="text_01" style="width: 5ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
            // if not the number is entered - the line won't pass validation on a pattern above, and checkValidity () will return false
            if (!this.checkValidity()) return;
            app.setSlider_01(this.value);
            document.getElementById('slider_01').value = this.value;
        ">
     ⋅ m ⋅ g0</div><br>

    <div>The number of the spheres which are placed vertically: 
        <input type="button" style="width: 30px" name="" onclick="app.setNy(3); app.newSystem();return false;" value="3"/>
        <input type="button" style="width: 30px" name="" onclick="app.setNy(4); app.newSystem();return false;" value="4"/>
        <input type="button" style="width: 30px" name="" onclick="app.setNy(5); app.newSystem();return false;" value="5"/>
        <input type="button" style="width: 30px" name="" onclick="app.setNy(7); app.newSystem();return false;" value="7"/>
        &nbsp;  <!--знак пробела-->
        <input type="button" style="width: 30px" name="" onclick="app.setNy(9); app.newSystem();return false;" value="9"/>
        <input type="button" style="width: 30px" name="" onclick="app.setNy(12); app.newSystem();return false;" value="12"/>
        <input type="button" style="width: 30px" name="" onclick="app.setNy(15); app.newSystem();return false;" value="15"/>
    </div><br>

    <div>Configuration:
        <input type="button" name="" onclick="app.setTriangularLattice(); return false;" value="Triangular lattice"/>
        <input type="button" name="" onclick="app.setRandom(); return false;" value="Systemless"/>
        <input type="button" name="" onclick="app.setEmpty(); return false;" value="A blank field "/>
    </div><br>

    <div>
        <input type="checkbox" id="checkbox_01" name="" onchange="app.setCheckbox_01(this.checked);"/>
        <a href="/SLJ" title="SLJ" class="mw-redirect">Short Lennard-Jones</a> potential
    </div><br>

    <div>
        <input type="checkbox" id="checkbox_02" name="" onchange="app.setCheckbox_02(this.checked);"/>
        Thermostat:  
        <input type="range" id="slider_02" style="width: 150px;" oninput="app.setSlider_02(this.value); document.getElementById('text_02').value = this.value;">
        T ⋅ T0 = <input id="text_02" style="width: 5ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
            // if not the number is entered - the line won't pass validation on a pattern above, and checkValidity () will return false
            if (!this.checkValidity()) return;
            app.setSlider_02(this.value);
            document.getElementById('slider_02').value = this.value;
        ">
        <br>
        <input type="checkbox" checked id="checkbox_03" name="" onchange="app.setCheckbox_03(this.checked);"/>Acceleration is achieved by random rates 
        <br>
        The thermostat acts on: 
        <input type="checkbox" checked id="checkbox_04" name="" onchange="app.setCheckbox_04(this.checked);"/>External friction
        <input type="checkbox" checked id="checkbox_05" name="" onchange="app.setCheckbox_05(this.checked);"/>Internal friction
        <div>T ≈ <span id="Temperature"></span></div>
    </div><br>

    <div>Number of the particles: <span id="ballsNum"></span></div>

    <script type="text/javascript">var app = new MainBalls(
            document.getElementById('canvasBalls'),
            document.getElementById('slider_01'),
            document.getElementById('text_01'),
            document.getElementById('slider_02'),
            document.getElementById('text_02')
    );</script>
</body>
</html>
</syntaxhighlight>
</div>
</div>

[[:ru:JavaScript_-_Balls|Here]] you can find the previous versions of the program. 

== The proposed development directions ==
*Add temperature regulation by Hoover‘s thermostat.
*The program's evaluation speed in order to optimize it. 
*Apply the [[:ru:Принцип копирования|copying principle]].
*Add different potentials. 
*Add the ability to set viscoelastic walls anywhere.
*Add the periodic boundary conditions. 

<!--[[Category: Virtual laboratory]]
[[Category: Programming]]
[[Category: JavaScript]]-->