simple waves

const color0 = [60, 9, 13, 100];

const color1 = [45, 2, 20, 100];

const color2 = [45, 2, 86, 100];

​

function setup() {

  createCanvas(512, 512);

  colorMode(HSB);

}

​

function drawWave(y, t) {

  const p = PI / 2;

  const amp = 20;

  noFill();

​

  beginShape();

  curveVertex(0, y + sin(0) * amp);

  curveVertex(0, y + sin(0) * amp);

  for (let i = 1; i < width; i++) {

    curveVertex(20 * i, y + sin(i / p) * amp);

  }

  curveVertex(20 * 50, y + sin(50 / p) * amp);

  curveVertex(20 * 50, y + sin(50 / p) * amp);

  endShape();

}

​

function draw() {

  background(color0);

  noFill();

​

  for (let i = 0; i < height; i += 20) {

    const c = color(color2);

    c.setAlpha(i / height);

    stroke(c);

    strokeWeight(2);

    drawWave(i);

  }

​

  // draw frame

  stroke(color1);

  strokeWeight(24);

  rect(0, 0, width, height);

  strokeWeight(12);

  stroke(color0)

  rect(12, 12, width - 24, height - 24);

}