The math for warping images.

Page1.md

The first solution

At first it was kind of obvious that you can just use basic trig to get the hight of the triangle. But that comes into error when you have a z offset, or a y offset.
The code here is very simple, so I'll just break it down as such:
First you just see the trig function that this is based of off.

var length = 10; // basically the hypotenuse of the triangle.  
var theta = 45; // the angle of elevation, between the base and the hypotenuse  
  
var newheight = sin(theta)*length;//   This is the projected height, and as you can see, really primitive.  

Page2.md

The second solution

The Cons

Taking a closer look at the issues with the one above, here is a list:

• no offsets (in the y or z.)
  • y offset as in a tabletop, or something of the sort.
  • z offset as in a wall that needs to be at the opposite end of the screen, or a wall somewhere in the middle(but that doesnt make as much sense.)

working through the cons

Actually, they kind of come together.

working through the cons Working through the problem

When you are looking at the problem, you have a ground plane, and then you have the table top with the y and z offset.(I'm not worring abt the x offset because that doesnt change anything.(However it will be added in the complete solution.)) So. This is a tale of 2 triangles. You have the one on the bottom, and the one in between. The one of the bottom is the easy one.

var zOff = 10; // z offset w/ placeholder val  
var yOff = 10; // y off w/ placeholder val  
var floorLength = 100; // length of the floor  
var tablelength = 30; // length of the table  
var theta = 45; // angle of elevation  
  
var h1 = sin(theta)*zoff; // Using the same function as last time to get the bottom half.  
var h2 = cos(theta)*yoff; // Using cosine to get the between triangle.  

Cons:

We still have these????

• more of a feature, but walls need to have a ThetaOffset so that things can be tilted, or just having a vertical wall.
  • A really quick fix, but I like doing this kind of thing.

Page3.md

Wall Fix.

The math is simple, you just take the original code, and replace all of the thetas in lines 19 and 20 with thetaOffset-theta.
Here it is for those who want it:

var zOff = 10; // z offset w/ placeholder val  
var yOff = 10; // y off w/ placeholder val  
var floorLength = 100; // length of the floor  
var tablelength = 30; // length of the table  
var theta = 45; // angle of elevation  
  
var thetaOffset = 90; // vertical wall
var h1 = sin(thetaOffset-theta)*zoff; // Using the same function as last time to get the bottom half.  
var h2 = cos(theta)*yoff; // Using cosine to get the between triangle.