let spacing = 7; 

let maxWaveHeight = 50;  

​

function setup() {

  createCanvas(400, 400);

  noLoop();

}

​

function draw() {

  background(0);  

  let baseline = height / 2;  

  let from = color(218, 165, 32);  

  let to = color(72, 61, 139);   

​

 //First set of wave

  for (let x = 0; x < width; x += spacing) {

    let colChange = map(x, 0, width, 0, 1);  

    let col = lerpColor(from, to, colChange);

    stroke(col);

    strokeWeight(2);

​

    let angle = (TWO_PI / 50) * x + phase;  

    let y = sin(angle) * maxWaveHeight; 

    line(x, baseline, x, baseline + y);  

  }

​

  //Second set of wave

  stroke(255, 255, 255, 100);  

  strokeWeight(1);

  beginShape();

  noFill();

  for (let x = 0; x < width; x += spacing / 2) {

    let angle = (TWO_PI / 25) * x + phase / 2;  

    let y = sin(angle) * (maxWaveHeight / 2);  

    vertex(x, baseline + y);  

  }

  endShape();

​

 //Dots

  strokeWeight(4);

  for (let x = 0; x < width; x += spacing * 4) {

    let angle = (TWO_PI / 100) * x + phase;  

    let y = sin(angle) * (maxWaveHeight * 1.2);  

    point(x, baseline + y);

  }

​

  phase += 0.1; 

}

​

function mousePressed() {

  loop();  

}

​

function mouseReleased() {

  noLoop(); 

}

​