← All projects

Cobweb Plots

Cobweb plot visualiser, built in p5.js.

Apr 2026 JavaScript (p5.js) GitHub ↗
dynamical systems p5.js visualisation

Overview

A cobweb plot is a tool for visualising the behaviour of discrete 1D iterated functions, functions of the form $x_{n+1}=f(x_n)$. As an example, we take the logistic map, with

$$x_{n+1}=rx_n(1-x_n)$$

A cobweb plot is useful for examining the long-run behaviour of the recurrence relation in question starting from a given $x_0$.

Method

For a given recurrence relation $x_{n+1}=f(x_n)$ and initial value $x_0$ we begin by plotting the curves $y=x$ and $y=f(x)$. Then:

  1. Draw a vertical line between the points $(x_0, x_0)$ and $(x_0, f(x_0))$
  2. Draw a horizontal line between the points $(x_0, f(x_0))$ and $(f(x_0), f(x_0))$
  3. Draw a vertical line between the points $(f(x_0), f(x_0))$ and $(f(x_0), f(f(x_0)))$
  4. Set $x_0 = f(x_0)$
  5. Repeat from step 2 for a set number of iterations

Interpretation

A cobweb plot allows us to classify the stability of fixed points of the map. A fixed point $x^*$ satisfies $f(x^*) = x^*$ and corresponds to an intersection of the curve $y = f(x)$ with the diagonal $y = x$. If the cobweb spirals inward toward such an intersection, the fixed point is stable. If the cobweb spirals outward or diverges away, the fixed point is unstable. As $r$ increases, the logistic map transitions from stable fixed points to bifurcations and eventually chaotic behaviour.

Demo

Below is a demonstration of the cobweb plot of the logistic map. Here $r$ is swept from $0$ to $4$ with $x_0=0.1$ and an iteration depth of $50$ with $x_0=0.1$ and an iteration depth of $50$

Cobweb plot of logistic map with varying $r$

Here we are keeping $r=3$ fixed and instead varying $x_0$ from $0$ to $1$

Cobweb plot of logistic map with varying $x_0$

Implementation

The entire script can be found on the linked Github. Below is a snippet of the main loop

The cobweb loop:


  let x0 = 0.1;
  let y0 = x0;
  for (let i = 0; i < n_iters; i++) {
    let fx = r * x0 * (1 - x0);
    line(cx(x0), cy(y0), cx(x0), cy(fx));
    line(cx(x0), cy(fx), cx(fx), cy(fx));
    y0 = fx;
    x0 = fx;
  }