point disappearing after setPosition

[Umed Maru]

Hello,

I am relatively new to coding and am creating an interactive portion of my webpage where a point moves on a sine wave when the user rotates around the circle.

Here's an image:

for some reason, when I drag the point on the circle, the circle on the sine wave disappears.

Here's my code:

the console is reading correct coordinates, but the second board still doesn't show the point wg.

Is there a reason why? Am I even doing this in the most elegant way?

Thanks

[Tom Berend]

replace wg.setPosition() with...

wg.setPositionDirectly(JXG.COORDS_BY_USER,[x,y])

Also, probably want to set circleWave's boundingbox to [0,1.5, 2*Math.PI,-1.5]

[Alfred Wassermann]

As far as I can see, this is a mathematical problem:

The angle runs from 0 to 2, but the function graph is defined in the interval [-, ].

If you insist on the function graph being defined in that interval, the angle has to be transformed accordingly.

I set up a jsfiddle with a solution: https://jsfiddle.net/gap8fsy2/1/

There, I also exploited the dynamic nature of JSXGraph: the position of the point wg can be defined by functions

which calculate x-, and y-coordinates and the two boards can be connected with circle.addChild(circleWave):

Here is the code:

const circle = JXG.JSXGraph.initBoard('circle', {
    boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true
});
const circleWave = JXG.JSXGraph.initBoard('wave', {
    boundingbox: [-Math.PI, 1.5, Math.PI, -1.5], axis:true, keepAspectRatio: true
});

var cp, c1, cg, cs, angleStart, ca,
    cWave, wg;
 
cp = circle.create('point', [0, 0], {name: '', fixed: true});
c1 = circle.create('circle', [cp, 1]);
cg = circle.create('glider', [0.5, 1, c1]);
cs = circle.create('segment', [cp, cg]);
angleStart = circle.create('point', [1, 0], {fixed: true, visible: false});
ca = circle.create('angle', [angleStart, cp, cg], {
name: () => JXG.toFixed(JXG.Math.Geometry.rad(angleStart, cp, cg), 2)
});

cWave = circleWave.create('functiongraph', (x) => Math.sin(x));
// Determine the position of wg dynmically from angle ca.
wg = circleWave.create('point', [
  function() {
  var alpha = ca.Value();
    // Transform the angle to [-pi, pi]
    return (alpha > Math.PI) ? (alpha - 2 * Math.PI) : alpha;
  },
() => Math.sin(ca.Value())
]);

// Update circleWave if circle is updated
circle.addChild(circleWave);

Best wishes,

Alfred

[Alfred Wassermann]

The same answer again with symbol π:

As far as I can see, this is a mathematical problem:

The angle runs from 0 to 2π, but the function graph is defined in the interval [-π, π].

[Tom Berend]

in the `cg.on()` function, use the following instead:

wg.setPositionDirectly(JXG.COORDS_BY_USER,[x,y])

--
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 on the web visit https://groups.google.com/d/msgid/jsxgraph/1cdc3eff-7b9a-494d-b208-8c13caeadbdan%40googlegroups.com.