functiongraph curve y-overflow when using canvas as renderer

[Rachid Er-rami]

Hi i tried to plot this function sin(e^x) , using canvas as renderer , i saw that in some edges of the curve go beyond the maximum values of this function (see the attached image)  , how can solve this issue , thank you . 

 

[Murray]

Hello Rachid

My attempts to address this didn't work as I hoped. I'll leave the artifacts you mentioned for Alfred to comment on.

I think the bigger issue is the gaps you've got (and the places where it doesn't even reach 1 and -1 in the section x > 8.5).

Here's one approach (which can be optimised, for sure), for a curve like this:

https://jsfiddle.net/mbourne/7faLgzve/

I plotted an ordinary functiongraph for x < 2, then for x > 2 I've plotted curves where the interval between points gets less as we increase the x-value.

This (mostly) produces a solid block as expected in the part of the curve where x > 4.5. I say "mostly" because small tweaks in the width or height of the canvas can still give us small gaps.

I did this hoping the artifacts you're seeing would be reduced (hoping that JSXGraph's plotting algorithm would be happier with more 'accurate' points to plot, but it wasn't the case.)

I also tried fiddling with lineCap (where I hoped 'round" would reduce those sharp peaks, but once again, no. It seems it only affects the beginning and end of a curve, not the joins within.

I also tried messing with  numberPointsHigh, but this didn't seem to have any effect, either.

Anyway, over to Alfred.

Regards

Murray

[Rachid Er-rami]

Hi Murray , 

Thank you for the detailed answer , i tried to spend some time to figure out what is the issue , i build a simple function to draw this function on the canvas without using jsxGraph , i saw that this issue happen with using Context.lineJoin = 'mitter' , fixed it by using Context.lineJoin="round" , i think jsxGraph does not provide an option to chage lineJoin , it only allow to change lineCap right ? here is the images for both method . the gaps are quite understandable since they depends on the step size .

image 1 : using lineJoin = mitter 

image 2  :using lineJoin = round 

Regards .

--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/SPkCpCqvlp4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/jsxgraph/4791a750-8ff2-4cb2-af8f-6eaadebefdf8n%40googlegroups.com.

[Rachid Er-rami]

Hi , 

Here is the version of the plot , by adding this.context.lineJoin = "round" to the renderer  in src/renderer/canvas.js file , hope we can add lineJoin to the geometricElement option , thank you . 

Regards .

[Alfred Wassermann]

Dear Rachid and Murray,

thank you very much for your efforts to analyze this plotting problem.

As a quick solution, in canvas renderer `lineJoin` is now set to 'round' for all curve. This was done in the SVG renderer long time ago. Therefore, the two renderer should behave the same in this regard. I'm not sure if we need a new attribute `lineJoin` at all. So far, 'round' seems to be preferable in all situations. But if you see use cases for 'mitter', we can add an attribute `lineJoin'. We already have the attribute `lineCap` that affects the ends of a line or curve.  It seems that this needs to be adjusted from time to time.

The other problem are the gaps in the plot of such a highly oscillating curve, as Murray remarked. At the moment, we can not do much about this. There seems to be no quick solution without creating other problems in other graphs. If time is permitting it, we will work on these "pathological cases".

Best wishes,

Alfred

[Rachid Er-rami]

Hi Alfred,

Thank you for the update on  adding  round lineJoin  as default in the canvas renderer, i dont see any  specific use cases that might require 'miter' specially for curves .
Happy New Year ,
Best Wishes .
 

--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/SPkCpCqvlp4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/jsxgraph/d74eb83d-57d2-43be-b0a1-6b3c14b2f0b6n%40googlegroups.com.

[Jens Axel Søgaard]

Most general purpose graph plotters will have problems with sin(e^x).
I think you need to compute your set of points on the graph and plot them manually.

Here is what WolframAlpha produces:



If you are interested in algorithms for plotting graphs, take a look at the references
in this discussion:

https://scicomp.stackexchange.com/questions/2377/algorithms-for-adaptive-function-plotting

/Jens Axel

You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/jsxgraph/CALQL-wMnF14V9tet0_933efPXXRPRF1vfn-tE6dAwK%2Bn8cLCGg%40mail.gmail.com.

--

--
Jens Axel Søgaard

[Rachid Er-rami]

Hi Jen , 

Thank you for sharing these resources . 

Best wishes 

To view this discussion visit https://groups.google.com/d/msgid/jsxgraph/CABefVgwxX8yzzxtNo%3D8VyikeX_HBjX5F7AMgD72BLd-qLvw1%2BA%40mail.gmail.com.

[Murray]

(This was still sitting in my inbox.)

Jens - you're right that most plotters struggle to graph y = sin(e^x) so that there aren't any missing values, or incomplete portions.

Here's my proposal for a "near perfect" rendering of the graph.

https://bourne2learn.com/math/jsxgraph/jsxgraph-sin-ex-graph.php

I plot the first part of the graph as normal, then approximate the right-hand portion (after about x = 3.5) with segments. There's no gaps, no unwanted wiggles and it works well. 

You can change stroke width and the visible domain, can highlight the portion that consists of segments, and you can also compare the default JSXGraph rendering.

I know it would be difficult to generalise it, but it would work for things like y = sin(e^5x) with some tweaks, and y = cos(e^x) and various multiples of same.

Regards

Murray

[Murray]

I played some more with this to make it more efficient (a lot fewer data points) and more flexible.

It now handles  y = cos(e^x) and things like  y = sin(e^2.5x), and is responsive to stroke thickness and domain changes.

It now has 4 portions:

1. Default JSXGraph up to a point
2. "Enhanced" curve ensuring all max and min are included, and the curve is smooth in those regions
3. Segments for the portion of the curve where it looks like segments
4. A polygon for the final block of colour

https://bourne2learn.com/math/jsxgraph/jsxgraph-sin-ex-graph.php (you may need to refresh the page to see the update)

The algorithms Jens pointed out are very interesting, but mostly take the approach of trying to find all the special points by zooming in closer and closer. For cases where special points are known in advance, like  y = sin(e^x)  , I feel it's better to start with those special points.

But yes, it could be challenging to incorporate into a general plotter like JSXGraph.

Regards

Murray