Added 3-D plot for implicit circle

cgre-aachen · Jan 12, 2024 · 9f2a459 · 9f2a459
1 parent 5d3abdf
commit 9f2a459
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 0 deletions.
diff --git a/d3j/data_2.json b/d3j/data_2.json
diff --git a/d3j/images/implicit_circle.png b/d3j/images/implicit_circle.png
diff --git a/d3j/implicit_circle.html b/d3j/implicit_circle.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+</head>
+<body>
+
+<div id="plot"></div>
+<input type="range" id="planeSlider" min="0" max="1" step="0.01" value="0.5" style="width: 400px;"/>
+
+<script>
+    let globalData;
+    let initialZ = 0.5; // Initial z-value for the plane
+
+    // Function to create a surface trace
+    function createSurfaceTrace(data, color) {
+        return {
+            x: data.x,
+            y: data.y,
+            z: data.z,
+            type: 'surface',
+            showscale: false,
+            opacity: 0.6,
+            surfacecolor: color
+        };
+    }
+
+    // Function to create a line trace (for the circle)
+    function createLineTrace(data, color) {
+        return {
+            x: data.x,
+            y: data.y,
+            z: data.z,
+            mode: 'lines',
+            line: {
+                color: color,
+                width: 4
+            },
+            type: 'scatter3d'
+        };
+    }
+
+    // Update plane and circle position
+    function updatePlot(newZ) {
+        let updatedPlaneZ = globalData.plane.z.map(row => row.map(() => newZ));
+
+        let updatedPlane = createSurfaceTrace({
+            x: globalData.plane.x,
+            y: globalData.plane.y,
+            z: updatedPlaneZ
+        }, 'orange');
+
+        let r = Math.sqrt(newZ);
+        let theta = Array.from({length: 100}, (_, i) => i * 2 * Math.PI / 99);
+        let updatedCircle = createLineTrace({
+            x: theta.map(t => r * Math.cos(t)),
+            y: theta.map(t => r * Math.sin(t)),
+            z: new Array(100).fill(newZ)
+        }, 'red');
+
+        Plotly.react('plot', [globalData.paraboloidTrace, updatedPlane, updatedCircle], globalData.layout);
+    }
+
+    // Fetch the data and plot
+    fetch('data_2.json').then(response => response.json()).then(data => {
+        globalData = {
+            paraboloidTrace: createSurfaceTrace(data.paraboloid, 'blue'),
+            plane: data.plane,
+            layout: {
+                title: '3D Paraboloid and Plane Intersection',
+                autosize: false,
+                width: 800,
+                height: 800,
+                margin: {
+                    l: 65,
+                    r: 50,
+                    b: 65,
+                    t: 90
+                }
+            }
+        };
+        updatePlot(initialZ);
+    });
+
+    // Event listener for the slider
+    document.getElementById('planeSlider').addEventListener('input', function() {
+        updatePlot(parseFloat(this.value));
+    });
+</script>
+
+</body>
+</html>
diff --git a/d3j/rbf_test.js b/d3j/rbf_test.js
@@ -0,0 +1,31 @@
+var RBF = require('rbf');
+
+var points = [
+  [0, 0],
+  [0, 100]
+];
+
+// values could be vectors of any dimensionality.
+// The computed interpolant function will return values or vectors accordingly.
+var values = [
+  0.0,
+  1.0
+]
+
+// RBF accepts a distance function as a third parameter :
+// either one of the following strings or a custom distance function (defaults to 'linear').
+//
+// - linear: r
+// - cubic: r**3
+// - quintic: r**5
+// - thin-plate: r**2 * log(r)
+// - gaussian: exp(-(r/epsilon) ** 2)
+// - multiquadric: sqrt((r/epsilon) ** 2 + 1)
+// - inverse-multiquadric: 1 / sqrt((r/epsilon) ** 2 + 1)
+//
+// epsilon can be provided as a 4th parameter. Defaults to the average 
+// euclidean distance between points.
+//
+var rbf = RBF(points, values /*, distanceFunction, epsilon */);
+
+console.log(rbf([0, 50])); // => 0.5
diff --git a/index.html b/index.html
@@ -63,6 +63,17 @@ <h1>Structural Geological Modeling: Algorithms and Implementations</h1>
                     </div>
                 </div>
             </div>
+            <div class="tile">
+                <div class="tile-inner">
+                    <div class="tile-front">
+                        Implicit circle
+                    </div>
+                    <div class="tile-back">
+                        <a href="./d3j/implicit_circle.html" class="tile">
+                        <img width=200 src="./d3j/images/implicit_circle.png" alt="Implicit Circle"></a>
+                    </div>
+                </div>
+            </div>
         </div>
     <!-- <script src="script.js"></script> -->
 </body>