particleSim/particleSim.html at master · fibonatic/particleSim · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html>
<head>
<title>particleSim</title>
<style>
body {
    background: #000000;
    color: #FFFFFF;
}
canvas {
    border: 3px #FFFFFF solid;
}
table {
    border: 1px #FFFFFF solid;
    width: 100%;
}
</style>
</head>
<body>
<center>
<h1>Particles Simulation</h1>
<input type="button" id="pause" value="Pause">
<input type="button" id="play" value="Play">
<div id="playerStats"></div>
<canvas id="canvas" width="960" height="540"></canvas>
<div id="debug"></div>
</center>
<script>

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objects = new Array();

// Simulation settings:
var runSpeed = 1;   		// Nummber of milliseconds between each iteration.
var hyperSpeed = 3; 		// How many times to run simulation per iteration.			WARNING: High values lead to lag.
var hyperRender = true;		// True: render each iteration, False: render each loop. 	ONLY WORKS with hyperWarp on and at regular runSpeed (aka slower).
var timeStep = 3e-4;			// Nummerical time step size, which passes each loop.
var path = false;  			// Draw path

// Global variables:
var N;
var width = canvas.width;
var height = canvas.height;
var run;
var running = true;

// Main program:
main();

function main()
{
    particalSystem(); 		// Initialize begin conditions.
	N = objects.length;		// This value is often calculated for loops, calculating it once should reduce the number of calculations.

	run = setInterval('loop()',runSpeed);

	document.getElementById('pause').onclick = function() 	// Detecting clicking on pause button.
	{
		if(running)
		{
			run = clearInterval(run); 						// Stop simulation.
			running = false;
		}
	};
	document.getElementById('play').onclick = function() 	// Detecting clicking on play button.
	{
		if(!running)
		{
			run = setInterval('loop()',runSpeed); 		// Resume simulation.
			running = true;
		}
	};
}

// Functions:
function loop()
{
    if (path)
	{
		context.fillStyle = "rgba(0, 0, 0, 0.2)";
		context.fillRect(0, 0, width, height);
	}
	if (!hyperRender) render("rgba( 0 , 0 , 0 , 0.1 )");
	for (var i = 0; i < hyperSpeed; ++i)
	{
		collisionPhysics();
		if (hyperRender) render("rgba( 0 , 0 , 0 , 0.1 )");
		updatePosition();
		if (hyperRender) render();
	}
	if (!hyperRender) render();
	debugOut();
}

function Thing(m, x, y, u, v, r, color)
{
    this.m = m; 									// Constant parameter of accelation.
    this.r = r ? r : Math.sqrt(m)/2; 				// Radius of object.
    if (this.r < 1) this.r = 1;
    this.x = x; 									// Position
    this.y = y;
    this.u = u; 									// Scaled velocity with nummerical time step.
    this.v = v;
    this.fill = color ? color : 'white'; 			// Render color of object, when undefined it is set to white.
    this.fixed = false; 							// If true it can not move, but does applies forces on other objects.
	this.col = false;

    this.dataOut = function()
    {
        return '<tr><td>Mass: ' + this.m.toString() + '</td><td>Radius: ' + this.r.toFixed(2) + '</td><td>X: ' + this.x.toFixed(2) +
			   '</td><td>Y: ' + this.y.toFixed(2) + '</td><td>Velocity X: ' + this.u.toFixed(2) + '</td><td>Velocity Y: ' +
			   this.v.toFixed(2) + '</td><td>Fill color: ' + this.fill + '</td><td>Fixed? ' + this.fixed.toString() + '</td></tr>';
    }
}

