How do I fix this image (pixel by pixel) distortion issue?

217 Views Asked by At

I am attempting to distort an image displayed within a canvas, so it looks like a "planet". However I am struggling to find away to deal with a distortion issue. The only solution coming to mind is to find a way to reduce the radiusDistance variable, the bigger it is. That said, I am unsure how to achieve this. Any suggestions?

Below is the math and objects I am currently using to achieve this:

polarArray = [];
var polar = function(a,r,c){ //polar object, similar to pixel object.
    this.a = a; //angle
    this.r = r; //radius (distance)
    this.color = c; //color, stored using an object containg r,g,b,a variables
};
loopAllPixels(function(loop){//loop through every pixel, stored in a pixel array
    var pixel = loop.pixel;
    /*each pixel object is structured like this:
        pixel {
            x,
            y,
            color {
                r,
                g,
                b,
                a
            }
        }
    */
    var angle = pixel.x/360*Math.PI;
    var radiusDistance = pixel.y/Math.PI;
    polarArray.push(new polar(angle,radiusDistance,pixel.color));//store polar coordinate pixel + colour.
    pixel.color = new colorRGBA(255,255,255,255);//set background as white.
});
for (var i=0;i<polarArray.length;i++){//loop through polarArray (polar coordinate pixels + colour)
    var p = polarArray[i]; //polar pixel
    var x = (p.r*Math.cos(p.a))+(canvas.width/2); //x coordinate
    var y = (p.r*Math.sin(p.a))+(canvas.height/2); //y coordinate
    if (setpixel(x,y,p.color)==true){ //set pixel at location.
        continue;
    }
    break;

}
updatePixelsToContext();//draw to canvas

And here is the effect it currently produces (note that I flip the image horizontally before applying it to the canvas, and in this example, I set the background with a magenta kind of colour, for better clarity of the issue):

enter image description here


Note: I am intending for the warping effect, just not the "ripping" of the pixels, caused by not obtaining all the neccessary pixel data required.

Also bear in mind that speed and effeciency isn't my priority here as of yet.

0

There are 0 best solutions below