sdf_sphere_plot.html

<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://interactivecomputergraphics.github.io/physics-simulation/examples/style.css">
	<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" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
	<title>Signed Distance Function - Sphere</title>
</head>
<body>

<header class="page-header">
	<h1>Signed Distance Function - Sphere</h1>
</header>	

<main>
	<!-- Simulation panel: canvas + controls -->
	<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
		<col width="75%"> 
		<col width="25%"> 
		<tr>
			<td>
				<div class="card sim-panel">
					<div class="sim-canvas-wrap">
						<canvas id="simCanvas" width="1024" height="960" style="border:2px solid #000000;border-radius: 20px;background-color:#EEEEEE">Your browser does not support the HTML5 canvas tag.</canvas>
					</div>
				</div>
			</td>
			<td>
				<div class="controls-panel">
					<h3>Controls</h3>
					<div class="controls-grid">
						<label>Distance</label>
						<span id="distance">0</span>
					
						<label for="radiusInput">Radius</label>
						<input onchange="gui.sim.radius=parseFloat(value); gui.update()" id="radiusInput" type="number" value="5.0" step="0.1">
				</div>
			</td>
		</tr>
	</table>

	<!-- Theory section -->
	<div class="card theory">
			<h2>Signed distance function of a sphere:</h2>
				The signed distance function of a sphere with radius $r$ is defined as:
				$$\Phi(\mathbf{x}) = \| \mathbf{x} - \mathbf{x}_{\text{sphere}} \| - r.$$
				In the example $\mathbf x$ is the red point, $\mathbf{x}_{\text{sphere}}$ the blue point and the closest point to $\mathbf x$ on the surface of the sphere is rendered in yellow.
				
			<h3>Surface normal vector</h3>
			
			The normal vector is defined by the gradient of the signed distance function: 
			$$\mathbf n = \frac{\partial \Phi(\mathbf{x})}{\partial \mathbf x} = \frac{\mathbf{x} - \mathbf{x}_{\text{sphere}}}{\| \mathbf{x} - \mathbf{x}_{\text{sphere}}\|}. $$
			
			<h3>Closest point on the surface</h3>
			The closest point $\mathbf s$ on the surface of the sphere (yellow) can be determined by starting at the point $\mathbf x$ (red) and going by the signed distance in the direction of the negative normal vector: 
			$$\mathbf s = \mathbf x - \Phi(\mathbf{x}) \mathbf n.$$
	</div>	
	
</main>

