let diameter = 50;

let piecewiseStepSlider;

let metaVelocitySlider;

let circleSpacingSlider;

​

function setup() {

  createCanvas(400, 250);

  piecewiseStepSlider = createSlider(0, 10, 4);

  piecewiseStepSlider.position(10, 10);

​

  metaVelocitySlider = createSlider(0, 25, 4);

  metaVelocitySlider.position(10, 40);

  textSize(16);

}

​

function drawLabels(piecewiseStep, metaVelocity, circleSpacing) {

  noStroke();

  fill(0);

  text("Piecewise Step: " + piecewiseStep, 180, 27);

  text("Meta Velocity: " + metaVelocity, 180, 57);

​

}

​

function drawWorm(angle, step) {

  stroke(0);

  fill(0, 75);

  for (let x = diameter; x <= width - diameter; x += diameter / 3) {

    let y = map(sin(angle), -1, 1, height / 2, height - diameter);

    circle(x, y, diameter);

    // The step amount controls how much further along the wave each

    // circle is from the previous one.

    angle += step;

  }

}

​

function draw() {

  // Convert from 0 to 20 slider to 0.0 to 2.0 float.

  let piecewiseStep = piecewiseStepSlider.value() / 10;

​

  // Convert from 0 to 25 slider to 0.00 to 0.25 float.

  let metaVelocity = metaVelocitySlider.value() / 100;

​

  // Each frame the starting angle of the worm's left-most circle

  // changes by a small offset. When the offset is zero the worm 

  // is a static wave.

  startAngle += metaVelocity;

​

  background(255);

  drawLabels(piecewiseStep, metaVelocity);

  drawWorm(startAngle, piecewiseStep);

}

​