let scy = 150;

let nsamp = 10;

let subapw;

​

function setup() {

  createCanvas(400, 400);

  subapw = width/nsamp;

  sliderx = createSlider(0,subapw,0);

}

​

function draw() {

  let m1 = [];

  let m2 = [];

  background(220);

  dx = sliderx.value();

  translate(0,height/4);

  noFill();

  stroke(150);

  line(0,0,width,0);

  push();

  translate(0,-scy/2);

  stroke(0);

  for (let ni=0;ni<width;ni++){

    line(ni,scy*noise(ni*sc),ni+1,scy*noise((ni+1)*sc));

  }

  strokeWeight(2);

  stroke(255,0,0);

  for (let mi=0;mi<=nsamp;mi++) {

    line(mi*subapw,scy/2,mi*subapw,scy*noise(sc*mi*subapw));

    ellipse(mi*subapw,scy*noise(sc*mi*subapw),4,4);

    m1.push(-(scy*noise(sc*mi*subapw)-scy*noise(sc*(mi+1)*subapw))/subapw);

  }

  stroke(0,0,255);

  for (let mi=0;mi<=nsamp;mi++) {

    line(mi*subapw+dx,scy/2,mi*subapw+dx,scy*noise(sc*(mi*subapw+dx)));

    ellipse(mi*subapw+dx,scy*noise(sc*(mi*subapw+dx)),4,4);

    m2.push(-(scy*noise(sc*(mi*subapw+dx))-scy*noise(sc*((mi+1)*subapw+dx)))/subapw);

  }

  pop();

  translate(0,height/4);

  noFill();

  stroke(150);

  line(0,0,width,0);

  push();

  translate(0,-scy/2);

  stroke(0);

  let phi = scy*noise(dx/2*sc);

  for (let ni=0;ni<=width;ni++){

    let mi1 = floor((ni) / subapw);

    let mi2 = floor((ni+dx)/subapw);

    let m = 0.5*(m1[mi1]+m2[mi2]);

    //line(ni,m,ni+1,m);

    ellipse(ni,phi,2,2);

    ellipse(ni,phi-scy*noise((ni+dx/2)*sc)+height/2,2,2);

    phi += m;

  }

  pop();

}