Surface with level lines and projection

[Cyrille Piatecki]

I wonder if it is possible to construct the surface of a function say f(x,y) = X^.5* Y^.5 with some level curves and their projection on the (X, Y) plan.

[jouer...@gmail.com]

I would also be very interested. When I wanted to build that figure a while ago jsxgraph didn't include the 3D tools yet. I made it using PlotLy. It works very well, is interactive and can be combined with jsxgraph figures.

 

Being able to do it all inside jsxgraph would be much better, but when I've tried to get into 3D I haven't had much success.

Anyway, Cyrille, if you are interested in PlotLy code you can contact me. We have been using jsxgraph with figures for Microeconomics for some time.

Javier

[Tom Berend]

I tried this in JSXGraph.  It doesn't look quite right, but my math is terrible, and I probably misunderstood the problem.   Run the slider to move the curve along the surface.

The only problem I ran into is that curve3D bounds the X values, but not the Y or Z values.  Without a bound on the Y, the curves extend towards infinity as they approach x=0.

Here's the code.  I built it in TypeScript because lots of brackets and commas, and JavaScript is a bit fiddly.  Easy to convert to standard JSXGraph.  

You can run this with copy-and-paste at   https://communityreading.org/jsxgraph/playground/  (use a computer, not a tablet).

If you fix this up, please post the correction so I can learn.

Short but intense rainfall and tornado warnings around Toronto today.

Tom

TSX.setBoundingBox(-5, 5, 5, -5)

TSX.addAxis()

let box = [-5, 5];

let view = TSX.view3D(-6, -3, 8, 8, box, box, [0, 5],

{

xPlaneRear: { visible: false },

yPlaneRear: { visible: false },

});

// Function F to be plotted

let F = (x: number, y: number) => Math.pow(x, .5) + Math.pow(y, .5);

// 3D surface

let s = view.functiongraph3D(

F,

box,

box,

{

strokeWidth: 0.5,

stepsU: 70,

stepsV: 70

})

let sliderZ = TSX.slider([-4.5, 4.5], [-1, 4.5], [0, 2, 10], { name: 'Z' })

// some level curves at z=0

let curves = [1, 3, 5, 7, 9, 11]

curves.forEach((n: number) => {

view.curve3D(

(x: number) => n * Math.pow(x, .5) / Math.pow(x, 2),

(y: number) => y,

(z: number) => 0,

[0, 5],

{ strokeColor: 'black' })

})

// finally the curve on the surface

view.curve3D(

(x: number) => sliderZ.Value() * Math.pow(x, .5) / Math.pow(x, 2),

(y: number) => y,

(z: number) => Math.pow(sliderZ.Value(), .5) ,

[0, 5],

{ strokeColor: 'red', strokeWidth: 3 })

[Murray]

Tom

Each time I go to your sandbox examples, I'm met with a blank screen for a considerable time. Usually the content eventually loads, but it's after a very long wait.

So I dug around to see what's happening. All the JSXGraph content loads in under a second, but the bundle.app.js script, which is about 13 MB, takes around 17 s to load.

I tested the page on GTMetrix (it timed out before returning any useful information) and WebPageTest which gave up at 49 seconds, so it also didn't yield much.

I notice the top of that bundle.app.js script has the following:

* ATTENTION: An "eval-source-map" devtool has been used. * This devtool is neither made for production nor for readable output files.

Could I suggest trying out the production version and see how it performs?

Regards

Murray

[Tom Berend]

Thank you !!

The bulk of the loading is the Monaco Editor (the engine for VS Code).    'Eval-source-file' is a webpack option, I have removed it.   My 'clear cache and reload' time has dropped from 10 seconds to 3 seconds, so something has changed.

GTMetrix still refuses to load it.  I will continue to investigate and improve as best I can.

Thank you again1!

[Wigand Rathmann]

Dear Cyrille,

thank for this question!

JSXGraph has in 2d the 'implicitcurve'. This can be used, to generate the level lines in a similar way Alfred suggested to construct the filling of set bounded by curves.

The fiddle is here:  https://jsfiddle.net/WigandR/efdk5sqb/

Unfortunatly I just observered, that it does not work yet for your specific function x^(1/2)*y ^(1/2) using the symbolic features of JSXGraph.

Regards,

Wigand

[Wigand Rathmann]

There is new fiddle demonstrating the usage of implicit lines to construct contourlines at graph or in plane.

https://jsfiddle.net/WigandR/re9jg1wa/1/

Enjoy!

Wigand