I want to make simple fisheye algorithm to make it look like screen lens. Here is simple javascript code for 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);

Here is the result video: https://youtu.be/9a4q_enf4p8 It works okay, but the center of image is very "aggressive". When some content appears in the middle, the distortion is very big. How can I make it smoother in the middle?