КП: Динамика лавины — различия между версиями

  1 function main_dl_avalanche_finish() {
  2 
  3     var ctx = canvas_avalanche_finish.getContext("2d");
  4     var width = canvas_avalanche_finish.width;
  5     var height = canvas_avalanche_finish.height;
  6 
  7     ctx.fillStyle="#8888ff";
  8                           
  9     var r = 5;                                 
 10 	var grass_height = 5;
 11 	var mountian_length = 400;
 12 	var sin_alpha_1 = 0.5;
 13 	var cos_alpha_1 = 0.866;
 14 	var sun_r = 50;
 15 	var rx1 = 0, ry1 =  (mountian_length)* sin_alpha_1 / cos_alpha_1 - r;
 16 	var rx2 = 40, ry2 =  (mountian_length + rx2 - 4 * r) * sin_alpha_1 / cos_alpha_1;
 17 	var rx3 = 80, ry3 =  (mountian_length + rx3 - 6 * r) * sin_alpha_1 / cos_alpha_1;
 18 	
 19 	var g = 2;
 20 	var dt = 0.15;
 21 	var m = 1;
 22 	var B = 0.06;
 23 	var B2 = 0.09;
 24 	var vx1 = 2, vy1 = 2;
 25 	var vx2 = 2, vy2 = 2;
 26 	var vx3 = 2, vy3 = 2;
 27 	var fy1 = 0;
 28 	var fx1 = 0;
 29 	var fy2 = 0;
 30 	var fx2 = 0;
 31 	var fy3 = 0;
 32 	var fx3 = 0;
 33 	
 34 	var mu1 = 0.2;
 35 	
 36 	var a1 = g * (sin_alpha_1 - mu1 * cos_alpha_1);
 37 
 38     function step() {                           
 39         tick();
 40         draw();
 41     }
 42 
 43     function tick() {  
 44 		if (rx1 + r > 0 && rx1 - r < mountian_length && ry1 < (height - grass_height - mountian_length * sin_alpha_1 / cos_alpha_1) * rx1 
 45 											+ mountian_length * sin_alpha_1 / cos_alpha_1) {
 46 			fy1 = m * g - B * vy1;
 47 			fx1 = m * g - B * vx1;
 48 			vy1 = vy1 + fy1 / m * dt * sin_alpha_1;
 49 			vx1 = vx1 + fx1 / m * dt * cos_alpha_1;
 50 			ry1 = ry1 + vy1 * dt * sin_alpha_1;
 51 			rx1 = rx1 + vx1 * dt * cos_alpha_1; 
 52 			
 53 		}
 54 		if (rx1 - r > mountian_length){
 55 			
 56 			fx1 = - B2 * vx1;
 57 			vx1 = vx1 + fx1 / m * dt;
 58 			rx1 = rx1 + vx1 * dt;
 59 			ry1 = height - grass_height;
 60 		}
 61 		if (rx2 + r > 0 && rx2 - r < mountian_length && ry2 < (height - grass_height - mountian_length * sin_alpha_1 / cos_alpha_1) * rx2 
 62 											+ mountian_length * sin_alpha_1 / cos_alpha_1) {
 63 			fy2 = m * g - B * vy2;
 64 			fx2 = m * g - B * vx2;
 65 			vy2 = vy2 + fy2 / m * dt * sin_alpha_1;
 66 			vx2 = vx2 + fx2 / m * dt * cos_alpha_1;
 67 			ry2 = ry2 + vy2 * dt * sin_alpha_1;
 68 			rx2 = rx2 + vx2 * dt * cos_alpha_1;
 69 		}
 70 		if (rx2 - r > mountian_length){
 71 			ry2 = height - grass_height;
 72 			fx2 = - B2 * vx2;
 73 			vx2 = vx2 + fx2 / m * dt;
 74 			rx2 = rx2 + vx2 * dt;
 75 		}
 76 		if (rx3 + r > 0 && rx3 - r < mountian_length && ry3 < (height - grass_height - mountian_length * sin_alpha_1 / cos_alpha_1) * rx3
 77 											+ mountian_length * sin_alpha_1 / cos_alpha_1) {
 78 			fy3 = m * g - B * vy3;
 79 			fx3 = m * g - B * vx3;
 80 			vy3 = vy3 + fy3 / m * dt * sin_alpha_1;
 81 			vx3 = vx3 + fx3 / m * dt * cos_alpha_1;
 82 			ry3 = ry3 + vy3 * dt * sin_alpha_1;
 83 			rx3 = rx3 + vx3 * dt * cos_alpha_1;
 84 		}
 85 		if (rx3 - r > mountian_length){
 86 			ry3 = height - grass_height;
 87 			fx3 = - B2 * vx3;
 88 			vx3 = vx3 + fx3 / m * dt;
 89 			rx3 = rx3 + vx3 * dt;
 90 		}
 91         
 92     }
 93 
 94     function draw() { 
 95 		
 96         ctx.clearRect(0, 0, width, height);     //clear
 97 		ctx.beginPath();
 98 		
 99 		ctx.fillStyle="#49b9ed"; //sky
100 		ctx.beginPath();
101 		ctx.fillRect(0, 0, width, height);
102 		
103 		ctx.fillStyle="#16a600"; //grass
104 		ctx.beginPath();
105 		ctx.fillRect(0, height - grass_height, width, height);
106 		
107 		ctx.fillStyle="#57564c"; //mountain
108 		ctx.beginPath();
109 		ctx.moveTo(0, height - grass_height);
110 		ctx.lineTo(mountian_length, height - grass_height);
111 		ctx.lineTo(0, mountian_length * sin_alpha_1 / cos_alpha_1);
112 		ctx.lineTo(0, height - grass_height);
113 		ctx.fill();
114 		
115 		
116 		ctx.fillStyle="#fff200"; //sun
117         ctx.beginPath();
118         ctx.arc(width, 0, sun_r, 0, 2 * Math.PI);
119         ctx.fill();
120 		
121 		ctx.fillStyle="#ff0000"; //snow1
122 		ctx.beginPath();
123         ctx.arc(rx1, ry1, r, 0, 2 * Math.PI);
124         ctx.fill();
125 		
126 		ctx.fillStyle="#0900ff"; //snow2
127 		ctx.beginPath();
128         ctx.arc(rx2, ry2, r, 0, 2 * Math.PI);
129         ctx.fill();
130 		
131 		ctx.fillStyle="#e6e5d1"; //snow3
132 		ctx.beginPath();
133         ctx.arc(rx3, ry3, r, 0, 2 * Math.PI);
134         ctx.fill();
135 		        
136 				
137     }
138 
139     setInterval(step, 1000 / 60);               // функция step будет запускаться 60 раз в секунду (60 раз / 1000 мс)
140 
141 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Avalanche</title>
 5     <script src="dl_avalanche_finish.js"></script>
 6 </head>
 7 <body onload="main_dl_avalanche_finish();">
 8     <canvas id="canvas_avalanche_finish" width="800" height="400" style="border: 1px solid #000000"></canvas>
 9 </body>
10 </html>