Difference between revisions of "Chain"

  1 function MainChain(canvas, vCanvas) {
  2 
  3     // Presetting
  4 
  5     var context = canvas.getContext("2d");  // context -  for drawing
  6     var vContext = vCanvas.getContext("2d");// vContext -  for drawing
  7 
  8     var Pi = 3.1415926;                   // pi
  9 
 10     var m0 = 1;                           // weight
 11     var T0 = 1;                           // Time (period of fluctuation)
 12     var a0 = 1;                           // length (sphere's diameter)
 13 
 14     var k0 = 2 * Pi / T0;                 // frequency
 15     var C0 = m0 * k0 * k0;                // rigidity
 16 
 17     // *** Physical parameters ***
 18 
 19     var m = 1 * m0;                 	    // weight
 20     var C = 1 * C0;                 	    // rigidity
 21     var numStart = 24;                    // The number of the spheres
 22 
 23     // *** Calculation parameters ***
 24 
 25     var fps = 50;             	        // frames per second
 26     var spf = 10;              		    // steps per frame 
 27     var dt  = 0.4 * T0 / fps;      	    // integration step
 28     // Running program
 29 
 30     var scale = canvas.height / a0;       // large-scale coefficient for transition from settlement to screen coordinates
 31     var wScale = canvas.width;		    // window width in screen coordinates
 32     var hScale = canvas.height;		    // window hight in screen coordinates
 33     var w = wScale / scale;		        // window width in settlement coordinates
 34     var h = hScale / scale;		        // window high in settlement coordinates
 35     var chainHeightScale = hScale/2;      // height of provision of a chain in screen coordinates
 36     // константы для графика скорости
 37     var vWScale = vCanvas.width;          // window width in screen coordinates
 38     var vHScale = vCanvas.height;         // window hight in screen coordinates
 39     var vHeightScale = vHScale/2;         // height of provision of a chain in screen coordinates
 40     var vAxisScale = vHScale * 0.4;       // scale of an axis of "y" of the schedule of speed
 41     var uvWResize = vWScale/wScale;       // recalculation of width of rather main window
 42 
 43     // generate entry conditions
 44 
 45     var particles;                          // massive of particles
 46     var num, pDist;                         // quantity of particles and distance between spheres (in initial situation)
 47     MainChain.prototype.setNum = function(n){num = n; pDist = w/(num-1);};       // to set new quantity of particles
 48     MainChain.prototype.setNum(numStart);
 49     var uAxisScale;                         // scale of an axis of "y" of the schedule
 50     MainChain.prototype.newSystem = function(conf){
 51         MainChain.prototype.actualConf = conf;
 52         particles = [];
 53         for (var i = 1; i < num + 1; i++) {
 54             var b = [];
 55 
 56             b.x0 = pDist*(i-1);             // settlement coordinates of initial provision of a particle
 57             b.x0Scale = b.x0*scale;         // screen coordinates of initial provision of a particle
 58             b.fu = 0;   b.vu = 0;   b.uu = 0;   //  force; velocity; shift of rather initial situation
 59 
 60             conf(b, i);                     // configuration of initial provisions
 61             particles[i] = b;               // add an element to massive
 62         }
 63 
 64         // set periodic system
 65         particles[0] = particles[num];
 66         particles[num+1] = particles[1];
 67 
 68         // equilibration of total speed on an axis x (that particles didn't depart aside)
 69         var sumvu = 0;
 70         for (var i0 = 1; i0 < num+1; i0++) sumvu += particles[i0].vu;
 71         var vuAverage = sumvu/num;
 72         for (var i1 = 1; i1 < num+1; i1++) particles[i1].vu -= vuAverage;
 73 
 74         // control of an axis "y"
 75         var confCoeff = 1;
 76         if (conf == MainChain.prototype.conf_random) confCoeff = Math.sqrt(num)/6;
 77         if (conf == MainChain.prototype.conf_one || conf == MainChain.prototype.conf_stair2) confCoeff = num/5;
 78         if (conf == MainChain.prototype.conf_stair3) confCoeff = num/10;
 79         uAxisScale = hScale/(num/35) * confCoeff;
 80     };
 81 
 82     // control of configuration
 83     var v0 = 1*a0/T0;                       // conf_random - initial dispersion of speeds
 84     var sinNum = 2;                         // conf_sin - amount of the periods of a sine in a chain
 85     var hillDiv = 1/4;                      // conf_hill - part of a chain which is occupied by "hill"
 86 
 87     // configuration
 88     MainChain.prototype.conf_random = function(b){b.vu = v0*(2*Math.random()-1);};
 89     MainChain.prototype.conf_sin = function(b, i){b.vu = Math.sin(2*Pi * i/num*sinNum);};
 90     MainChain.prototype.conf_one = function(b, i){if (i == Math.ceil(num/2)) b.vu = 0.5; else b.vu = 0;};
 91     MainChain.prototype.conf_stair2 = function(b, i){if (i%4 == 0 || (i-1)%4 == 0) b.vu = 1; else b.vu = 0;};
 92     MainChain.prototype.conf_stair3 = function(b, i){if (i%6 == 0 || (i-1)%6 == 0 || (i-2)%6 == 0) b.vu = 1; else b.vu = 0;};
 93     MainChain.prototype.conf_hill = function(b, i){
 94         var nd2 = hillDiv *num/2;            // quantity of particles at which initial speed / 2 will change
 95         if (i > num/2-nd2 && i < num/2+nd2) b.vu = (1 - (i-num/2)*(i-num/2)/(nd2*nd2));    // parabola
 96         else b.vu = 0;
 97     };
 98 
 99     // Basis cycle of the program
100 
101     function control() {
102         physics();
103         draw();
104     }
105 
106     // Settlement part of the program
107 
108     function physics(){
109         for (var s=1; s<=spf; s++) {
110             for (var i=1; i<particles.length-1; i++) {
111                 particles[i].fu = C*(particles[i+1].uu - 2*particles[i].uu + particles[i-1].uu);
112                 particles[i].vu += particles[i].fu / m * dt;
113             }
114             // we appropriate new movements
115             for (var i2=1; i2 < particles.length-1; i2++ ) particles[i2].uu += particles[i2].vu * dt;
116         }
117     }
118 
119     // drawing
120 
121     function draw(){
122         function clearAndPrepairCtx(ctx, wS, hS, lineHeight){       // clear the screen and to draw the line in the middle
123             ctx.clearRect(0, 0, wS, hS);                            // clear the screen
124             ctx.strokeStyle = 'gray';
125             ctx.beginPath();
126             ctx.moveTo(0, lineHeight);
127             ctx.lineTo(wS, lineHeight);
128             ctx.stroke();
129             ctx.strokeStyle = 'black';
130         }
131 
132         // chain
133         clearAndPrepairCtx(context, wScale, hScale, chainHeightScale);
134         context.beginPath();
135         context.moveTo(particles[1].x0Scale, chainHeightScale + particles[1].uu*uAxisScale);
136         for (var i = 2; i < particles.length-1; i++)
137             context.lineTo(particles[i].x0Scale, chainHeightScale + particles[i].uu*uAxisScale);
138         context.stroke();
139 
140         // schedule of speed
141         clearAndPrepairCtx(vContext, vWScale, vHScale, vHeightScale);
142         vContext.beginPath();
143         vContext.moveTo(particles[1].x0Scale * uvWResize, vHeightScale + particles[1].vu*vAxisScale);
144         for (var i0 = 2; i0 < particles.length-1; i0++)
145             vContext.lineTo(particles[i0].x0Scale * uvWResize, vHeightScale + particles[i0].vu*vAxisScale);
146         vContext.stroke();
147     }
148 
149     // Start of system
150 
151     MainChain.prototype.newSystem(MainChain.prototype.conf_hill);
152     setInterval(control, 1000/fps);
153 }

