let wavelength = 0.1;

let numShapes = Math.ceil(1 / wavelength);

​

let power = 1 / 2; // dispersion relation is v ~ wavelength^power

let alpha = 0;

let button;

​

function setup() {

  let para = createDiv('This animation shows how you can draw a boat wake by superimposing many V-shaped wakes whose spacings are determined by water\'s dispersion relation (i.e. spacing ~ sin(angle)^2)');

  let cnv = createCanvas(windowWidth, windowHeight - para.height);

  cnv.parent(para);

  noFill();

  stroke(0, 0, 0, 10);

  x1 = 0;

  x2 = width;

  button = createButton('Restart');

  button.position(5, para.height + 5);

  button.mouseClicked(restart);

}

​

function draw() {

​

  if (alpha < PI / 2) {

    background(255);

    translate(0, height / 2);

    for (let angle = 0; angle <= alpha; angle += 0.01) {

      for (let n = 1; n <= numShapes; n++) {

        y2 = pointOnLine(x2, angle, n);

        line(deltax(angle, n), 0, x2, y2);

        line(deltax(angle, n), 0, x2, -y2);

      }

    }

    alpha += 0.01;

  }

}

​

function restart() {

  alpha = 0;

}

​

function xf() {

  return 1 / power; // prefactor on xvalue of circles

}

​

function rf() {

  return (1 - power) / power; // prefactor on radius

}

​

​

function deltax(alpha, n) {

  return n * lambda(alpha) / sin(alpha);

}

​

function radius(alpha, n) {

  return n * lambda(alpha);

}

​

function x(alpha, n) {

  return n * (sin(alpha) * lambda(alpha) + cos(alpha) * dlambda(alpha));

}

​

function y(alpha, n) {

  return n * (sin(alpha) * dlambda(alpha) - cos(alpha) * lambda(alpha));

}

​

function pointOnLine(x, alpha, n) {

  return x * tan(alpha) - n * lambda(alpha) / cos(alpha);

}

​

function lambdamax() {

  return width * wavelength;

}

​

function lambda(alpha) {

  return lambdamax() * pow(sin(alpha), 1 / power);

}

​

function dlambda(alpha) {

  return lambdamax() * cos(alpha) * pow(sin(alpha), -1 + 1 / power) / power;

}