Level lines in 3d using implicitcurve

by Javier Puértolas

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<h2>
Level lines in 3d
</h2>
<p>
This templates demonstrates the usage of implict curves to compute level lines.
</p>
<p>

<strong>Usage: </strong><br/>

f(x,y)=... Enter a function and click in plot <br/>
c= ... Enter value for \(f(x,y)=c\) <br/>
To show or update the level line, click on "set level"
</p>
<p>
Internal variables:<br/>
<code>cimp</code>: curve to hold \(M=\{(x,y)\in\mathbb{R}^2:f(x,y)=c\}\)<br/>
<code>c3d</code>: curve in xy-plane on \(z_{min}\)<br/>
<code>c3d1</code>: curve in xy-plane on the graph of \(f\)<br/>
</p>

During generating <code>c3d</code> and <code>c3d1</code> it is checked, that the points will be in the box of the <code>view3d</code> object.

<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

CSS

body {
  font-family: sans-serif;
}

JavaScript

JXG.Options.text.useMathJax = true;

var board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-8, 8, 8, -10],
  keepaspectratio: false,
  axis: false
});
var box = [-2, 2];
var view = board.create('view3d',
  [
    [-6, -6],
    [8, 8],
    [box, box, box]
  ], {
    xPlaneRear: {
      visible: false
    },
    xPlaneRearYAxis: {
      visible: false
    },
    xPlaneRearZAxis: {
      visible: false
    },
    yPlaneRear: {
      visible: false
    },
    yPlaneRearXAxis: {
      visible: false
    },
    yPlaneRearZAxis: {
      visible: false
    },
  });
//slider-based curve
var xlabel = view.create(
  "point3d",
  [0.9 * box[1], 0, 0.6 * box[0] + 0.4 * box[1]], {
    size: 0,
    name: "x"
  }
);
var Ylabel = view.create(
  "point3d",
  [0, 0.9 * box[1], 0.6 * box[0] + 0.4 * box[1]], {
    size: 0,
    name: "y"
  }
);
var Zlabel = view.create(
  "point3d",
  [
    0.7 * (0.6 * box[0] + 0.4 * box[1]),
    0.7 * (0.6 * box[0] + 0.4 * box[1]),
    0.9 * box[1],
  ], {
    size: 0,
    name: "z"
  }
);
board.renderer.container.style.backgroundColor = '#f9f9fb';


// set variable names
var F, txtFx, txtFy, cl, c, cimp, c3d, c3d1;
var inputFun = board.create("input", [-5, 7,
  "sin(2*x)*cos(2*y)"
  //"x^2+y^2"
  , "\\(f(x,y)=\\)"
], {
  cssStyle: "width: 100px",
});
var inputPlot = board.create("button", [0.5, 7, "Plot", function() {
  plot();
}], {
  cssStyle: "width: 50px",
});
var inputLevelTxt = board.create("input", [3, 7, "0.5", "\\(c=\\)"], {
  cssStyle: "width: 25px",
});
var inputLevel = board.create("button", [5, 7, "set level", () => {
  plotContourLine();
}], {
  cssStyle: "width: 70px",
});

/* object to hold the implicit curve of a level set*/
cimp = board.create('curve', [
  [],
  []
]);
/* hold the countour line in xy-plane*/
c3d = view.create('curve3d', [
  [],
  [],
  []
], {
  strokeWidth: 3
});
/* hold the countour line on graph */
c3d1 = view.create('curve3d', [
  [],
  [],
  []
], {
  strokeWidth: 3
});
c3d.updateDataArray =...