1

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?

enter image description here

Max Frai
  • 61,946
  • 78
  • 197
  • 306
  • Here's [an example I found](https://codepen.io/jOlga/pen/KyQMQW) that seems similar to what you want. – Wyck Jul 25 '22 at 15:06

1 Answers1

1

What you see are the source pixels magnified by the lens effect. They have hard edges, which are preserved because you copy the pixel values as such. What you are doing is known as "nearest-neighbor interpolation".

You will obtain a smoother result by "bilinear interpolation".

  • compute x2, y2 as floats, do not round them;

  • use the integer part and fetch the four pixels surrounding x2, y2;

  • use the fractional parts to compute a weighted average of the four pixels.

The formula is

(1-v) ((1-u) V00 + u V10) + v ((1-u) V01 + u V11)

where u, v are the fractional parts and the V are the pixel values (repeat for R, G and B).