function collisionPhysics()
{
    for (var i = 0; i < N - 1; ++i)
    {
        for (var j = i + 1; j < N; ++j)
        {
            var Dx = objects[j].x - objects[i].x + timeStep * (objects[j].u - objects[i].u);
            var Dy = objects[j].y - objects[i].y + timeStep * (objects[j].v - objects[i].v);
            var D2 = Dx * Dx + Dy * Dy;              // Distance between objects[i] and objects[j] squared.

			if (D2 <= (objects[i].r + objects[j].r) * (objects[i].r + objects[j].r))	// Colision check could be inserted here, reusing D2.
			{
				objects[i].col = true;
				objects[j].col = true;
				var dx = objects[j].x - objects[i].x;
				var dy = objects[j].y - objects[i].y;
				var du = objects[j].u - objects[i].u;
				var dv = objects[j].v - objects[i].v;
				var dr = objects[j].r + objects[i].r;
				var dt = (-Math.sqrt(2 * dx * du * dy * dv - du * du * (dy * dy - dr * dr) - dv * dv * (dx * dx - dr * dr)) - dx * du - dy * dv) / (du * du + dv * dv);
				Dx = objects[j].x - objects[i].x + dt * (objects[j].u - objects[i].u);
				Dy = objects[j].y - objects[i].y + dt * (objects[j].v - objects[i].v);
				D2 = Dx * Dx + Dy * Dy;
				var delta = 2 * (Dx * (objects[i].u - objects[j].u) + Dy * (objects[i].v - objects[j].v)) / (D2 * (objects[i].m + objects[j].m));
				objects[i].u += -objects[i].m * delta * Dx;
				objects[i].v += -objects[i].m * delta * Dy;
				objects[j].u +=  objects[j].m * delta * Dx;
				objects[j].v +=  objects[j].m * delta * Dy;
				objects[i].x += (timeStep - dt) * objects[i].u;
				objects[i].y += (timeStep - dt) * objects[i].v;
				objects[j].x += (timeStep - dt) * objects[j].u;
				objects[j].y += (timeStep - dt) * objects[j].v;
			}
        }
    }
}

function wallBounce(i)
{
	if (objects[i].x > width  - objects[i].r) objects[i].u = -Math.abs(objects[i].u);
	if (objects[i].x < 0      + objects[i].r) objects[i].u =  Math.abs(objects[i].u);
	if (objects[i].y > height - objects[i].r) objects[i].v = -Math.abs(objects[i].v);
	if (objects[i].y < 0      + objects[i].r) objects[i].v =  Math.abs(objects[i].v);
}

function updatePosition()
{
	for (var i = 0; i < N; ++i)
	{
		if (!objects[i].fixed || !objects[i].col)
		{
			wallBounce(i);
			objects[i].x += timeStep * objects[i].u; 		// Add scaled velocity to position.
			objects[i].y += timeStep * objects[i].v;
		}
		if (objects[i].col) objects[i].col = false;
	}
}

function render(color)
{
    if (!path) context.clearRect(0, 0, width, height);

    for (var i = 0; i < N; ++i)
    {
        context.beginPath();
        var radius = objects[i].r;
        if (radius < 0.5) radius = 0.5;
		context.arc(objects[i].x, objects[i].y, radius, 0, 2 * Math.PI, false);
		context.fillStyle = color ? color : objects[i].fill;
        context.fill();
    }
}

function debugOut()
{
    var out='<table>'
    for (var i = 0; i < N; ++i)
    {
        var out = out + objects[i].dataOut();
    }
    document.getElementById('debug').innerHTML = out + '</table>';
}

// Initialization:
function particalSystem()
{
	var v0 = 1e4;
	var r = 4;
	var Width = width - 2 * r;
	var Height = height - 2 * r;
	for (var i = 0; i < 500; ++i)
	{
		objects[i]  = new Thing(1, Math.random() * Width + r, Math.random() * Height + r, v0 * (Math.random() - 0.5), v0 * (Math.random() - 0.5), r, false);
	}
}

function cadleSystem()
{
	var v = 1e3;
	var r = 10;
	var d = 0.25 * height;
	objects[0]  = new Thing(1, 0.50 * width - d, 0.50 * height, v, 0, r, "red");
	objects[1]  = new Thing(1, 0.50 * width - d + 2.0001 * r, 0.50 * height, v, 0, r, "white");
	objects[2]  = new Thing(1, 0.50 * width + 4.0002 * r, 0.50 * height, 0, 0, r, "green");
	objects[3]  = new Thing(1, 0.50 * width + 2.0001 * r, 0.50 * height, 0, 0, r, "blue");
	objects[4]  = new Thing(1, 0.50 * width, 0.50 * height, 0, 0, r, "yellow");
}

</script>
</body>
</html>