<iframe src="https://jsxgraph.org/share/iframe/3d-function-graph-with-tangent-plane-ii" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: 3D function graph with tangent plane II" allowfullscreen ></iframe>
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; "> <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div> </div> <script type = "text/javascript"> /* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'board-0'; var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], axis: false, pan: { enabled: false }, zoom: { enabled: false } }); var box = [-2, 2], view = board.create('view3d', [[-6, -3], [8, 8], [box, box, box]], { xPlaneRear: { visible: false }, yPlaneRear: { visible: false } }); // Define the 3D function graph var F_txt = 'cos(2 * x) * cos(3 * y)'; var F = board.jc.snippet(F_txt, true, 'x,y'); // Partial derivatives, computed symbolically var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)'; var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)'; var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y'); var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y'); // 3D function graph var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 70, stepsV: 70 }); // The two points var Axy = view.create("point3d", [1, 1, -2], { withLabel: false }), A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], { withLabel: false, fixed: true }); view.create("line3d", [Axy, A], { dash: 1 }); // Determine tangent vectors var dFx = () => Fdx(A.X(), A.Y()), dFy = () => Fdy(A.X(), A.Y()), dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2), dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2), dFx1 = () => 1 / dFx_norm(), dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(), dFy1 = () => 1 / dFy_norm(), dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(), dFx_vec = [dFx1, 0, dFx2], dFy_vec = [0, dFy1, dFy2], // Tangent plane plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "red" }), // Tangent vectors of length 1 a = view.create("line3d", [A, dFx_vec, [0, 1]]), b = view.create("line3d", [A, dFy_vec, [0, 1]]); </script>
/* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'your_div_id'; // Insert your id here! var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], axis: false, pan: { enabled: false }, zoom: { enabled: false } }); var box = [-2, 2], view = board.create('view3d', [[-6, -3], [8, 8], [box, box, box]], { xPlaneRear: { visible: false }, yPlaneRear: { visible: false } }); // Define the 3D function graph var F_txt = 'cos(2 * x) * cos(3 * y)'; var F = board.jc.snippet(F_txt, true, 'x,y'); // Partial derivatives, computed symbolically var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)'; var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)'; var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y'); var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y'); // 3D function graph var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 70, stepsV: 70 }); // The two points var Axy = view.create("point3d", [1, 1, -2], { withLabel: false }), A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], { withLabel: false, fixed: true }); view.create("line3d", [Axy, A], { dash: 1 }); // Determine tangent vectors var dFx = () => Fdx(A.X(), A.Y()), dFy = () => Fdy(A.X(), A.Y()), dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2), dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2), dFx1 = () => 1 / dFx_norm(), dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(), dFy1 = () => 1 / dFy_norm(), dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(), dFx_vec = [dFx1, 0, dFx2], dFy_vec = [0, dFy1, dFy2], // Tangent plane plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "red" }), // Tangent vectors of length 1 a = view.create("line3d", [A, dFx_vec, [0, 1]]), b = view.create("line3d", [A, dFy_vec, [0, 1]]);
<jsxgraph width="100%" aspect-ratio="1 / 1" title="3D function graph with tangent plane II" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false"> /* This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], axis: false, pan: { enabled: false }, zoom: { enabled: false } }); var box = [-2, 2], view = board.create('view3d', [[-6, -3], [8, 8], [box, box, box]], { xPlaneRear: { visible: false }, yPlaneRear: { visible: false } }); // Define the 3D function graph var F_txt = 'cos(2 * x) * cos(3 * y)'; var F = board.jc.snippet(F_txt, true, 'x,y'); // Partial derivatives, computed symbolically var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)'; var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)'; var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y'); var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y'); // 3D function graph var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 70, stepsV: 70 }); // The two points var Axy = view.create("point3d", [1, 1, -2], { withLabel: false }), A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], { withLabel: false, fixed: true }); view.create("line3d", [Axy, A], { dash: 1 }); // Determine tangent vectors var dFx = () => Fdx(A.X(), A.Y()), dFy = () => Fdy(A.X(), A.Y()), dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2), dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2), dFx1 = () => 1 / dFx_norm(), dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(), dFy1 = () => 1 / dFy_norm(), dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(), dFx_vec = [dFx1, 0, dFx2], dFy_vec = [0, dFy1, dFy2], // Tangent plane plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "red" }), // Tangent vectors of length 1 a = view.create("line3d", [A, dFx_vec, [0, 1]]), b = view.create("line3d", [A, dFy_vec, [0, 1]]); </jsxgraph>
// Define the id of your board in BOARDID var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], axis: false, pan: { enabled: false }, zoom: { enabled: false } }); var box = [-2, 2], view = board.create('view3d', [[-6, -3], [8, 8], [box, box, box]], { xPlaneRear: { visible: false }, yPlaneRear: { visible: false } }); // Define the 3D function graph var F_txt = 'cos(2 * x) * cos(3 * y)'; var F = board.jc.snippet(F_txt, true, 'x,y'); // Partial derivatives, computed symbolically var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)'; var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)'; var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y'); var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y'); // 3D function graph var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 70, stepsV: 70 }); // The two points var Axy = view.create("point3d", [1, 1, -2], { withLabel: false }), A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], { withLabel: false, fixed: true }); view.create("line3d", [Axy, A], { dash: 1 }); // Determine tangent vectors var dFx = () => Fdx(A.X(), A.Y()), dFy = () => Fdy(A.X(), A.Y()), dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2), dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2), dFx1 = () => 1 / dFx_norm(), dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(), dFy1 = () => 1 / dFy_norm(), dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(), dFx_vec = [dFx1, 0, dFx2], dFy_vec = [0, dFy1, dFy2], // Tangent plane plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "red" }), // Tangent vectors of length 1 a = view.create("line3d", [A, dFx_vec, [0, 1]]), b = view.create("line3d", [A, dFy_vec, [0, 1]]);
This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.