<script id="simulation_code" type="text/javascript">
	class Simulation
	{
		constructor()
		{
			this.radius = 5;
			this.x = this.radius+1;
			this.y = 0.0;
			this.cx = 0.0;
			this.cy = 0.0;
			this.nx = 0.0;
			this.ny = 0.0;
			this.sx = 0.0;
			this.sy = 0.0;
			this.distance = 0.0;
		}
		
		signedDistanceFct()
		{
			let dx = this.x - this.cx;
			let dy = this.y - this.cy;
			return Math.sqrt(dx*dx + dy*dy) - this.radius;
		}
		
		// simulation step
		simulationStep()
		{	
			// compute signed distance and normal
			this.distance = this.signedDistanceFct();
			this.nx = 0.0; 
			this.ny = 0.0;
			if (Math.abs(this.distance) > 0.001)
			{
				let dx = this.x - this.cx;
				let dy = this.y - this.cy;
				let dl = Math.sqrt(dx*dx+dy*dy);
				this.nx = dx / dl; 
				this.ny = dy / dl;
			}

			// compute closest point on surface
			this.sx = this.x - this.distance * this.nx;
			this.sy = this.y - this.distance * this.ny;
		}
	}
	
	class GUI
	{
		constructor()
		{
			this.canvas = document.getElementById("simCanvas");
			this.c = this.canvas.getContext("2d");
			this.requestID = -1;
			
			this.origin = { x : this.canvas.width / 2, y : this.canvas.height/2};
			this.zoom = 30;
			this.particleRadius = 0.25;
			this.selected = 0;
			
			// register mouse event listeners (zoom/selection)
			this.canvas.addEventListener("mousedown", this.mouseDown.bind(this), false);
			this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
			this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);	
			this.canvas.addEventListener("wheel", this.wheel.bind(this), false);		
			// register touch event listeners (mobile / tablet)
			// passive:false is required so we can call preventDefault() to suppress scrolling
			this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
			this.canvas.addEventListener("touchmove",  this.touchMove.bind(this),  { passive: false });
			this.canvas.addEventListener("touchend",   this.touchEnd.bind(this),   { passive: false });
		}
		
		// update GUI
		update()
		{
			window.cancelAnimationFrame(this.requestID);
			if (this.sim == undefined)
				this.sim = new Simulation();
						
			this.sim.radius = parseFloat(document.getElementById('radiusInput').value);
			
			this.mainLoop();
		}
		
		draw()
		{
			this.c.clearRect(0, 0, this.canvas.width, this.canvas.height);
				
			//let imgData = this.c.createImageData(this.canvas.width, this.canvas.height);
			let imgData = this.c.getImageData(0, 0, this.canvas.width, this.canvas.height);
			const data = imgData.data;
			for(let py = 0; py < imgData.height; py++)
			{
				for(let px = 0; px < imgData.width; px++)
				{
					let x = (px - this.origin.x ) / this.zoom;
					let y = (py - this.origin.y ) / this.zoom;
					let dx = x - this.sim.cx;
					let dy = y + this.sim.cy;
					let d = Math.sqrt(dx*dx + dy*dy) - this.sim.radius;
					if (d < 0.0)
					{
						imgData.data[4 * (py * imgData.width + px)] = 0; 
						imgData.data[4 * (py * imgData.width + px) + 1] = 0; 
						imgData.data[4 * (py * imgData.width + px) + 2] = Math.floor(255*(1.0 + d/this.sim.radius)); 	
					}
					else
					{
						imgData.data[4 * (py * imgData.width + px) + 1] = Math.floor(255*(1.0 - d/this.sim.radius));
					}
					imgData.data[4 * (py * imgData.width + px) + 3] = 255; 
				}
			}
			this.c.putImageData(imgData, 0, 0);
			
			// draw c
			let r = this.particleRadius;
			this.c.strokeStyle = "#000000";
			this.c.lineWidth = 2;
			this.c.fillStyle = "#0033BB";	
			let px = this.origin.x + this.sim.cx * this.zoom;
			let py = this.origin.y - this.sim.cy * this.zoom;
			
			this.c.beginPath();			
			this.c.arc(px, py, r * this.zoom, 0, Math.PI*2, true); 
			this.c.closePath();
			this.c.fill();
			this.c.stroke();
			
			// draw circle with radius
			this.c.strokeStyle = "#FF0000";
			this.c.lineWidth = 3;
			this.c.beginPath();			
			this.c.arc(px, py, this.sim.radius * this.zoom, 0, Math.PI*2, false); 
			this.c.closePath();
			this.c.stroke();
			
			// draw sx
			this.c.fillStyle = "#FFCC00";	
			this.c.strokeStyle = "#000000";
			this.c.lineWidth = 2;
			px = this.origin.x + this.sim.sx * this.zoom;
			py = this.origin.y - this.sim.sy * this.zoom;
			
			let p2x = this.origin.x + (this.sim.sx + 3*this.sim.nx) * this.zoom;
			let p2y = this.origin.y - (this.sim.sy + 3*this.sim.ny) * this.zoom;
			this.c.beginPath();			
			this.c.moveTo(px, py); 
			this.c.lineTo(p2x, p2y);
			this.c.stroke();
			
			this.c.beginPath();			
			this.c.arc(px, py, r * this.zoom, 0, Math.PI*2, true); 
			this.c.closePath();
			this.c.fill();
			this.c.stroke();
			
			// draw x
			this.c.fillStyle = "#FF0000";	
			px = this.origin.x + this.sim.x * this.zoom;
			py = this.origin.y - this.sim.y * this.zoom;
			
			this.c.beginPath();			
			this.c.arc(px, py, r * this.zoom, 0, Math.PI*2, true); 
			this.c.closePath();
			this.c.fill();
			this.c.stroke();
		}
		
		mainLoop()
		{
			this.sim.simulationStep();			
			document.getElementById("distance").innerHTML = this.sim.distance.toFixed(2);	
			this.draw();
		}
		
		doPause()
		{
			this.pause = !this.pause;
			if (!this.pause)
				this.mainLoop();
		}
		
		mouseDown(event)
		{
			// left mouse button down
			if (event.which == 1)
			{
				let mousePos = this.getMousePos(this.canvas, event);
				let px = this.origin.x + this.sim.x * this.zoom;
				let py = this.origin.y - this.sim.y * this.zoom;
				let pcx = this.origin.x + this.sim.cx * this.zoom;
				let pcy = this.origin.y - this.sim.cy * this.zoom;
				let dx = px - mousePos.x;
				let dy = py - mousePos.y;
				let dcx = pcx - mousePos.x;
				let dcy = pcy - mousePos.y;
				let dist1 = Math.sqrt(dx * dx + dy * dy);
				if (dist1 < 50)
				{
					this.selected = 1;
					return;
				}
				let dist2 = Math.sqrt(dcx * dcx + dcy * dcy);
				if (dist2 < 50)
					this.selected = 2;
				else
					this.selected = 0;
			}
		}
		
		getMousePos(canvas, event) 
		{
			const rect   = canvas.getBoundingClientRect();
			const scaleX = canvas.width  / rect.width;   // buffer / displayed size
			const scaleY = canvas.height / rect.height;
			return {
				x: (event.clientX - rect.left) * scaleX,
				y: (event.clientY - rect.top)  * scaleY
			};
		}
	
		mouseMove(event)
		{
			let mousePos = this.getMousePos(this.canvas, event);		
			if (this.selected == 1)
			{
				this.sim.x = (mousePos.x - this.origin.x) / this.zoom;
				this.sim.y = -(mousePos.y - this.origin.y) / this.zoom;
				this.requestID = window.requestAnimationFrame(this.mainLoop.bind(this));		
			}
			else if (this.selected == 2)
			{
				this.sim.cx = (mousePos.x - this.origin.x) / this.zoom;
				this.sim.cy = -(mousePos.y - this.origin.y) / this.zoom;
				this.requestID = window.requestAnimationFrame(this.mainLoop.bind(this));		
			}
		}
		
		mouseUp(event) 
		{
			this.selected = 0;
		}
		
		wheel(event)
		{
			event.preventDefault();
			this.zoom += event.deltaY * -0.05;
			if (this.zoom < 1) 
				this.zoom = 1;
		}

		// Convert the first touch point to a plain {clientX, clientY} object
		// so it can be passed directly to the existing mouse handlers.
		getTouchClient(event)
		{
			const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
			return { clientX: t.clientX, clientY: t.clientY };
		}

		touchStart(event)
		{
			event.preventDefault();
			if (event.touches.length === 1)
				this.mouseDown({ which: 1, ...this.getTouchClient(event) });
			else if (event.touches.length === 2)
				this.lastPinchDist = this.getPinchDist(event);
		}

		touchMove(event)
		{
			event.preventDefault();
			if (event.touches.length === 1)
			{
				this.lastPinchDist = null;
				this.mouseMove(this.getTouchClient(event));
			}
			else if (event.touches.length === 2)
			{
				// deselect any dragged particle while pinching
				this.selected = -1;
				const dist = this.getPinchDist(event);
				if (this.lastPinchDist !== null)
				{
					this.zoom += (dist - this.lastPinchDist) * 0.3;
					if (this.zoom < 1) this.zoom = 1;
				}
				this.lastPinchDist = dist;
			}
		}

		touchEnd(event)
		{
			event.preventDefault();
			if (event.touches.length < 2)
				this.lastPinchDist = null;
			if (event.touches.length === 0)
				this.mouseUp(event);
		}

		getPinchDist(event)
		{
			const dx = event.touches[0].clientX - event.touches[1].clientX;
			const dy = event.touches[0].clientY - event.touches[1].clientY;
			return Math.sqrt(dx*dx + dy*dy);
		}
	}
	
	gui = new GUI();
	gui.update();
</script>

</body>
</html>