Периодические граничные условия

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Виртуальная лаборатория>Периодические граничные условия

Курсовой проект по механике дискретных сред

Краткое описание

Метод периодических граничных условий был разработан для решения задач теории жидкостей и плотных газов. Он состоит в том,что вокруг расчетной области строятся ее «образы» с актуальным положением частиц. И частицы «реальной» области взаимодействуют с частицами в «образе», а если частица пересекает границу расчетной области, она появляется с другой стороны.
В теореме Нетер утверждается, что каждой непрерывной симметрии физической системы соответствует некоторый закон сохранения:
  • однородности времени соответствует закон сохранения энергии,
  • однородности пространства соответствует закон сохранения импульса,
  • изотропии пространства соответствует закон сохранения момента импульса,
  • калибровочной симметрии соответствует закон сохранения электрического заряда и т. д.
Но для классической системы частиц с периодическими условиями сохранение момента импульса нарушается. Этот эффект наглядно проиллюстрирован в данной курсовой работе.

Цель проекта

  • Визуализация системы частиц с периодическими граничными условиями.
  • Построение графиков зависимости кинетического момента от времени для одной частицы, двух частиц, многих частиц.

Математическая модель

Граничные условия:

если [math]x \gt w[/math], то [math]x = x - w[/math]

если [math] x \lt 0 [/math], то [math] x = x + w [/math]

если [math] y \gt h [/math], то [math] y = y - h [/math]

если [math] y \lt 0 [/math], то [math] y = y + h [/math]

Где x и у - это координаты частицы, а w и h - ширина и длина окна соответственно.

Кинетический момент вычисляется по формуле: [math]L(t) = \sum_{i\in\wedge(t)} r_i\times mV_i [/math]

Результаты


Скачать архив

Текст программы на языке JavaScript (разработчик Теницкая Татьяна):

Файл "OneBall.js"

  1 function main_particle_1() {
  2  
  3     var ctx = canvas_particle_1.getContext("2d");
  4 	var w = canvas_particle_1.width;				//длина
  5     var h = canvas_particle_1.height;				//высота
  6 	
  7 	
  8 	var w_1 = w/3;
  9 	var h_1 = h/3;
 10 	
 11 	rx = new Array(0, w_1, 2*w_1, 0, w_1, 2*w_1, 0, w_1, 2*w_1);
 12 	ry = new Array(60, 60, 60, 60 + h_1, 60 + h_1, 60 + h_1, 60 + 2*h_1, 60 + 2*h_1, 60 + 2*h_1);
 13 	
 14 																// координаты шара
 15     var v0 = 1;                       							// скорость шара
 16     var r = 7;                                 				// радиус шара
 17     var dt = 5;											
 18 	var alfa = 45 / 180 * Math.PI;
 19 	var steps = 0;
 20 
 21 	function step()
 22 	{                          		
 23 		tick();
 24 		draw();
 25 	}
 26 			
 27 		var vGraph = new TM_graph(                  			// определить график
 28 					"#vGraph",                              	// на html-элементе #vGraph
 29 					250,                                    	// сколько шагов по оси "x" отображается
 30 					-1, 1,0.2);                           		// мин. значение оси Y, макс. значение оси Y, шаг по оси Y
 31 		
 32 			function tick() 
 33 			{	
 34 				for (i = 0; i < rx.length; i++)	
 35 				{	
 36 					vx = v0 * Math.cos(alfa); 
 37 					vy = v0 * Math.sin(alfa); 
 38 					steps+=1;
 39 			
 40 					rx[i] += vx*dt;
 41 					ry[i] += vy*dt;
 42 					
 43 				
 44 					if (rx[i] >= w) 
 45 					 {
 46 						 rx[i] = rx[i] - w; 
 47 					 }
 48 				 
 49 					if (rx[i] <= 0) 
 50 					 {
 51 						 rx[i] = rx[i] + w;
 52 					 }
 53 			
 54 					 if (ry[i] >= h)
 55 					 {
 56 						ry[i] = ry[i] - h;
 57 					 }
 58 					
 59 					if (ry[i] <= 0)
 60 					{
 61 						ry[i] = ry[i] + h;
 62 					}
 63 				}		
 64 				
 65 				var L = (rx[8] * vy - ry[8] * vx)/240.4164;
 66 				
 67 				console.log(L);
 68 			
 69 				if (dt % 0.5 == 0) vGraph.graphIter(steps, L);   		// подать данные на график
 70 			}
 71 			
 72 			
 73 			
 74 		
 75 	function draw() 
 76 	{
 77 		ctx.clearRect(0, 0, w , h );     				 // очистить экран
 78 		for (var i = 0; i < rx.length; i++)
 79 		{
 80 			var xS = rx[i];           
 81 			var yS = ry[i];
 82 			
 83 			
 84 			ctx.beginPath();
 85 			ctx.fillStyle = "#00008B";
 86 			ctx.arc(xS, yS, r , 0, 2 * Math.PI, false);
 87 			ctx.closePath();
 88 			ctx.fill();
 89 			
 90 			ctx.beginPath();                                			// начать рисование
 91 			ctx.fillStyle="#000000";
 92 			ctx.moveTo(w_1, 0);                             		// переместить "карандаш" в точку 
 93 			ctx.lineTo(w_1, h);                           		// нарисовать "карандашом" линию до точки 
 94 			ctx.stroke();
 95 			
 96 			ctx.beginPath();
 97 			ctx.fillStyle="#000000";		
 98 			ctx.moveTo(2*w_1, 0);                             
 99 			ctx.lineTo(2*w_1, h);                            
100 			ctx.stroke();
101 			
102 			ctx.beginPath();  
103 			ctx.fillStyle="#000000";
104 			ctx.moveTo(0, h_1);                             
105 			ctx.lineTo(w, h_1);                            
106 			ctx.stroke();
107 			
108 			ctx.beginPath(); 
109 			ctx.fillStyle="#000000";		
110 			ctx.moveTo(0, 2*h_1);                             
111 			ctx.lineTo(w, 2*h_1);                             
112 			ctx.stroke();
113 			
114 		}
115 	}
116 		
117 		
118 		setInterval(step, 1000/100);               				// функция step будет запускаться 100 раз в секунду (100 раз / 1000 мс)
119 		
120 }

