Solving Dynamical Systems in Javascript

So here is the second step, how to solve a tent map in javascript and plot it as it is getting iterated.

The map is defined as follows

\[x_{n+1} = 2~x_n ~\text{mod}~ 1\]

The \(x_n\) are plotted with respect to the step numbers. Change the value given in the slider to provide the initial condition.

Value:

The javascript code is given below.


<script>
tentmap(0.45); // Running it to get the first graph
//Slider
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
  output.innerHTML = this.value/100;
  tentmap(this.value/100);
}

//The functions
function tentmap(init)
{
var statei = init;
var xaxis = [0];
var yaxis = [statei];
var i ;
for (i = 0; i < 45; i++) {
  xaxis.push(i);

  statei = (2*statei)%1

  yaxis.push(statei);
}
  var trace1 = {
  x: xaxis,
  y: yaxis,
  mode: 'lines', //use markers if you want just dots
  type: 'scatter'
};
var data = [trace1];
Plotly.newPlot('myDiv', data);
}
</script>

The HTML is as follows.

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
  <div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>
</body>

Posts

subscribe via RSS