JSFiddle - React, Tailwind, and code Playground

HTML

<input id='iw' value='500'><input id='ih' value='300'> - Ширина/Высота<br>
<input id='ix1' value='150'><input id='iy1' value='150'> - Точка 1 (x,y)<br>
<input id='ix2' value='250'><input id='iy2' value='150'> - Точка 2 (x,y)<br>
<input id='il1' value='10'><input id='if1' value='0'> - Длина волны от точки 1 и фаза<br>
<input id='il2' value='10'><input id='if2' value='0'> - Длина волны от точки 2 и фаза<br>
<input id='itstep1' value='0.1'><input id='itstep2' value='0.1'> - скорость<br>
<input type='button' id='b1' value='Обновить'><input type='button' id='b2' value='Анимация'><br>
<canvas id='cv'></canvas>

JavaScript

var ct=cv.getContext('2d');
var q=1, b=0, img, w;

var dots = [];

function Dot(x, y, l, f, t, tstep) {
	this.x = x || 0;
	this.y = y || 0;
	this.l = l || 0;
	this.f = f || 0;
	this.t = t || 0;
	this.tstep = tstep || 0;
};

init();
interf();

cv.onclick=function() {
  if (q==0) q=1;
  else q=0;
  if (b==0) interf();
}

b1.onclick=function() {
  init();
  if (b==0) interf();
}

b2.onclick=function() {
  if (b==0) {
    b=1;
    b2.value='Стоп';
    go=setInterval(interf, 17);
  }
  else {
    b=0;
    b2.value='Анимация';
    clearInterval(go);
  }
}

function init() {
  cv.width=+iw.value;
  cv.height=+ih.value;
  img=ct.getImageData(0, 0, cv.width, cv.height);
  dots = [];
  dots.push(new Dot(
  	+ix1.value, +iy1.value,
  	+il1.value, +if1.value,
    0, +itstep1.value
  ));
  
  dots.push(new Dot(
  	+ix2.value, +iy2.value,
  	+il2.value, +if2.value,
    0, +itstep2.value
  ));
  w=cv.width;
}

function interf() {
  for (var i=0, len=img.data.length; i<len; i+=4) {
    var y=(i/4/w|0)+1;
    var x=i/4+1-(y-1)*w;
    
    var asum = 0;
    
    for (var doti = 0; doti < dots.length; doti++) {
    	let dot = dots[doti];
      
      var diag = Math.sqrt(Math.pow(dot.x - x, 2) + Math.pow(dot.y - y, 2));
      var a = Math.sin(2*Math.PI*((diag - dot.t) / dot.l + dot.f / 360));
      if (diag >= 1 && q == 1) {
      	a /= Math.sqrt(diag);
      }
      
      asum += a;
    }
    
    var col=(255*(asum+2)/4)|0;
    img.data[i]=col;
    img.data[i+1]=col;
    img.data[i+2]=col;
    img.data[i+3]=255;
  }
  
  dots.forEach( dot => {
  	dot.t += dot.tstep;
  });
  
  ct.putImageData(img, 0, 0);
}