jsxgraph rotation courbe avec curseur

[Lionel Verbecq]

Up

0

Down

::

Bonjour,

Je tente de faire un dessin sous jsxgraph avec 2 engrenages qui tournent selon un curseur que l’on déplace.

Mon problème est le suivant : lorsque je déplace le curseur, le dessin ne se rafraichit pas.

Je mets mon code pour que vous puisiez m’aider.

\language{fr}

\format{html}

\computeanswer{no}

\keywords{multiple}

\precision{100000000}

\range{-5..5}

\title{Engrenage jsx}

\integer{m=1}

\real{pas=pi*\m}

\integer{z1=randint(6..20)}

\integer{z2=randint(6..20)}

\real{r1=0.5*\m*\z1}

\real{r2=0.5*\m*\z2}

\real{xc1=-\r1}

\real{xc2=\r2}

\text{dessin=

var board = JXG.JSXGraph.initBoard(‘jsxbox’, {

boundingbox: [-15, 15, 15, -15],

axis: true});

var z1 = \z1;

var z2 = \z2;

var r1 = \r1;

var r2 = \r2;

var xc1 = -\r1;

var xc2 = \r2;

var p1 = board.create(‘point’, [xc1, 0]);

var p2 = board.create(‘point’, [xc2, 0]);

var gear1 = board.create(‘curve’,

[function(t){ return (r1 + 0.5*Math.cos(z1*t))*Math.cos(t) + xc1; },

function(t){ return (r1 + 0.5*Math.cos(z1*t))*Math.sin(t); }],

{strokeWidth:2, strokeColor:’blue’});

var gear2 = board.create(‘curve’,

[function(t){ return (r2 + 0.5*Math.cos(z2*t))*Math.cos(t) + xc2; },

function(t){ return (r2 + 0.5*Math.cos(z2*t))*Math.sin(t); }],

{strokeWidth:2, strokeColor:’red’});

var slider = board.create(‘slider’, [[-14,14], [14,14], [0, 0, 360]], {name: ‘Rotation’});

slider.on(‘drag’, function() {

var angle = slider.Value()*Math.PI / 180;

gear1.updateCurve(() => [

t => (r1 + 0.5*Math.cos(z1*t + angle))*Math.cos(t) + xc1 ,

t => (r1 + 0.5*Math.cos(z1*t + angle))*Math.sin(t)

]);

gear2.updateCurve(() => [

t => (r2 + 0.5*Math.cos(z2*t – angle))*Math.cos(t) + xc2,

t => (r2 + 0.5*Math.cos(z2*t – angle))*Math.sin(t)

]);

board.update();

});

}

\text{image=slib(geo2D/jsxgraph jsxbox board,[250×250, min=250px max=350px left],\dessin)}

\statement{

\image

}

Merci.

Lionel.

[Lionel Verbecq]

Up

0

Down

::

C’est bon, j’ai trouvé et c’est plus simple que je le pensais.

Voici la partie du code corrigée.

\text{dessin=

var board = JXG.JSXGraph.initBoard(‘jsxbox’, {

boundingbox: [-15, 15, 15, -15],

axis: true});

 

var z1 = \z1;

var z2 = \z2;

var r1 = \r1;

var r2 = \r2;

var xc1 = -\r1;

var xc2 = \r2;

 

var p1 = board.create(‘point’, [xc1, 0]);

var p2 = board.create(‘point’, [xc2, 0]);

var slider = board.create(‘slider’, [[-14,14], [14,14], [0, 0, 360]], {name: ‘Rotation’});

var x1=function(t) { return (r1 + 0.5*Math.cos(z1*t + slider.Value()*Math.PI / 180))*Math.cos(t) + xc1 ; } ;

var y1=function(t) { return (r1 + 0.5*Math.cos(z1*t + slider.Value()*Math.PI / 180))*Math.sin(t) ; } ;

var gear1 = board.create(‘curve’, [x1,y1], {strokeWidth:2, strokeColor:’blue’});

var x2=function(t) { return (r2 + 0.5*Math.cos(z2*t – slider.Value()*Math.PI / 180))*Math.cos(t) + xc2 ; } ;

var y2=function(t) { return (r2 + 0.5*Math.cos(z2*t – slider.Value()*Math.PI / 180))*Math.sin(t) ; } ;

var gear2 = board.create(‘curve’, [x2,y2], {strokeWidth:2, strokeColor:’red’});

board.Update();

}

\text{image=slib(geo2D/jsxgraph jsxbox board,[250×250, min=250px max=350px left],\dessin)}

\statement{\image }

Lionel

[eric]

Up

0

Down

::

Bonjour,

merci pour l’exemple ! C’est joli et ça fonctionne bien. Au cas où d’autres voudraient essayer, je signale que j’ai dû changer certains caractères qui n’étaient pas bien reconnus (des apostrophes, le signe – devant slider.Value, et le signe x dans 250×250), juste une histoire d’encodage ou d’éditeur de ce forum.

Éric

• Cette réponse a été modifiée le il y a 1 année et 9 mois par bernadette.

[Auteur]

Messages