Quiero hacer un algoritmo de ojo de pez simple para que parezca una lente de pantalla. Aquí hay un código javascript simple para canvas.

 var frame = context.getImageData(0, 0, canvas.width, canvas.height); var source = new Uint8ClampedArray(frame.data); context2.clearRect(0, 0, canvas.width, canvas.height); const SIZE = 80; for (var i = 0; i < frame.data.length; i += 4) { var x = (i / 4) % frame.width; var y = Math.floor(i / 4 / frame.width); let mouseX = frame.width / 2; let mouseY = frame.height / 2; var dx = mouseX - x; var dy = mouseY - y; var dist = Math.sqrt(dx * dx + dy * dy); var i2 = i; if (dist <= SIZE) { var x2 = Math.round( mouseX - dx * Math.sin(((dist / SIZE) * Math.PI) / 2) ); var y2 = Math.round( mouseY - dy * Math.sin(((dist / SIZE) * Math.PI) / 2) ); var i2 = (y2 * frame.width + x2) * 4; } frame.data[i] = source[i2]; frame.data[i + 1] = source[i2 + 1]; frame.data[i + 2] = source[i2 + 2]; frame.data[i + 3] = source[i2 + 3]; } context2.putImageData(frame, 0, 0);

Aquí está el video del resultado: https://youtu.be/9a4q_enf4p8 Funciona bien, pero el centro de la imagen es muy "agresivo". Cuando aparece algún contenido en el medio, la distorsión es muy grande. ¿Cómo puedo hacer que sea más suave en el medio?