p5js Doppler effect

Question

Wondering if somebody could help me figure out how to build this doppler effect kind of animation in p5js. Eventually building it into a tool. So the base is just vertical/horizontal lines and i want to distort it with the radial doppler effect. Only cant seem to figure out whats the best way to build it.

https://i.stack.imgur.com/mp7gD.png

https://i.stack.imgur.com/mGo4S.png

https://www.behance.net/gallery/135440721/Doppler-effect

Already built the base frame for the vertical linings. Only need to figure out how to get the ripple distortion

Base: https://editor.p5js.org/anneveragiesen/sketches/Bp9vTgfdt

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(255, 255, 255);
  
  for (let lineX = 10; lineX <= width; lineX += 10) {
    line(0, lineX, width, lineX);
  }
}

Loop: https://editor.p5js.org/anneveragiesen/sketches/D5_fSDUEB

let rings = [];


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);

  noFill();
  

  // Make it look pretty
  strokeWeight(1);

  if (frameCount % 60 === 0) {
    // radius now starts at zero
    rings.push(new Ring(height / 2, width / 2, 0));
  }

  // Limit the amount of rings in the array to nine
  if (rings.length > 9) {
    rings.shift();
  }

  rings.forEach((ring) => {
    // Call the update function each time we draw a circle
    ring.update();
    ring.draw();
  });
}

class Ring {
  constructor(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
  }
  update() {
    // increase the radius of the circle by
    // one each time the update function is called
    this.radius += 1;
  }
  draw() {
    circle(this.x, this.y, this.radius);
  }
}

Now for the end result i want it to interact with each other so it creates a doppler effect ( see source : https://www.behance.net/gallery/135440721/Doppler-effect )