Longueur d'un arc de courbe |
<div id='box4a' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var brdac = JXG.JSXGraph.initBoard('box4a', {axis:true, boundingbox: [-8, 6, 8, -2], showCopyright:false});
var nac = brdac.create('slider',[[1,3],[6,3],[1,10,70]],{name:'n',snapWidth:1});
var fg = function(x){ return 0.2*x*x+2.0*Math.sin(x); }
var plot = brdac.create('functiongraph',[fg], {strokeWidth:1,strokeOpacity:0.3});
var start = -3.0;
var end = 5.0;
var sc = brdac.create('curve',[[0],[0]],{dash:1,strokeWidth:1,strokeColor:'red'});
sc.updateDataArray = function() {
var i;
var m = nac.Value();
var d = (end-start)/m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = fg(start);
for (var i=1;i<=m;i++) {
this.dataX.push(start+i*d);
this.dataY.push(fg(start+(i-1)*d));
this.dataX.push(start+i*d);
this.dataY.push(fg(start+i*d));
}
}
var approx = brdac.create('curve',[[0],[0]], {strokeColor:'red'});
approx.updateDataArray = function() {
var i;
var m = nac.Value();
var d = (end-start)/m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = fg(start);
for (var i=1;i<=m;i++) {
this.dataX.push(start+i*d);
this.dataY.push(fg(start+i*d));
}
}
brdac.create('text',[-6,-1,function(){
var i,s,f0,f1;
var m = nac.Value();
var d = (end-start)/m;
s = 0.0;
f0 = fg(start);
for (var i=1;i<=m;i++) {
f1 = fg(start+i*d);
s += Math.sqrt(d*d+(f1-f0)*(f1-f0));
f0 = f1;
}
return 'Longueur ='+s.toFixed(4); }]);
brdac.update();
</script>
|
Grapheur (tangente, dérivée) |
<form style="width:100%;margin:auto;padding:10px;text-align:center;">
<input type="text" id="input" value="sin(x)*x">
<input type="button" value="Tracer" onClick="plotter()">
<input type="button" value="Effacer" onClick="clearAll()">
<input type="button" value="Tangente" onClick="addTangent()">
<input type="button" value="Dérivée" onClick="addDerivative()">
</form>
<div id='jxgboxpl' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgboxpl', {boundingbox:[-5,8,8,-5], axis:true, showCopyright:false});
var f, curve; // global objects
function plotter() {
var txtraw = document.getElementById('input').value;
f = board.jc.snippet(txtraw, true, 'x', true);
curve = board.create('functiongraph',[f,
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);
return c.usrCoords[1];
},
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);
return c.usrCoords[1];
}
],{name:txtraw, withLabel:true});
var q = board.create('glider', [2, 1, curve], {withLabel:false});
var t = board.create('text', [
function(){ return q.X()+0.1; },
function(){ return q.Y()+0.1; },
function(){ return "f '(" + q.X().toFixed(2) + ")=" + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2); }
],
{fontSize:15});
}
function clearAll() {
JXG.JSXGraph.freeBoard(board);
board = JXG.JSXGraph.initBoard('jxgboxpl', {boundingbox:[-5,8,8,-5], axis:true, showCopyright:false});
f = null;
curve = null;
}
function addTangent() {
if (JXG.isFunction(f)) {
board.suspendUpdate();
var p = board.create('glider',[1,0,curve], {name:'drag me'});
board.create('tangent',[p], {name:'drag me'});
board.unsuspendUpdate();
}
}
function addDerivative() {
if (JXG.isFunction(f)) {
board.create('functiongraph',[JXG.Math.Numerics.D(f),
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);
return c.usrCoords[1];
},
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);
return c.usrCoords[1];
}], {dash:2});
}
}
</script>
|
Méthode des rectangles/trapèzes |
<form style="width:100%;margin:auto;padding:10px;text-align:center;">Riemann sum type: <select id="sumtype" onChange="brd.update()">
<option value='left' selected> left
<option value='right'> right
<option value='middle'> middle
<option value='trapezoidal'> trapezoidal
<option value='simpson'> simpson
<option value='lower'> lower
<option value='upper'> upper
</select>
</form>
<div id='boxrecta' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta', {axis:true, boundingbox:[-2,40,8,-5], showCopyright:false});
var s11 = brdre.create('slider',[[-1,30],[2,30],[3,50,500]],{name:'n',snapWidth:1});
var a11 = brdre.create('slider',[[-1,20],[2,20],[-10,0,0]],{name:'start'});
var br = brdre.create('slider',[[-1,10],[2,10],[0,6,10]],{name:'end'});
var fo = function(x){ return x*x; };
var plot1 = brdre.create('functiongraph',[fo,function(){return a11.Value();}, function(){return br.Value();}]);
var os = brdre.create('riemannsum',[fo,
function(){ return s11.Value();}, function(){ return document.getElementById('sumtype').value;},
function(){return a11.Value();},
function(){return br.Value();}
],
{fillColor:'#ffff00', fillOpacity:0.3});
brdre.create('text',
[1,35,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(fo,s11.Value(),document.getElementById('sumtype').value,a11.Value(),br.Value())).toFixed(4); }]);
</script>
|
Puissance de x |
<div id='boxp' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brd1 = JXG.JSXGraph.initBoard('boxp', {axis:true, boundingbox:[-0.25,1.7,1.25,-0.5], showCopyright:false});
brd1.suspendUpdate();
var n = brd1.create('slider',[[0.1,1.5],[1.1,1.5],[1,1,100]],{name:'n',snapWidth:1});
var fu = function(x){ return Math.pow(x,n.Value()); }
var plot = brd1.create('functiongraph',[fu,0,1], {strokeWidth:2});
brd1.createElement('text',[0.2,0.7,function(){return 'f'+Math.floor(n.Value())+'(x)=x'+Math.floor(n.Value())+'';}],
{fontSize:20});
brd1.unsuspendUpdate();
</script>
|
Série entière du sinus |
<div id='jxgbox1s' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var board1s = JXG.JSXGraph.initBoard('jxgbox1s', {axis:true, boundingbox: [-6, 3, 8, -3], showCopyright:false});
board1s.suspendUpdate();
board1s.create('functiongraph', [function(t){ return Math.sin(t); },-10, 10],{strokeColor: "#cccccc"});
var s1 = board1s.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'S',snapWidth:1});
board1s.create('functiongraph', [
function(t) {
var val = 0, i, sv = s1.Value()+1;
for(i = 0; i < sv; i++) {
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / JXG.Math.factorial(2*i+1);
}
return val;
},
-10, 10], {strokeColor: "#bb0000"});
board1s.unsuspendUpdate();
</script>
|
Série entière du cosinus |
<div id='jxgbox2c' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
board2c = JXG.JSXGraph.initBoard('jxgbox2c', {axis:true, boundingbox: [-6, 3, 8, -3], showCopyright:false});
board2c.suspendUpdate();
board2c.create('functiongraph', [function(t){ return Math.cos(t); }, -10, 10],{strokeColor: "#cccccc"});
var s2c = board2c.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'T',snapWidth:1});
board2c.create('functiongraph', [
function(t) {
var val = 0, i, sv = s2c.Value()+1;
for(i = 0; i < sv; i++) {
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / JXG.Math.factorial(2*i);
}
return val;
},
-10, 10],{strokeColor: "#009900"});
board2c.unsuspendUpdate();
</script>
|
Série entière de l'exponentielle |
<div id='jxgbox1e' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
board1e = JXG.JSXGraph.initBoard('jxgbox1e', {boundingbox: [-6, 25, 6, -15], axis: true, showCopyright:false});
board1e.suspendUpdate();
board1e.create('functiongraph',
[function(t){ return Math.exp(t); },-10, 10],
{strokeColor: "#cccccc"});
var se = board1e.create('slider', [[0.75,-2],[5,-2.0],[0,0,15]], {name:'S',snapWidth:1});
board1e.create('text',[-4,10, function() {
return 'n='+se.Value();
}
]);
board1e.create('text',[-4,8, function() {
var val = 0, i, sv = se.Value()+1;
for(i = 0; i < sv; i++) {
val+= 1.0/JXG.Math.factorial(i);
}
return 'e~'+(val).toFixed(10);
}
]);
board1e.create('functiongraph', [
function(t) {
var val = 0, i, sv = se.Value()+1;
for(i = 0; i < sv; i++) {
val+= Math.pow(t,i)/JXG.Math.factorial(i);
}
return val;
},
-10, 10], {strokeColor: "#bb0000", curveType:'plot'});
board1e.unsuspendUpdate();
</script>
|
Aire sous une courbe |
<div id="d45d7188" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:20px;"></div>
<script type="text/javascript">
(function(){
var intex1_board = JXG.JSXGraph.initBoard('d45d7188', {boundingbox: [-5, 5, 5, -1.01], showcopyright: false, axes:false, shownavigation: false,grid:true});
var absAxe = intex1_board.create('arrow',[ [-5,0],[5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex1_board.create('arrow',[ [0,-1],[0,5] ], {strokeColor: 'black',fixed:true});
var intex1_c1 = intex1_board.create('functiongraph', [function (t) { return Math.exp(t)*0.3+1; }]);
var intex1_i1 = intex1_board.create('integral', [[-2.0, 2.0], intex1_c1],{withLabel: false,fixed:true});
intex1_i1.curveLeft.setProperty({visible:false});
intex1_i1.curveRight.setProperty({visible:false});
var pa = intex1_board.create('point',[function (){ return intex1_i1.baseLeft.X() },0],{name:'a',size:3});
var pb = intex1_board.create('point',[function (){ return intex1_i1.baseRight.X() },0],{name:'b',size:3});
})();
</script>
|
Méthode des rectangles |
<form style="width:100%;margin:auto;padding:10px;text-align:center;">Type de rectangles <select id="sumtype" onChange="brd.update()">
<option value='lower'> inférieurs
<option value='upper'> supérieurs
</select>
</form>
<div id='boxrecta1' class='jxgbox' style='width:370px; height:400px;margin:auto;margin-top:10px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1', {axis:false, boundingbox:[-5,5,5,-1], showCopyright:false, shownavigation: false,grid:true});
var absAxe = brdre.create('arrow',[ [-5,0],[5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = brdre.create('arrow',[ [0,-1],[0,5] ], {strokeColor: 'black',fixed:true});
var intex1_c1 = brdre.create('functiongraph', [function (t) { return Math.exp(t)*0.3+1; }],{strokeWidth:2});
var l1 = brdre.create('line', [[-2,-1], [-2, 5]],{dash:2,strokeWidth:0.5,fixed:true});
var l2 = brdre.create('line', [[2,-1], [2, 5]],{dash:2,strokeWidth:0.5,fixed:true});
var s11 = brdre.create('slider',[[-4,-0.5],[1,-0.5],[1,3,100]],{name:'n',snapWidth:1});
var a11 = brdre.create('slider',[[-1,20],[2,20],[-10,-2,0]],{name:'start'});
var br = brdre.create('slider',[[-1,10],[2,10],[0,2,10]],{name:'end'});
var fo = function(x){ return Math.exp(x)*0.3+1; };
var plot1 = brdre.create('functiongraph',[fo,function(){return a11.Value();}, function(){return br.Value();}]);
var os = brdre.create('riemannsum',[fo,
function(){ return s11.Value();}, function(){ return document.getElementById('sumtype').value;},
function(){return a11.Value();},
function(){return br.Value();}
],
{fillColor:'#ffff00', fillOpacity:0.3});
brdre.create('text',
[1,35,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(fo,s11.Value(),document.getElementById('sumtype').value,a11.Value(),br.Value())).toFixed(4); }]);
</script>
|
Unité d'aire |
<div id='jxgboxq1' class='jxgbox' style='width:350px; height:200px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script type='text/javascript'>
var brdq = JXG.JSXGraph.initBoard('jxgboxq1', {boundingbox:[-1,2,5,-1], axis:true, unitX: 50, unitY: 25,showCopyright:false,showNavigation:false,grid:true});
var p1 = brdq.create('point',[0,0],{visible:false,fixed:true});
var p2 = brdq.create('point',[3,0],{visible:false,fixed:true});
var p3 = brdq.create('point',[3,2],{visible:false,fixed:true});
var p4 = brdq.create('point',[0,2],{visible:false,fixed:true});
var pol = brdq.create('polygon',[ p1,p2,p3,p4 ],{
withLines:true,
vertices:false,
withLabel: false,
fixed:true,
label: {offset:[-200,100]}
});
</script>
|
Symétrie |
<div id='jxgboxqs' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:5px;'></div>
<script type='text/javascript'>
var brdqs = JXG.JSXGraph.initBoard('jxgboxqs', {boundingbox:[-5,5,5,-5], grid:true,axis:true, showCopyright:false,showNavigation:false,pan: {
enabled: false} });
brdqs.create('line',[[0,0],[1,1]],{fixed:true});
brdqs.create('point', [2,4],{name:'A'});
brdqs.create('point', ['A.Y()','A.X()']);
</script>
|
Exp / Ln |
<div id='box5622' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type="text/javascript">
board = JXG.JSXGraph.initBoard('box5622',{axis:true,boundingbox:[-4,9,9,-4], showCopyright:false,showNavigation:false,pan: {
enabled: false} });
<!--boundingbox:[xmin,ymax,xmax,-ymin]-->
var fexp = board.create('functiongraph', [function(x){return Math.exp(x);},-4,9],{strokeColor:'blue'});
board.create('line',[[0,0],[1,1]],{strokeColor: 'black', strokeWidth: 1.5,fixed:true});
var p1 = board.create('point', [0, 1], {slideObject: fexp,name:'A'});
var p2 = board.create('point',['A.Y()','A.X()'],{name:'A\'',trace: true,size:0.5});
board.create('segment',[p1,p2],{strokeColor: 'gray', strokeWidth: 1});
</script>
|
Limite LN |
<div id='box1293' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type="text/javascript">
board3 = JXG.JSXGraph.initBoard('box1293',{axis:true,boundingbox:[-2,6,7,-2], showCopyright:false,showNavigation:false,pan: {
enabled: false} });
<!--boundingbox:[xmin,ymax,xmax,-ymin]-->
board3.create('functiongraph', [function(x){return Math.log(1+x);},-2,7],{strokeColor:'red'});
board3.create('line',[[0,0],[1,1]],{strokeWidth:0.5,fixed:true});
board3.create('text', [1, 2, 'y=x'],{fixed:true});
board3.create('text', [3, 1, 'y=ln(1+x)'],{fixed:true});
</script>
|
Signe LN |
<div id='box1295' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type="text/javascript">
board4 = JXG.JSXGraph.initBoard('box1295',{axis:true,boundingbox:[-1,3,6,-5], showCopyright:false,showNavigation:false,pan: {
enabled: false} });
board4.create('functiongraph', [function(x){return Math.log(x);},0,1],{strokeColor:'red',strokeWidth:2});
board4.create('functiongraph', [function(x){return Math.log(x);},1,6],{strokeColor:'blue',strokeWidth:2});
</script>
|
Limite finie fonction |
<div id='boxrecta1A' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1A', {axis:true, boundingbox:[-1,9,13,-1], showCopyright:false,showNavigation:false});
var fo = function(x){ return 4*Math.cos(Math.PI*x/4)/(x+1)+2; };
var plot1 = brdre.create('functiongraph',[fo,0, 500],{dash:0,strokeColor:"black" });
brdre.create('line',[[0,2],[500,2]],{fixed:true,dash:2,strokeColor:"red" });
var aq = brdre.create('point', [0, 0.2],{strokeColor:'blue',fillColor:'blue'});
var bq = brdre.create('point', [0, 4],{strokeColor:'blue',fillColor:'blue'});
brdre.on('move', function(){
aq.moveTo([0, aq.Y()]);
bq.moveTo([0, bq.Y()]);
});
var cq = brdre.create('point', [200, function(){return bq.Y()} ]);
var dq = brdre.create('point', [200, function(){return aq.Y()} ]);
var pq = brdre.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: false});
</script>
|
Partie entière |
<div id='boxp2' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
JXG.Options.axis.ticks.drawLabels = true;
var brd1 = JXG.JSXGraph.initBoard('boxp2', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}});
brd1.suspendUpdate();
var fu21 = function(x){ return Math.floor(x); }
var plots1 = brd1.create('functiongraph',[fu21,-5,5], {strokeWidth:2,strokeColor:'blue'});
for(var i=-5;i<6;i++){
brd1.create('point',[i,i],{name:'',strokeColor:'blue',fillColor:'blue',fixed:true});
brd1.create('segment',[ [i+1,i-0.2],[i+1,i+0.2] ],{strokeColor:'blue',fixed:true});
brd1.create('segment',[ [i+1,i-0.2],[i+1.1,i-0.2] ],{strokeColor:'blue',fixed:true});
brd1.create('segment',[ [i+1,i+0.2],[i+1.1,i+0.2] ],{strokeColor:'blue',fixed:true});
}
</script>
|
TVI bijection |
<div id='boxp2R1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
JXG.Options.axis.ticks.drawLabels = false;
var brd1 = JXG.JSXGraph.initBoard('boxp2R1', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}});
brd1.suspendUpdate();
var fu21 = function(x){ return (0.4*x+2.7)*Math.cos(0.1*(x-12) )-1.5; }
var plots1 = brd1.create('functiongraph',[fu21,-5,5], {strokeWidth:2,strokeColor:'blue'});
var line1 = brd1.create('line',[ [-10,1] , [10,1] ],{strokeColor:'red'});
var t1 = brd1.create('text',[2,function(t){return line1.point1.Y()+0.4;},'y=k'],{strokeColor:'red'});
var i1 = brd1.create('intersection', [line1, plots1, 0],{name:''});
var pt1 = brd1.create('point',[-4,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'a',label: {offset: [-8, -10]}});
var linept1 = brd1.create('segment',[ [-4,-1.5] , [-4,0] ],{strokeColor:'green',dash:1,fixed:true});
var linept2 = brd1.create('segment',[ [-4,-1.5] , [0,-1.5] ],{strokeColor:'green',dash:1,fixed:true});
var pt2 = brd1.create('point',[0,-1.5],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(a)',label: {offset: [-8, -10]}});
var pt3 = brd1.create('point',[4.7,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'b',label: {offset: [-8, -10]}});
var linept3 = brd1.create('segment',[ [4.7,1.9] , [4.7,0] ],{strokeColor:'green',dash:1,fixed:true});
var linept4 = brd1.create('segment',[ [4.7,1.9] , [0,1.9] ],{strokeColor:'green',dash:1,fixed:true});
var pt4 = brd1.create('point',[0,1.9],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(b)',label: {offset: [-8, 15]}});
brd1.unsuspendUpdate();
</script>
|
Signe fonction affine |
<div id='boxAffine' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script>
var brd1 = JXG.JSXGraph.initBoard('boxAffine', {axis:true, boundingbox:[-6,6,6,-6], showCopyright:false,showNavigation:false,pan: { enabled: false}});
var a = brd1.create('slider',[[-5.5,4],[1,4],[-4,1,4]], {name:'a',snapWidth:0.1});
var b = brd1.create('slider',[[-5.5,3],[1,3],[-4,1,4]], {name:'b',snapWidth:0.1});
var fu = function(x){ return a.Value()*x+b.Value(); }
var plotG = brd1.create('functiongraph',[fu,-6,function(){return -b.Value()/a.Value();}], {strokeWidth:4,strokeColor:function(){ var coul = 'blue';if(a.Value()<0){coul = 'red';}return coul; } });
var plotD = brd1.create('functiongraph',[fu,function(){return -b.Value()/a.Value();},6], {strokeWidth:4,strokeColor:function(){ var coul = 'red';if(a.Value()<0){coul = 'blue';}return coul; } });
var text1 = brd1.create('text',[-5.5,2,function(){var s = -b.Value()/a.Value();return "-b/a = "+s;}],{fontSize:20});
</script>
|