const vari = 0.5;

var levels = 5;

var t = 0;

var T = 0;

var dt = 0.05;

var margin = 0.3;

var [lm, rm] = [1 - margin, 1 + margin];

prev = [];

​

function setup() {

  createCanvas(400, 400);

  colorMode(HSB, 1.0);

  noFill();

​

  for (var i = 0; i < levels; i++) {

    for (const [w, h, m] of [

      [300, 100, 50],

      [200, 50, 50],

      [350, 250, 50],

      [50, 359, 50],

      [0, 0, 55],

      [0, 0, 55],

    ]) {

      ps.push(createVector(random(w - m, w + m), random(h - m, h + m)));

      // circle(w, h, 10);

    }

  }

  var [a, b, c, d] = ps.slice(0, 4);

  var x = bezierPoint(a.x, b.x, c.x, d.x, t);

  var y = bezierPoint(a.y, b.y, c.y, d.y, t);

  prev = [x, y];

}

​

function f(x) {

  return min(max(x + random(-vari, vari), 0), 400);

}

​

function addOne() {

  ps.splice(0, 1);

  ps.push(createVector(f(ps[0].x), f(ps[0].y)));

}

​

function distorter(x) {

  return abs(sin(x));

}

​

function draw() {

  // background(220);

  var [a, b, c, d] = ps.slice(0, 4);

  var x = bezierPoint(a.x, b.x, c.x, d.x, t);

  var y = bezierPoint(a.y, b.y, c.y, d.y, t);

  t += dt;

​

  if (t > rm) {

    t = -lm;

    addOne();

  }

  strokeWeight(.05 * distorter(T));

  circle(x,y, 5)

  //        TODO slider, +*random(),

  strokeWeight(.1 * distorter(T));

  line(x, y, prev[0], prev[1]);

  prev = [x, y];

​

  T += 0.02;

  stroke(distorter(T), 1, 1);

}

​