const frameInterval = 40;

const wave_vel = 4;

var wavefronts = [];

var wf_size = [];

var pos;

var src_vel;

​

function setup() {

  createCanvas(600, 400);

  pos = createVector(0, height/2);

  src_vel = createVector(1, 0);

}

​

function draw() {

  background(220);

  if((frameCount-1)%frameInterval == 0) {

    if(wavefronts.length == max_wf) {

      wavefronts.shift();

      wf_size.shift();

    }

    // console.log("Here");

    wavefronts.push(pos.copy());

    wf_size.push(0);

  }

  noFill();

  for(let i = 0; i < wavefronts.length; i++) {

    // console.log(wavefronts[i].x, wavefronts[i].y);

    let opac = 255*exp(-wf_size[i]/440);

    // console.log(opac);

    stroke(0, opac);

    ellipse(wavefronts[i].x, wavefronts[i].y, wf_size[i]);

    wf_size[i] += wave_vel;

  }

  stroke(0, 255);

  fill(20);

  ellipse(pos.x, pos.y, 5);

  pos.add(src_vel);

  // if(frameCount == 30) {

  //   noLoop();

  // }

}