2

TLDR: I need to change the perspective over an object in a 2d cavas.

Let's say I make a photo of my desk while I sit next to it. I want to change that image, to look as if I would see it from above. Basically the view would change like in the image below (yes, my paint skills are awesome :)) ).

enter image description here

I am using canvas and easeljs (createjs).

I am totally aware that this is not a 3rd object, I don't have a stage and a camera. I am also aware that easeljs doesn't support this as a feature.

What I am actually trying is to emulate this (I am also not interested in quality of the result at this point).

What I tried and it worked (I noticed I am not the first to try to do this and didn't actually found a real answer so this is my current approach):

I take the original image. Divide it in a high number of images (the higher the better) as in the image below.

enter image description here

Then I scale each of the "mini-images" on x axis with a different factor (that I'm computing depending on the angle the picture was made). Part of relevant code below (excuse the hardcodings and creepy code - is from a proof of concept I made in like 10 minutes):

            for (var i = 0; i < 400; i++) {
                crops[i] = new createjs.Bitmap(baseImage);
                crops[i].sourceRect = new createjs.Rectangle(0, i, 700, i + 1);
                crops[i].regX = 350;
                crops[i].y = i - 1;
                crops[i].x = 100;
                crops[i].scaleX = (400 - i / 2) * angleFactor;
                stage.addChild(crops[i]);
            }

Then you crop again only the relevant part.

Ok... so this works but the performance is... terrible - you basically generate 400 images - in this case - then you put them in a canvas. Yes, I know it can be optimized a bit but is still pretty bad. So I was wondering if you have any other (preferably better) approaches.

I also tried combining a skewing transformation with a scale and a rotation but I could not achieve the right result (but I actually still think there may still be something here... I just can't put my finger on it and my "real" math is a bit rusty).

zozo
  • 8,230
  • 19
  • 79
  • 134
  • Did you checked this one? http://stackoverflow.com/questions/11864446/easeljs-perspective-image-transformation – gMirian Mar 14 '17 at 17:56
  • @gMirian Actually yes, I checked it before posting :). The accepted answer was not really helpful... is basically the same hunch I have. The other answer was a bit better, but did not manage to use it to achieve what I need (I will try again tomorrow since sleep usually helps). The problem with the 2D matrix is that it locks the 3rd line of the transformation matrix (since is the 0 0 1 border so you can add both multiplicative and additive transformations with a single matrix). That is the matrix I used when I tried the combination of transformations I spoke of at the end of the question. – zozo Mar 14 '17 at 21:34

0 Answers0