<!DOCTYPE html>
<html>
<head>
    <title>Chain</title>
    <script src="Chain_v3_release.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>u</td>
            <td><canvas id="canvasChain" width="800" height="200" style="border:1px solid #000000;"></canvas></td>
            <td rowspan="4" style="width:200px" valign="top">
                Configurations<br>(guide the cursor at the button,<br>for seeing description):<br>
                <input type="button" title="Casual speed at each part"                                                       style="width: 150px" name="" onclick="app.newSystem(app.conf_random);return false;" value="Random"/><br>
                <input type="button" title="Initial speed of particles is set by means of function of a sine"                                style="width: 150px" name="" onclick="app.newSystem(app.conf_sin);return false;" value="Sin"/><br>
                <input type="button" title="Speed is equal 0 at all parts, except one"                                              style="width: 150px" name="" onclick="app.newSystem(app.conf_one);return false;" value="Impulse"/><br>
                <input type="button" title="Initial speed of particles is set by steps - two parts move, two don't move"    style="width: 150px" name="" onclick="app.newSystem(app.conf_stair2);return false;" value="Stairs (2 particles)"/><br>
                <input type="button" title="Initial speed of particles is set by steps - three parts move, three don't move"    style="width: 150px" name="" onclick="app.newSystem(app.conf_stair3);return false;" value="Stairs (3 particles)"/><br>
                <input type="button" title="Initial speed of particles is set by the hill, the hill occupies 1/4 part of a chain"                    style="width: 150px" name="" onclick="app.newSystem(app.conf_hill);return false;" value="Hill"/><br>
                <br><br>
                <div style="width:150px">
                    Quantity of particles:<br>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(12); app.newSystem(app.actualConf);return false;" value="12"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(24); app.newSystem(app.actualConf);return false;" value="24"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(48); app.newSystem(app.actualConf);return false;" value="48"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(96); app.newSystem(app.actualConf);return false;" value="96"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(300); app.newSystem(app.actualConf);return false;" value="300"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(600); app.newSystem(app.actualConf);return false;" value="600"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(1200); app.newSystem(app.actualConf);return false;" value="1200"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(2400); app.newSystem(app.actualConf);return false;" value="2400"/>
                    <input type="button" style="width: 40px" name="" onclick="app.setNum(4800); app.newSystem(app.actualConf);return false;" value="4800"/>
                </div>
            </td>
        </tr><tr>
            <td></td>
            <td align="center">x</td>
        </tr ><tr>
            <td style="padding:30px 0 0 0;">v</td>
            <td style="padding:30px 0 0 0;"><canvas id="canvasChainV" width="800" height="100" style="border:1px solid #000000;"></canvas></td>
        </tr><tr>
            <td></td>
            <td align="center">x</td>
        </tr>
    </table>

    <script type="text/javascript">var app = new MainChain(document.getElementById('canvasChain'), document.getElementById('canvasChainV'));</script>
</body>
</html>