The following is a javascript implementation of a cobweb diagram for the Logistic Map. The logistic map is a discrete dynamical system, that exhibits chaotic behavior for certain values of its parameter, r. The cobweb diagram is a geometric way of showing the behavior of the logistic map.
The algorithm works as follows:
Beginning with a certain x value, find the point on the parabola that corresponds to it. Then move horizontally to a point on the line y=x with the same y coordinate. Let f(x)=rx(1-x).
Point n+1: (x, f(x))
Point n+2: (f(x), f(x))
Replace x with f(x)
and repeat.
Suggestions
Enter values for x0 and r and a number of iterations of the logistic map to use. The cobweb diagram will show whether the (non-zero, if there is one) fixed point of the logistic equation is attractive or repulsive. An attractive fixed point draws the values of successive iterations of the map closer to the fixed point, while a repulsive fixed point pushes those values away from the fixed point. There is also the possibility that the fixed point will neither attract nor repel successive iterations and instead produce a periodic orbit.
n=200, x0=0.2, r=2 (x=1/2 is an attractive fixed point)
n=200, x0=0.2, r=3.9 (x=29/39 is a repulsive fixed point)
n=200, x0=0.2, r=3.2 (x=22/32 has a 2-periodic orbit)
<script type="text/javascript">
var g2 =[];
function f(x,r)
{
// return the value of x_n+1
return (+r)*(+x)*(1-x);
}
function cobweb(n,x0,r,pause)
{
var x = (+x0); // initial value of x is 0
var y = 0; // initial value of y is y0
g2 = [[x,y],[x,f(x,r)]]; // start with initial conditions
// Prepare the output for reporting
var msg = '<table border="0.5"><tr><td width="150">x</td><td width="200">y</td></tr>';
msg += '<tr><td>'+x+'</td><td>'+y+'</td></tr>';
// loop until x reaches its target value
for (var i = 1; i <= n; i++)
{
// Perform iterations of the logistic map
x = f(x,r);
y = f(x,r);
// record the x and y values for this iteration
msg += '<tr><td>'+x+'</td><td>'+y+'</td></tr>';
// Add data to the plot as well.
g2.push([x,x]);
g2.push([x,y]);
// Wait before continuing
if (pause > 0.1)
{
// refresh the plot
$(function () {
var d1 = [];
for (var i = 0; i <= 40; i++)
d1.push([i/40, f(i/40, r)]);
$.plot($("#placeholder"), [ { label: "r="+r, data: d1} , { data: [[0,0],[1,1]]}, { label: "cobweb", data: g2, lines: {show: true}, color: "red" }]);
});
// enforce the pause
setTimeout(continue,1000*pause);
}
}
// record the actual fixed point
msg += '<tr><td>Fixed Point</td><td>x='+(r-1)/r+'</td></tr>';
// report the fixed point to the user
document.getElementById("msg").innerHTML=msg+'</table>';
// Refresh the plot
$(function () {
var d1 = [];
for (var i = 0; i <= 40; i++)
d1.push([i/40, f(i/40, r)]);
$.plot($("#placeholder"), [ { label: "r="+r, data: d1} , { data: [[0,0],[1,1]]}, { label: "cobweb", data: g2, lines: {show: true}, color: "red" }]);
});
}
</script>