Участник:StarfloFr — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
м
Строка 1: Строка 1:
 
{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Natalin/Kursach1.html | width=1920 | height=1080 | border=0}}
 
{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/Natalin/Kursach1.html | width=1920 | height=1080 | border=0}}
  
== КОД ==  
+
==Код программы==
<!DOCTYPE html>
+
<div class="mw-collapsible mw-collapsed">
<html lang="ru">
+
'''Код программы на языке JavaScript:''' <div class="mw-collapsible-content">
<head>
+
<syntaxhighlight lang="javascript" line start="1" enclose="div">
  <title>Модель броуновского движения</title>
 
<meta charset="UTF-8">
 
 
 
</head>
 
 
 
<style>
 
canvas { border: 1px solid black; }
 
.pr {
 
 
 
border-bottom :1px solid #a2a9b1;
 
 
 
</style>
 
<body onload = "start();" >
 
 
 
 
<p class = "pr" ; style='font-size:30px ; font-weight:40; font-family:'Linux Libertine','Georgia','Times',serif;'>Модель Броуновского движения</p>
 
 
 
    <p class = "pr" ; style='font-size:23px ; font-weight:40; font-family:'Linux Libertine','Georgia','Times',serif;'>Описание</p>
 
    <p  style='font-size:18px ; font-weight:40; font-family:'Linux Libertine','Georgia','Times',serif;'>Модель Броуновского движения с изоброжением траектории. Работа сделана на языке программирования JavaScript.</p>
 
    <p  style='font-size:18px ; font-weight:40; font-family:'Linux Libertine','Georgia','Times',serif;'>Исполнитель: Никита Натальин.</p>
 
    <p  style='font-size:18px ; font-weight:40; font-family:'Linux Libertine','Georgia','Times',serif;'>Группа:3630103/90001</p>
 
   
 
   
 
<p class = "pr" ; style='font-size:23px ; font-weight:40; font-family:'Linux Libertine','Georgia','Times',serif;'>Визуализация</p>
 
   
 
    <br>
 
    <input type="text" id="size" value="500">
 
   
 
    <input type="button" value="chaneg size" onclick="changeSize();">
 
    <br>
 
    <input type="text" id="addCount" value="10">
 
    <input type="button" value="add" onclick="add();">
 
   
 
    <input type="button" value="delete" onclick="del();">
 
    <br>
 
 
 
    <input type="text" id="weight" value="500">
 
    <input type="button" value="weight" onclick="weight();">
 
    <br>
 
 
 
    <input type="button" value="slowly" onclick="slowly();">
 
    <input type="button" value="faster" onclick="faster();">
 
 
 
    <br>
 
   
 
   
 
   
 
    <label><input type="checkbox" id="color" checked>color</label>
 
    <br><br>
 
 
 
 
 
<canvas id="GG" width="500" height="500"></canvas>
 
<script>  
 
  
 
class Ball {
 
class Ball {
Строка 292: Строка 238:
 
timeSpeed++;
 
timeSpeed++;
 
}
 
}
 
+
</syntaxhighlight>
</script>
+
</div>
</body>
 
</html>
 

Версия 18:25, 1 июня 2020

Код программы

Код программы на языке JavaScript:
  1 	class Ball {
  2 		constructor(x, y, r, vx, vy,color){
  3 		    this.x = x;
  4 			this.y = y;
  5 			this.r = r;
  6 			this.vx = vy;
  7 			this.vy = vx;
  8 
  9 			this.calculateMass();
 10 
 11 			this.color = color;
 12 		}
 13 
 14 		calculateMass() {
 15 			this.m = (this.r * this.r * this.r)/50 ;
 16 		}
 17 
 18 		getVx() {
 19 			return this.vx * Math.pow(2, timeSpeed);
 20 		}
 21 
 22 		getVy() {
 23 			return this.vy * Math.pow(2, timeSpeed);
 24 		}
 25 
 26 		move() {
 27 			this.x += this.getVx();
 28 			this.y += this.getVy();
 29 		}
 30 		
 31 	}
 32 
 33 	var count = 50;
 34 
 35 	var MAX_SPEED = 20;
 36 	var MIN_RADIUS = 100;
 37 	var MAX_RADIUS = 100;
 38 	var WIDTH = 10000;
 39 
 40 	var timeSpeed = 0;
 41 
 42 	var balls = [];
 43 
 44 	var canvas;
 45 	var ctx;
 46 	var T = 300;
 47 	var pathx = [];
 48 	var pathy = [];
 49 		
 50 	function random(min, max) {
 51 		return Math.random() * (max - min) + min;	
 52 	}
 53 
 54 	function move() {
 55 
 56 		for (var i = 0; i < count; i++) {
 57 			var ball = balls[i];
 58 
 59 			if (ball.x < ball.r && ball.vx < 0)
 60 				ball.vx *=-1;
 61 			if (ball.x > WIDTH-ball.r && ball.vx > 0)
 62 				ball.vx *=-1;
 63 			if (ball.y < ball.r && ball.vy < 0)
 64 				ball.vy *=-1;
 65 			if (ball.y > WIDTH-ball.r && ball.vy > 0)
 66 				ball.vy *=-1;
 67 			
 68 			for (var j = i + 1; j < count; j++) {
 69 				var ball2= balls[j];
 70 				var z = (ball.x - ball2.x) * (ball.getVx() - ball2.getVx()) + (ball.y - ball2.y) * (ball.getVy() - ball2.getVy());
 71 				var l = Math.pow(ball.getVx() - ball2.getVx(), 2) + Math.pow(ball.getVy() - ball2.getVy(), 2);
 72 				var m = Math.pow(ball.x - ball2.x, 2) + Math.pow(ball.y - ball2.y, 2) - Math.pow(ball.r + ball2.r, 2);
 73 				
 74 				var d = z*z - l*m;
 75 				
 76 				var t0 = -(z + Math.sqrt(d)) / l;
 77 
 78 				var p = Math.pow(ball.x - ball2.x, 2) + Math.pow(ball.y - ball2.y, 2);
 79 
 80 				if (t0 >= 0 && t0 <= 1 || p < Math.pow(ball.r + ball2.r, 2)) {
 81 					ball.x += t0 * ball.getVx();
 82 					ball.y += t0 * ball.getVy();	
 83 					ball2.x += t0 * ball2.getVx();	
 84 					ball2.y += t0 * ball2.getVy();	
 85 					
 86 					var px = ball.x - ball2.x;
 87 					var py = ball.y - ball2.y;
 88 
 89 					var q = 2 * (px * (ball2.vx - ball.vx) + py * (ball2.vy - ball.vy))
 90 					
 91 					var dvx = q * px / (Math.pow(px, 2) + Math.pow(py,2)) * ball.m * ball2.m / (ball.m + ball2.m);
 92 					var dvy = q * py / (Math.pow(px, 2) + Math.pow(py,2)) * ball.m * ball2.m / (ball.m + ball2.m);
 93 					var k = 1.38 * Math.pow(10,-23);
 94 
 95 					ball.vx += dvx / ball.m;
 96 					ball.vy += dvy / ball.m;
 97 					ball2.vx -= dvx / ball2.m;
 98 					ball2.vy -= dvy / ball2.m;
 99 										
100 				}
101 				
102 			}
103 			
104 			ball.move();
105 		}
106 
107 
108 		draw();	
109 	}
110 
111 		
112 	
113 	function draw() {
114 		ctx.clearRect(0, 0, canvas.width, canvas.height);
115 
116 		var c = canvas.width / WIDTH;
117 
118 		for (var i = 0; i < count; i++) {
119 			var ball= balls[i];
120 			ctx.beginPath();
121 			ctx.arc(ball.x * c, ball.y * c, ball.r * c, 0, 2 * Math.PI, false);
122 			
123 			if (document.getElementById('color').checked)
124 				ctx.fillStyle = ball.color;
125 			else
126 				ctx.fillStyle = 'blue';
127 
128 			ctx.fill();
129 			
130 			
131 		
132 		}
133 		drawPath();
134 	}
135 			
136 	function start() {
137 		balls[0]= new Ball( WIDTH/2  , WIDTH/2, 500, 0, 0,'red');
138 		for (var i = 1; i < count; i++) {
139 			var r = random(MIN_RADIUS, MAX_RADIUS);
140 			balls[i] = new Ball(random(r, WIDTH - r), random(r, WIDTH - r), r, random(-MAX_SPEED, MAX_SPEED), random(-MAX_SPEED, MAX_SPEED),'blue');
141 			
142 		}
143 		
144 		canvas = document.getElementById('GG');
145 		ctx = canvas.getContext('2d');
146 		
147 		setInterval(move, 1);
148 	}
149 
150 	function weight() {
151 		
152 		var r = parseInt(document.getElementById('weight').value);
153 		if (r > WIDTH / 2 || r < 50) 
154 			return;
155 
156 		var oldMass = balls[0].m;
157 		balls[0].r = r;
158 		balls[0].calculateMass();
159 
160 		balls[0].vx *= Math.sqrt(oldMass / balls[0].m);
161 		balls[0].vy *= Math.sqrt(oldMass / balls[0].m);
162 
163 		if (balls[0].x > WIDTH - r)
164 			balls[0].x = WIDTH - r;
165 		if (balls[0].x < r)
166 			balls[0].x = r;
167 		if (balls[0].y > WIDTH - r)
168 			balls[0].y = WIDTH - r;
169 		if (balls[0].y < r)
170 			balls[0].y = r;
171 		
172 	}
173 
174 	function changeSize() {
175 		canvas.width = document.getElementById('size').value;
176 		canvas.height = document.getElementById('size').value;
177 	}
178 		var tander = 0;
179 		
180 		 function drawPath() {
181 			 tander++;
182 			 if(tander === 5){
183 				 tander=0;
184 			 if ( pathx.length>=1000){
185 				 pathx.shift();
186 				 pathy.shift();
187 			 }
188 			 
189 		 var c = canvas.width / WIDTH;
190 		pathx.push( balls[0].x*c);
191 		pathy.push( balls[0].y*c);
192 			 }
193 		ctx.beginPath();
194             ctx.lineWidth = 2;
195 	        ctx.strokeStyle = 'Black';
196             ctx.moveTo(pathx[0], pathy[0]);
197 			 for (i=1;i<pathx.length; i++)
198 				 {
199 	        ctx.lineTo(pathx[i], pathy[i]);
200 				 }
201 			 
202 			 ctx.stroke();
203 		}
204 		
205 		
206 		
207 	function add() {
208 		var k = parseInt(document.getElementById('addCount').value);
209 		k = Math.min(k , 250 - balls.length);
210 		for (var i = 0; i < k; i++) {
211 			var r = random(MIN_RADIUS, MAX_RADIUS);
212 			balls[count + i] = new Ball(random(r, WIDTH - r), random(r, WIDTH - r), r, random(-MAX_SPEED, MAX_SPEED), random(-MAX_SPEED, MAX_SPEED));
213 		
214 		}
215 		count += k;
216 	}
217 		
218 	function del() {
219 		var k = Math.min(count - 1, parseInt(document.getElementById('addCount').value));
220 		balls = balls.slice(0, count - k);
221 		count -= k;
222 	}
223 
224 	function slowly() {
225 		if (timeSpeed > -3)
226 			timeSpeed--;
227 	}
228 
229 	function faster() {
230 		if (timeSpeed < 3)
231 			timeSpeed++;
232 	}