Recurrence logistique

by spgoo

HTML

<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.min.js"></script> 
<script src="https://jsxgraph.org/distrib/JessieScript.js"></script>  



   <center>
        <div class="board-container">
            <div id="box1" class="box"></div>
            <div id="box2" class="box"></div>
        </div>
    </center>

CSS

.boards {
            display: line;  /* Empile les éléments verticalement */
            text-align: center;
        }
        .box {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            margin-bottom: 20px; /* Espace entre les deux graphiques */
            border: 1px solid black;
        }
        .input-box {
            position: absolute;
            top: 350px; /* Ajuster pour être sous le deuxième graphique */
            left: 400px;
            transform: translateX(-20%);
            background: rgb(240,248,255);
            padding: 4px;
            border-radius: 4px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            font-size: 14px;
            text-align: center;
        }
        .input-box input {
            width: 40px;
            margin: 5px;
            font-size: 12px;
        }

JavaScript

JXG.Options.text.useKatex = true;
        // Premier board (Diagramme en escalier)
var board = JXG.JSXGraph.initBoard("box1", {
	pan: { enabled: true },
	boundingbox: [-0.05, 1.2, 1.3, -0.3],
	withLines: false,
	keepaspectratio: true,
	axis: true,
	showInfobox: false,
	defaultAxes: {
		x: {
			visible:true,
			ticks: { visible: false },
			withLabel: true,
			name: 'x_t',
			label: {
				position: 'rt',
				offset: [10, -15],
				anchorX: 'right',
				cssStyle: 'font-family:KaTeX_Math',
				layer: 10,
				highlight: false
			}
		},
		y: {
			visible:true,
			ticks: { visible: false},
			withLabel: true,
			name: 'x_{t+1}',
			label: {
				position: 'rt',
				offset: [-40, 0],
				anchorY: 'top',
				highlight: false
			}
		},
	},
	showNavigation: false,
	showCopyright: false
});


board.renderer.container.style.backgroundColor = '#C3ADC3';
board.jc = new JXG.JessieCode();
board.jc.use(board);

const board1 = JXG.JSXGraph.initBoard("box2", {
	boundingbox: [-2, 1.2, 22, -0.2],
	keepaspectratio: false,
	axis: true,
	showNavigation: false,
	showCopyright: false
});

board1.renderer.container.style.backgroundColor = '#C3ADC3';
board1.jc = new JXG.JessieCode();
board1.jc.use(board1);

// Create input box container
const inputBox = document.createElement('div');
inputBox.className = 'input-box';
inputBox.innerHTML = `
<label for="mInput">r : </label>
<input type="number" id="rInput" value="3.50" step="0.01" />
<label for="sInput">  T : </label>
<input type="number" id="nInput" value="20" step="10" min="10" />
`;
document.getElementById('box1').appendChild(inputBox);
// valeurs initiales pour les paramètres
let r = 3.5;
let n = 10;

// Fonction logistique
var logisticRecurrence = function(x) {
	return r * x * (1 - x);
};

// Tracé dé la fonction logisitique
var logisticCurve = board.create('functiongraph', [logisticRecurrence, 0, 1], { strokeColor: 'darkslateblue',strokewidth:2 });

// Création de la bissectrice (y = x)
var bisectrix = board.create('functiongraph',...