Скачать архив

Текст программы на языке JavaScript (разработчик Теницкая Татьяна):

Файл "TwoBalls.js"

  1 function main_particle_1() {
  2  
  3     var ctx_11 = canvas_particle_11.getContext("2d");
  4 	var ctx_12 = canvas_particle_12.getContext("2d");
  5 	var ctx_13 = canvas_particle_13.getContext("2d");
  6 	var ctx_21 = canvas_particle_21.getContext("2d");
  7 	var ctx_22 = canvas_particle_22.getContext("2d");
  8 	var ctx_23 = canvas_particle_23.getContext("2d");
  9 	var ctx_31 = canvas_particle_31.getContext("2d");
 10 	var ctx_32 = canvas_particle_32.getContext("2d");
 11 	var ctx_33 = canvas_particle_33.getContext("2d");
 12 	
 13    	
 14 	var width = canvas_particle_11.width;
 15     var height = canvas_particle_11.height;
 16    
 17 	var rx_1, ry_1, rx_2, ry_2;            									// координаты шара
 18     var v0 = 4, vx_1, vy_1, vx_2, vy_2;
 19     var r = 7;                                								// радиус шара
 20     var dt_1 = 0; dt_2 = 0;
 21 	var x0_1 = width/2, x0_2 = width/2, y0_1 = 0, y0_2 = height;		
 22 	var steps = 0;
 23 	var val = 1;
 24 	var alfa = 45/180*Math.PI;
 25 	
 26 	function step() 
 27 		{                          		
 28 			tick();
 29 			draw();
 30 		}
 31 		
 32 		var vGraph = new TM_graph(                  			// определить график
 33 					"#vGraph",                              	// на html-элементе #vGraph
 34 					250,                                    	// сколько шагов по оси "x" отображается
 35 					-1,1,0.2);   
 36 			
 37 			function tick() 
 38 			{													// вычисление новой позиции шар	 
 39 				vx_1 = v0 * Math.cos(alfa); 
 40 				vy_1 = v0 * Math.sin(alfa); 
 41 				vx_2 = -v0 * Math.cos(alfa); 
 42 				vy_2 = -v0 * Math.sin(alfa); 
 43 				
 44 				steps+=1;
 45 				if (val==1)
 46 				{
 47 					rx_1 = vx_1*dt_1 + x0_1 + r - 2.7; //
 48 					ry_1 = vy_1*dt_1 + y0_1 + r - 2.7;
 49 					dt_1+= 1;
 50 					rx_2 = vx_2*dt_2 + x0_2 - r + 2.7; //
 51 					ry_2 = vy_2*dt_2 + y0_2 - r + 2.7;
 52 					dt_2+= 1;
 53 					
 54 					
 55 				}
 56 				else
 57 				{
 58 					vy_1 = -vy_1;
 59 					vx_1 = -vx_1;
 60 					rx_1 = vx_1*dt_1 + width - r + 2.7;
 61 					ry_1 = vy_1*dt_1 + x0_1 - r + 2.7;
 62 					dt_1+= 1;
 63 					vy_2 = -vy_2;
 64 					vx_2 = -vx_2;
 65 					rx_2 = vx_2*dt_2 - 2.7 + r; //
 66 					ry_2 = vy_2*dt_2 + x0_2 - 2.7 + r;
 67 					dt_2+= 1;
 68 				}
 69 				
 70 				if (rx_2 < 0 || rx_1 - r> width) 
 71 				{	
 72 					//alert(rx_2);
 73 					val = 0;
 74 					dt_1 = 0;
 75 					dt_2 = 0;
 76 				}
 77 				
 78 				if (ry_1 < 0 || ry_2 - r > height) 
 79 				{   
 80 					val = 1;
 81 					dt_1=0;
 82 					dt_2 = 0;
 83 				}
 84 				
 85 						
 86 				var L = ((rx_1 * vy_1 - ry_1 * vx_1)+(rx_2 * vy_2 - ry_2 * vx_2))/376.2;
 87 				console.log(L);
 88 			
 89 				if (dt_1 % 0.5 == 0) vGraph.graphIter(steps, L);   		// подать данные на график	
 90 				
 91 
 92 
 93 			}	
 94 		
 95 		function draw() // рисование шара
 96 		{ 
 97 		
 98 		ctx_11.fillStyle= "#DC143C" ;        				// цвет закраски
 99         ctx_11.clearRect(0, 0, width, height); 				// очистить экран
100 		ctx_11.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
101 		ctx_11.fill();
102         ctx_11.beginPath();
103 		
104 		ctx_11.fillStyle = "#00008B";
105 		ctx_11.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
106         ctx_11.fill();
107 		ctx_11.beginPath();
108 		
109 		ctx_12.fillStyle = "#DC143C";           				// цвет закраски
110         ctx_12.clearRect(0, 0, width, height); 					// очистить экран
111 		ctx_12.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
112 		ctx_12.fill();
113         ctx_12.beginPath();
114 		
115 		ctx_12.fillStyle = "#00008B";
116 		ctx_12.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
117         ctx_12.fill();
118 		ctx_12.beginPath();
119 		
120 		ctx_13.fillStyle = "#DC143C";           				// цвет закраски
121         ctx_13.clearRect(0, 0, width, height); 					// очистить экран
122 		ctx_13.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
123 		ctx_13.fill();
124         ctx_13.beginPath();
125 		
126 		ctx_13.fillStyle = "#00008B";
127 		ctx_13.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
128         ctx_13.fill();
129 		ctx_13.beginPath();
130 		
131 		ctx_21.fillStyle = "#DC143C";           				// цвет закраски
132         ctx_21.clearRect(0, 0, width, height); 					// очистить экран
133 		ctx_21.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
134 		ctx_21.fill();
135         ctx_21.beginPath();
136 		
137 		ctx_21.fillStyle = "#00008B";
138 		ctx_21.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
139         ctx_21.fill();
140 		ctx_21.beginPath();
141 		
142 		ctx_22.fillStyle = "#DC143C";           				// цвет закраски
143         ctx_22.clearRect(0, 0, width, height); 					// очистить экран
144 		ctx_22.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
145 		ctx_22.fill();
146         ctx_22.beginPath();
147 		
148 		ctx_22.fillStyle = "#00008B";
149 		ctx_22.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
150         ctx_22.fill();
151 		ctx_22.beginPath();
152 		
153 		ctx_23.fillStyle = "#DC143C";           				// цвет закраски
154         ctx_23.clearRect(0, 0, width, height); 					// очистить экран
155 		ctx_23.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
156 		ctx_23.fill();
157         ctx_23.beginPath();
158 		
159 		ctx_23.fillStyle = "#00008B";
160 		ctx_23.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
161         ctx_23.fill();
162 		ctx_23.beginPath();
163 		
164 		ctx_31.fillStyle = "#DC143C";           				// цвет закраски
165         ctx_31.clearRect(0, 0, width, height); 					// очистить экран
166 		ctx_31.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
167 		ctx_31.fill();
168         ctx_31.beginPath();
169 		
170 		ctx_31.fillStyle = "#00008B";
171 		ctx_31.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
172         ctx_31.fill();
173 		ctx_31.beginPath();
174 		
175 		ctx_32.fillStyle = "#DC143C";           				// цвет закраски
176         ctx_32.clearRect(0, 0, width, height); 					// очистить экран
177 		ctx_32.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
178 		ctx_32.fill();
179         ctx_32.beginPath();
180 		
181 		ctx_32.fillStyle = "#00008B";
182 		ctx_32.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
183         ctx_32.fill();
184 		ctx_32.beginPath();
185 		
186 		ctx_33.fillStyle = "#DC143C";           				// цвет закраски
187         ctx_33.clearRect(0, 0, width, height); 					// очистить экран
188 		ctx_33.arc(rx_1, ry_1, r, 0, 2 * Math.PI);
189 		ctx_33.fill();
190         ctx_33.beginPath();
191 		
192 		ctx_33.fillStyle = "#00008B";
193 		ctx_33.arc(rx_2, ry_2, r, 0, 2 * Math.PI);
194         ctx_33.fill();
195 		ctx_33.beginPath();
196 		}
197 		
198 		setInterval(step, 1000/30);               				// функция step будет запускаться 30 раз в секунду (30 раз / 1000 мс)
199 		
200 }


