examples/sph_approximation.html

<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<style>
		body {font-family: Helvetica, sans-serif;}
		table {background-color:#CCDDEE;text-align:left}
	</style>
	<script type="text/x-mathjax-config">
	  MathJax.Hub.Config({
		extensions: ["tex2jax.js"],
		jax: ["input/TeX", "output/HTML-CSS"],
		tex2jax: {
		  inlineMath: [ ['$','$'], ["\\(","\\)"] ],
		  displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
		  processEscapes: true
		},
		"HTML-CSS": { fonts: ["TeX"] }
	  });
	</script>
	<script type="text/javascript" aync src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
	<script src="https://cdn.plot.ly/plotly-2.5.1.min.js"></script>
	<title>SPH Approximation</title>
</head>
<body>
<main>
	<h1 style="text-align:center">SPH Approximation</h1>
	<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
		<col width="400"> 
		<col width="400" height="400"> 
		<tr>
			<td>
				<div id="plotOutput" style="width: 600px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
			</td>
			<td>
				<div id="plotOutput2" style="width: 600px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
			</td>
		</tr>
		<tr>
		<td><table style="margin:20px">	
			<col width="200" style="padding-right:10px"> 
			<col width="100"> 
			<tr>
				<td><label>Particle radius</label></td>
				<td><span>0.025</span></td>
			</tr>
			<tr>
				<td><label for="supportRadius">Support radius</label></td>
				<td><input onchange="plot.reset()" id="supportRadius" value="0.1" type="input"></td>
			</tr>
			<tr>
				<td><label for="randomOffset">Add random offset</label></td>
				<td><input onchange="plot.reset()" id="randomOffset" type="checkbox"></td>
			</tr>
			<tr>
				<td><label for="shepardFilter">Use Shepard filter</label></td>
				<td><input onchange="plot.plotFunctions()" id="shepardFilter" type="checkbox"></td>
			</tr>
		</table></td>
		</tr>

		<tr><td colspan="2">
			<h2>SPH Approximation of different functions:</h2>
			In this example we discretized a linear and a quadratic polynomial as well as a trigonometric function using SPH with the cubic spline kernel [KBST19, KBST22]. The left plot shows the particle sampling pattern while the right plot shows the exact functions and their SPH approximations. To compute the SPH approximations the function values are sampled along the red line in the left plot. That means that for each point on the line the neighbors are determined and the SPH approximation formula is applied:
			$$\langle f(x,y) \rangle = \sum_j \frac{m_j}{\rho_j} f(x_j,y_j) W_{ij}$$
			
			Linear function: 
			$$f(x,y) = \frac12 (x+y)$$
			
			Quadratic_function:
			$$f(x,y) = \frac12 (x^2+y^2)-1$$
			
			Trigonometric function:
			$$f(x,y) = \sin(5 x) \cos(3y)$$
			
			<h3>Shepard filter</h3>
			The SPH approximation of a fluid quantity is error-prone if the particle neighborhood is only partially filled. To consider this in the computation the smoothing kernel can be corrected by a factor $s_i$:
			$$\tilde {W}_{ij} = s_i W_{ij} = \frac{1}{\sum_k \frac{m_k}{\rho_k} W_{ik}} W_{ij}.$$
			
			
			<h3>References</h3>
			<ul>
			<li>[KBST19] Dan Koschier, Jan Bender, Barbara Solenthaler, Matthias Teschner. Smoothed Particle Hydrodynamics for Physically-Based Simulation of Fluids and Solids. Eurographics Tutorial, 2019
			<li>[KBST22] Dan Koschier, Jan Bender, Barbara Solenthaler, Matthias Teschner. A Survey on SPH Methods in Computer Graphics. Computer Graphics Forum, 2022
			</li>
			</ul>
		</td></tr>
	</table>	
	
</main>

<script id="simulation_code" type="text/javascript">
	class Particle 
	{
		constructor (x, y) 
		{
			this.x = x;				// position
			this.y = y;	
			this.density = 0;		// density
		}
	}
		
	class Simulation
	{
		constructor(width, height, sRadius, rand)
		{
			this.particles = [];
			this.particleRadius = 0.025;
			this.supportRadius = sRadius;						// support radius 
			this.density0 = 1000.0;								// rest density of water
			this.diam = 2.0 * this.particleRadius;
			this.mass = this.diam*this.diam*this.density0;		// mass = area * rest density
						
			// constants for kernel computation
			this.kernel_k = 40.0 / (7.0 * (Math.PI*this.supportRadius*this.supportRadius));	  
			this.kernel_l = 240.0 / (7.0 * (Math.PI*this.supportRadius*this.supportRadius));
			this.kernel_0 = this.cubicKernel2D(0);
					
			this.width = width;
			this.height = height;
			this.numParticles = 0;
			
			this.init(rand);
		}
		
		// initialize scene: generate a block of particles 
		init(rand)
		{			
			// create particles  
			let i;
			let j;
			let w = this.width;
			let h = this.height;
			
			// generate a block of fluid particles 
			for (i = 0; i < h; i++) 
			{
				for (j = 0; j < w; j++) 
				{
					this.particles.push(new Particle(
						-w*0.5*this.diam + j*this.diam + this.particleRadius, 
						i*this.diam + this.particleRadius));
					
					if (rand)
					{
						this.particles[this.particles.length-1].x -= 0.01 + Math.random()*0.02;
						this.particles[this.particles.length-1].y -= 0.01 + Math.random()*0.02;
					}
				}
			}
			this.numParticles = this.particles.length;		
							
			// Compute densities
			this.computeDensity();					
		}
		
		// compute the norm of a vector (x,y)
		norm(x, y)
		{
			return Math.sqrt(x*x + y*y);
		}
		
		// Cubic spline kernel 2D
		cubicKernel2D(r)
		{
			let res = 0.0;
			let q = r / this.supportRadius;
			if (q <= 1.0)
			{
				let q2 = q*q;
				let q3 = q2*q;
				if (q <= 0.5)
					res = this.kernel_k * (6.0*q3 - 6.0*q2 + 1.0);
				else
					res = this.kernel_k * (2.0*Math.pow(1.0 - q, 3));
			}
			return res;
		}
		
		// Gradient of cubic spline kernel 2D
		cubicKernel2D_Gradient(rx, ry)
		{
			let res = [0,0];
			let rl = this.norm(rx, ry);
			let q = rl / this.supportRadius;
			if (q <= 1.0)
			{
				if (rl > 1.0e-6)
				{
					let gradq_x = rx * (1.0 / (rl*this.supportRadius));
					let gradq_y = ry * (1.0 / (rl*this.supportRadius));
					if (q <= 0.5)
					{
						res[0] = this.kernel_l*q*(3.0*q - 2.0) * gradq_x;
						res[1] = this.kernel_l*q*(3.0*q - 2.0) * gradq_y;
					}
					else
					{
						let factor = (1.0 - q) * (1.0 - q);
						res[0] = this.kernel_l*(-factor) * gradq_x;
						res[1] = this.kernel_l*(-factor) * gradq_y;
					}
				}
			}
			return res;
		}
		
		// Find all neighbors including the particle itself by a brute force search.
		find_neighbors(x, y)
		{
			let neighbors = [];
			for (let i = 0; i < this.numParticles; i++) 
			{
				let p = this.particles[i];
				let dist2 = (x-p.x)*(x-p.x) + (y-p.y)*(y-p.y);
				let r2 = this.supportRadius * this.supportRadius;
				if (dist2 - r2 < 1.0e-6)
					neighbors.push(i);
			}
			return neighbors;
		}
				
		// compute the density of all particles using the SPH formulation
		computeDensity()
		{
			for (let i = 0; i < this.numParticles; i++) 
			{
				let p_i = this.particles[i];
				let neighbors = this.find_neighbors(p_i.x, p_i.y);
				
				p_i.density = 0.0;
			
				let nl = neighbors.length;
				for(let j=0; j < nl; j++)
				{
					let nj = neighbors[j];
					let p_j = this.particles[nj];
					
					// compute W (xi-xj)
					let Wij = this.cubicKernel2D(this.norm(p_i.x - p_j.x, p_i.y - p_j.y));
					p_i.density += this.mass * Wij;	
				}
			}
		}		
	}
	
	class Plot
	{
		constructor()
		{
		}
		
		reset()
		{
			let sr = parseFloat(document.getElementById('supportRadius').value);
			let r = document.getElementById('randomOffset').checked;	
			delete this.sim;
			this.sim = new Simulation(30, 30, sr, r);
			
			this.plotParticles();
			this.plotFunctions();
		}
		
		linear_function(x, y)
		{
			return 0.5*(x+y);
		}
		
		quadratic_function(x, y)
		{
			return 0.5*(x*x+y*y)-1.0;
		}
		
		trigonometric_function(x, y)
		{
			return Math.sin(5.0*x) * Math.cos(3.0*y);
		}
		
		plotFunctions()
		{	
			let useShepard = document.getElementById('shepardFilter').checked;	

			let x = -0.75;
			let y = 0.5;
			let num_steps = 200;
			let xValues = [];
			let yValues_linear_orig = [];
			let yValues_quadratic_orig = [];
			let yValues_trigonometric_orig = [];
			let yValues_linear = [];
			let yValues_quadratic = [];
			let yValues_trigonometric = [];
			for (let i = 0; i <= num_steps; i++) 
			{
				xValues.push(x);
				yValues_linear_orig.push(this.linear_function(x,y));
				yValues_quadratic_orig.push(this.quadratic_function(x,y));
				yValues_trigonometric_orig.push(this.trigonometric_function(x,y));

				let neighbors = this.sim.find_neighbors(x, y);
				let val_linear = 0.0;
				let val_quadratic = 0.0;
				let val_trigonometric = 0.0;
				
				// Compute Shepard filter factor
				let s = 1.0;
				if (useShepard)
				{
					s = 0.0;
					for (let j = 0; j < neighbors.length; j++) 
					{
						let p_j = this.sim.particles[neighbors[j]];
					
						// compute W (xi-xj)
						let Wij = this.sim.cubicKernel2D(this.sim.norm(x - p_j.x, y - p_j.y));
						s += this.sim.mass / p_j.density * Wij;
					}
					if (Math.abs(s) > 1.0e-6)
						s = 1.0/s;
					else 
						s = 1.0;
				}
				
				for (let j = 0; j < neighbors.length; j++) 
				{
					let p_j = this.sim.particles[neighbors[j]];
					
					// compute W (xi-xj)
					let Wij = this.sim.cubicKernel2D(this.sim.norm(x - p_j.x, y - p_j.y));
					val_linear += s * this.sim.mass / p_j.density * this.linear_function(p_j.x, p_j.y) * Wij;
					
					val_quadratic += s * this.sim.mass / p_j.density * this.quadratic_function(p_j.x, p_j.y) * Wij;
					
					val_trigonometric += s * this.sim.mass / p_j.density * this.trigonometric_function(p_j.x, p_j.y) * Wij;
				}
				yValues_linear.push(val_linear);
				yValues_quadratic.push(val_quadratic);
				yValues_trigonometric.push(val_trigonometric);
				
				x += 1.5 / num_steps;
				y += 1.0 / num_steps;
			}
			
			var trace_linear_orig = {
			  x: xValues,
			  y: yValues_linear_orig,
			  name: "lin. fct."
			};
			
			var trace_quadratic_orig = {
			  x: xValues,
			  y: yValues_quadratic_orig,
			  name: "quadr. fct."
			};
			
			var trace_trigonometric_orig = {
			  x: xValues,
			  y: yValues_trigonometric_orig,
			  name: "trig. fct."
			};
			
			var trace_linear = {
			  x: xValues,
			  y: yValues_linear,
			  name: "lin. fct. (SPH)"
			};
			
			var trace_quadratic = {
			  x: xValues,
			  y: yValues_quadratic,
			  name: "quadr. fct. (SPH)"
			};
			
			var trace_trigonometric = {
			  x: xValues,
			  y: yValues_trigonometric,
			  name: "trig. fct. (SPH)"
			};
			
			var data = [trace_linear_orig, trace_linear, trace_quadratic_orig, trace_quadratic, trace_trigonometric_orig, trace_trigonometric];
			
			var layout = {
			  title: 'Functions',
			  width: 600,
			  height: 600
			};
			
			Plotly.newPlot('plotOutput2', data, layout);
		}
		
		plotParticles()
		{		
			this.x = [];
			this.y = [];
			this.shapes = [];
			for (let i = 0; i < this.sim.numParticles; i++) 
			{
				let p = this.sim.particles[i];
				this.x.push(p.x);
				this.y.push(p.y);
				this.shapes.push({
				  type: 'circle',
				  xref: 'x',
				  yref: 'y',
				  x0: p.x-0.025,
				  y0: p.y-0.025,
				  x1: p.x+0.025,
				  y1: p.y+0.025,
				  fillcolor: 'rgba(0, 70, 200, 0.7)',
				  line: {
					width: 1,
					color: 'rgba(0, 30, 150, 0.7)'
				  }
				});
			}
			
			var trace1 = {
			  x: this.x,
			  y: this.y,
			  mode: 'text',
			  type: 'scatter',
			};
			
			var trace2 = {
			  x: [-0.75, 0.75],
			  y: [0.5,1.5],
			  line: {
				dash: 'solid',
				color: 'rgba(200,0,0,1)',
				width: 4
			  }
			};
			
			var layout = {
			  title: 'Particles',
			  width: 600,
			  height: 600,
			  xaxis: {
				autorange: [0,2],
			  },
			  yaxis: {
				autorange: [0,2]
			  },
			  showlegend: false,
			  shapes: this.shapes
			};
			
			var data = [trace2, trace1];
			Plotly.newPlot('plotOutput', data, layout);
			Plotly.react('plotOutput', [trace2, trace1], layout);
		}
	}
	
	plot = new Plot();
	plot.reset();
</script>

</body>
</html>