Make the SPH diagram interactive

content/30.abstracting_simulation_types.md

@@ -202,10 +202,14 @@ However, with SPH data, the selection methods in 2D and 3D will always include t
 This is somewhat counter to the expectations set by the grid codes, but aligns with the need to have a fully self-contained data-container for computing field values.
 For instance, this means that a "ray" object (often used to compute, for instance, the column density in a cosmological simulation) will in fact include a set of particles within a (potentially) varying impact parameter.
 This can be seen in diagram form in Figure @fig:sph_ray_tracing.
+We note that, as described in the SPLASH method paper [@doi:10.1071/AS07022], the kernel interpolation can be computed using the (dimensionless) ratio between the impact parameter of the ray and the smoothing length of the particle.
+
+<canvas id="sph-ray-figure" style="width:100%;height:100%;min-height: 500px;" hidpi="true"></canvas>
+<script type="text/paperscript" canvas="sph-ray-figure" src="images/sph_ray_tracing.js"></script>
 
 ![
-A cartoon diagram of a ray passing through a collection of particles.  The radius of the particle is indicative of its smoothing length (values should *not* be interpreted to be constant within these circles!).  As can be seen, the individual particles each contribute different amounts as a result of their smoothing length, the chord-length as the ray passes through the circle, and the values within each particle.
-](images/sph_ray_tracing_diagram.svg){#fig:sph_ray_tracing}
+A cartoon diagram of a ray passing through a collection of particles.  The radius of the particle is indicative of its smoothing length.  As can be seen, the individual particles each contribute different amounts as a result of their smoothing length, the chord-length as the ray passes through the circle, and the values within each particle.
+](){#fig:sph_ray_tracing}
 
 Other than these differences, which have been intentionally made to align the results with the expected results from the underlying discretization method, the APIs for access to particle data and finite volume data are identical, and they provide broadly identical functionality, where the disparities are typically in functionality such as volume rendering.
 This allows a single analysis script, or package (such as Trident), to utilize a high-level API to address both gridded and Lagrangian data while still ensuring that the results are high-fidelity and representative of the underlying methods.

content/images/sph_ray_tracing.js

@@ -0,0 +1,81 @@
+var particles = [
+    { cx:65, cy:135, r:50},
+    { cx:150, cy:175, r:35 },
+    { cx:185, cy:130, r:7},
+    { cx:160, cy:115, r:10},
+    { cx:235, cy:90, r:40},
+    { cx:215, cy:30, r:20},
+    { cx:425, cy:45, r:40},
+    { cx:280, cy:140, r:25 },
+    { cx:350, cy:125, r:20 },
+    { cx:410, cy:150, r:30},
+    { cx:330, cy:180, r:35},
+    { cx:255, cy:315, r:55},
+    { cx:475, cy:240, r:60},
+    { cx:650, cy:215, r:85},
+    { cx:570, cy:45, r:45},
+    { cx:705, cy:45, r:35},
+];
+const hitOptions = {
+	segments: true,
+	stroke: true,
+	fill: true,
+	tolerance: 5
+};
+function recalculateIntersections() {
+    for (const particle of particleGroup.children) {
+        if (rayLine.intersects(particle)) {
+            particle.fillColor.gradient.stops = ['red','white'];
+            particle.data.line.lastSegment.point = rayLine.getNearestPoint(particle.position);
+            particle.data.line.strokeColor = 'black';
+        } else {
+            particle.fillColor.gradient.stops = ['black', 'white'];
+            particle.data.line.strokeColor = null;
+        }
+    }
+}
+
+const particleGroup = new Group();
+
+for (i = 0; i< particles.length; i++) {
+    const particle = particles[i];
+    var myCircle = new Path.Circle(new Point(particle.cx, particle.cy), particle.r);
+    myCircle.data.line = new Path.Line(myCircle.position, myCircle.position + new Point(0, particle.r))
+    myCircle.data.line.strokeWidth = 3;
+    myCircle.data.radius = particle.r;
+    myCircle.fillColor = {
+        gradient: {
+            stops: ['black', 'white'],
+        radial: true},
+
+        origin: myCircle.position,
+        destination: myCircle.bounds.rightCenter
+    };
+    particleGroup.addChild(myCircle);
+}
+
+const rayPoints = [new Point(50, 50), new Point(200, 50)];
+const rayLine = new Path.Line(rayPoints[0], rayPoints[1]);
+const rayStart = new Path.Circle(rayPoints[0], 8);
+const rayStop = new Path.Circle(rayPoints[1], 8);
+rayLine.strokeColor = 'darkgray';
+rayLine.strokeWidth = 3;
+rayStart.fillColor = 'red';
+rayStop.fillColor = 'red';
+
+function dragCircle(event) {
+    event.target.position += event.delta;
+    rayLine.firstSegment.point = rayStart.position;
+    rayLine.lastSegment.point = rayStop.position;
+    recalculateIntersections();
+}
+
+rayStart.onMouseDrag = rayStop.onMouseDrag = dragCircle;
+
+function dragLine(event) {
+    event.target.position += event.delta;
+    rayStart.position = rayLine.firstSegment.point;
+    rayStop.position = rayLine.lastSegment.point;
+    recalculateIntersections();
+}
+rayLine.onMouseDrag = dragLine;