Скачать архив

Текст программы на языке JavaScript (разработчик Теницкая Татьяна):

Файл "NNN.js"

  1 function main_particle_1() {
  2  
  3   var ctx = canvas_particle_1.getContext("2d");
  4   var w_1 = canvas_particle_1.width;        
  5   var h_1 = canvas_particle_1.height;        
  6   var w = w_1/3;
  7   var h = h_1/3;
  8   
  9   var r = 7;
 10   var N = 10;
 11   rx = new Array();                //Содержит координаты частиц по оси Х
 12   ry = new Array();                //Содержит координаты частиц по оси У
 13   rxI0 = new Array();rxI1 = new Array();rxI2 = new Array();rxI3 = new Array();rxI4 = new Array();rxI5 = new Array();rxI6 = new Array();rxI7 = new Array();                          
 14   ryI0 = new Array();ryI1= new Array();ryI2= new Array();ryI3= new Array();ryI4= new Array();ryI5= new Array();ryI6= new Array();ryI7= new Array();                  
 15 
 16   L = new Array();
 17   Array.prototype.sum = function()
 18   {
 19   for (var i=0, sum=0; i < this.length; sum += this[i++]);
 20   return sum;
 21   }
 22   
 23 
 24   var distR0,distR2,distR3,distR;
 25   
 26   var D = 5;
 27   var a;
 28   var a0 = w * 0.1; 
 29   
 30   vx = new Array();                //Скорость по Х
 31   vy = new Array();                //Скорость по У
 32   dt = 0.01;
 33 
 34   
 35   
 36   for (i = 0; i < N; ++i) 
 37   {
 38     vx[i] = Math.random()*55;
 39     vy[i] = Math.random()*55;
 40   }
 41   var kol = 1;
 42   var prx = 0;
 43   var pry = 0;
 44   var dist = 0;
 45   var f;
 46   rx[0] = Math.random() * (w - 10); 
 47   ry[0] = Math.random() * (h - 10);
 48   while (kol < N)
 49   {
 50     f = 0;
 51     prx = Math.random() * (w - 10); 
 52     pry = Math.random() * (h - 10);
 53     for (i = 0; i < kol; i++)
 54     {
 55       dist = Math.pow((rx[i] - prx),2)+Math.pow((ry[i] - pry),2);
 56       if (dist < Math.pow(2 * a0,2))
 57       {
 58         f = f+1;
 59       }
 60     }
 61     if (f==0)
 62     {
 63       rx[kol] = prx;
 64       ry[kol] = pry;
 65       kol++;
 66     }
 67   }
 68   var steps = 0;
 69   
 70   
 71   function step()
 72   {
 73     tick();
 74     draw();
 75   }
 76 
 77   var vGraph = new TM_graph(                        // определить график
 78           "#vGraph",                                // на html-элементе #vGraph
 79           250,                                      // сколько шагов по оси "x" отображается
 80           -1, 1,0.2);                               // мин. значение оси Y, макс. значение оси Y, шаг по оси Y
 81       
 82   function tick()
 83   {
 84     for (i = 0; i < N ; i++)
 85     {  
 86       
 87       steps += 1;
 88       
 89       rx[i] += vx[i]*dt;
 90       ry[i] += vy[i]*dt;
 91         
 92       if (rx[i] >= w) {rx[i] = rx[i] - w;}
 93       if (rx[i] <= 0) {rx[i] = rx[i] + w;}
 94       if (ry[i] >= h)  {ry[i] = ry[i] - h;}
 95       if (ry[i] <= 0)  {ry[i] = ry[i] + h;}
 96       
 97         rxI0[i] = rx[i] + w;
 98         ryI0[i] = ry[i];
 99 
100         rxI3[i] = rx[i] + w;
101         ryI3[i] = ry[i] + h;
102         
103         rxI6[i] = rx[i] + w;
104         ryI6[i] = ry[i] + 2*h;
105         
106         rxI1[i] = rx[i] + 2*w;
107         ryI1[i] = ry[i];
108         
109         rxI4[i] = rx[i] + 2*w;
110         ryI4[i] = ry[i] + h;
111         
112         rxI7[i] = rx[i] + 2*w;
113         ryI7[i] = ry[i] + 2*h;
114         
115         rxI2[i] = rx[i];
116         ryI2[i] = ry[i] + h;
117         
118         rxI5[i] = rx[i];
119         ryI5[i] = ry[i] + 2*h;
120         
121         //расчет расстояний
122         
123         for (j = 0; j < N ; j++)
124         {
125           if (i != j)
126           {
127             distR0 = Math.sqrt(Math.pow((rx[i]-rxI0[j]),2)+Math.pow((ry[i]-ryI0[j]),2));
128             distR2 = Math.sqrt(Math.pow((rx[i]-rxI2[j]),2)+Math.pow((ry[i]-ryI2[j]),2));
129             distR3 = Math.sqrt(Math.pow((rx[i]-rxI3[j]),2)+Math.pow((ry[i]-ryI3[j]),2));
130             distR = Math.sqrt(Math.pow((rx[i]-rx[j]),2)+Math.pow((ry[i]-ry[j]),2));
131             
132             //расчет сил
133             a = 4 * r;
134             if (distR0 < 2*r)
135             {
136               var mod_fR0,fxR0,fyR0;
137 
138               mod_fR0 = 12*D*((Math.pow(r/distR0),13)-Math.pow((r/distR0),7))/a;
139               //console.log(mod_fR0);
140               if (mod_fR0 >=0)
141               {
142                 fxR0 = mod_fR0*(rx[i]-rxI0[j]);
143                 fyR0 = mod_fR0*(ry[i]-ryI0[j]);
144                 vx[i]+=fxR0*dt;
145                 vx[j]-=fxR0*dt;
146                 vy[i]+=fyR0*dt;
147                 vy[j]-=fyR0*dt;
148               }
149             }
150             if (distR2 < 2*r)
151             {
152               var mod_fR2,fxR2,fyR2;
153 
154               mod_fR2 = 12*D*((Math.pow(r/distR2),13)-Math.pow((r/distR2),7))/a;
155             
156               if (mod_fR2 >=0)
157               {
158                 fxR2 = mod_fR2*(rx[i]-rxI2[j]);
159                 fyR2 = mod_fR2*(ry[i]-ryI2[j]);
160                 vx[i]+=fxR2*dt;
161                 vx[j]-=fxR2*dt;
162                 vy[i]+=fyR2*dt;
163                 vy[j]-=fyR2*dt;
164               }
165             }
166             if (distR3 < 2*r)
167             {
168               var mod_fR3,fxR3,fyR3;
169 
170               mod_fR3 = 12*D*((Math.pow(r/distR3),13)-Math.pow((r/distR3),7))/a;
171               
172               if (mod_fR3 >=0)
173               {
174                 fxR3 = mod_fR3*(rx[i]-rxI3[j]);
175                 fyR3 = mod_fR3*(ry[i]-ryI3[j]);
176                 vx[i]+=fxR3*dt;
177                 vx[j]-=fxR3*dt;
178                 vy[i]+=fyR3*dt;
179                 vy[j]-=fyR3*dt;
180               }
181             }
182             
183             if (distR < 2*r)
184             {
185               var mod_fR,fxR,fyR;
186               mod_fR = 12*D*((Math.pow(r/distR),13)-Math.pow((r/distR),7))/a;
187               if (mod_fR >=0)
188               {
189                 fxR = mod_fR*(rx[i]-rx[j]);
190                 fyR = mod_fR*(ry[i]-ry[j]);
191                 vx[i]+=fxR*dt;
192                 vx[j]-=fxR*dt;
193                 vy[i]+=fyR*dt;
194                 vy[j]-=fyR*dt;
195               }
196             }
197             
198             L[i] = (rx[i] * vy[i] - ry[i] * vx[i])/35000;
199             var sumL = L.sum();
200             if (steps % 100 == 0) vGraph.graphIter(steps, sumL); // подать данные на график
201             //console.log(sumL);
202 
203           }
204           
205         }      
206     }
207   }
208         
209   
210   function draw() 
211   {
212     ctx.clearRect(0, 0, w_1 , h_1);              // очистить экран
213     for (var i = 0; i < N; i++)
214       
215     {
216       var x = rx[i];           
217       var y = ry[i];
218       ctx.beginPath();
219       ctx.fillStyle = "#00008B";
220       ctx.arc(x, y, r , 0, 2 * Math.PI, false);
221       ctx.closePath();
222       ctx.fill();
223       
224       var xI0 = rxI0[i];           
225       var yI0 = ryI0[i];
226       ctx.beginPath();
227       ctx.fillStyle = "#00008B";
228       ctx.arc(xI0, yI0, r , 0, 2 * Math.PI, false);
229       ctx.closePath();
230       ctx.fill();
231       var xI1 = rxI1[i];           
232       var yI1 = ryI1[i];
233       ctx.beginPath();
234       ctx.fillStyle = "#00008B";
235       ctx.arc(xI1, yI1, r , 0, 2 * Math.PI, false);
236       ctx.closePath();
237       ctx.fill();
238       var xI2 = rxI2[i];           
239       var yI2 = ryI2[i];
240       ctx.beginPath();
241       ctx.fillStyle = "#00008B";
242       ctx.arc(xI2, yI2, r , 0, 2 * Math.PI, false);
243       ctx.closePath();
244       ctx.fill();
245       var xI3 = rxI3[i];           
246       var yI3 = ryI3[i];
247       ctx.beginPath();
248       ctx.fillStyle = "#00008B";
249       ctx.arc(xI3, yI3, r , 0, 2 * Math.PI, false);
250       ctx.closePath();
251       ctx.fill();
252       var xI4 = rxI4[i];           
253       var yI4 = ryI4[i];
254       ctx.beginPath();
255       ctx.fillStyle = "#00008B";
256       ctx.arc(xI4, yI4, r , 0, 2 * Math.PI, false);
257       ctx.closePath();
258       ctx.fill();
259       var xI5 = rxI5[i];           
260       var yI5 = ryI5[i];
261       ctx.beginPath();
262       ctx.fillStyle = "#00008B";
263       ctx.arc(xI5, yI5, r , 0, 2 * Math.PI, false);
264       ctx.closePath();
265       ctx.fill();
266       var xI6 = rxI6[i];           
267       var yI6 = ryI6[i];
268       ctx.beginPath();
269       ctx.fillStyle = "#00008B";
270       ctx.arc(xI6, yI6, r , 0, 2 * Math.PI, false);
271       ctx.closePath();
272       ctx.fill();
273       var xI7 = rxI7[i];           
274       var yI7 = ryI7[i];
275       ctx.beginPath();
276       ctx.fillStyle = "#00008B";
277       ctx.arc(xI7, yI7, r , 0, 2 * Math.PI, false);
278       ctx.closePath();
279       ctx.fill();
280       
281     }    
282       ctx.beginPath();                             // начать рисование
283       ctx.fillStyle="#000000";
284       ctx.moveTo(w, 0);                             // переместить "карандаш" в точку 
285       ctx.lineTo(w, h_1);                          // нарисовать "карандашом" линию до точки 
286       ctx.stroke();
287       
288       ctx.beginPath();
289       ctx.fillStyle="#000000";    
290       ctx.moveTo(2 * w, 0);                             
291       ctx.lineTo(2 * w, h_1);                            
292       ctx.stroke();
293       
294       ctx.beginPath();  
295       ctx.fillStyle="#000000";
296       ctx.moveTo(0, h);                             
297       ctx.lineTo(w_1, h);                            
298       ctx.stroke();
299       
300       ctx.beginPath(); 
301       ctx.fillStyle="#000000";    
302       ctx.moveTo(0, 2 * h);                             
303       ctx.lineTo(w_1, 2 * h);                             
304       ctx.stroke();
305   }
306  
307   setInterval(step, 1000/60);                       // функция step будет запускаться 60 раз в секунду (60 раз / 1000 мс)
308     
309 }

Ссылки