Switching directions

The basic idea should be clear from the first technical tutorial. Remember, we do not do any seriously motivated calculations here. Your physics- techer was perfectly right, I am wrong (but it looks nice).
We will now come from the other direction:
We start with a picture, disect it into layers and then have a look where their world coordinates should be.

Initial picture

To illustrate the process, I created a boring example of four circles, radially filled with gradients, on a white background.

Disection

Next, I copy the image parts that I want to have different depth into single layers. Afterwards I will remove the white areas around the ball, make them transparent and crop the layers so that each ball just fits inside its layer. By doing so, we later do not have to have a huge picture for each layer, that is mostly transparent.

Now I save these layers under distinct filenames. Basically thats it. But we have to tell DOMiao where to put the images, so i look at the upper left corners of all of the layers and write them down. The biggest red ball for example sits at (252 83).

“Backprojection”

So this time we have to project from the screen to the world. The real screen position is not so important here, what we really need is the ratio of screen position to the viewports width. The interception theorem then gives us the world coordinate, given the depth or distance of the layer.

DOMiao code

In every usage of DOMiao we need a Renderer.
We then add Layers, give the relative screen position and the depth. The calculations are hidden in a Layers defineOnScreen method. The Background layer obvisously is far away. For the depth- argument there is no metric yet.

r = new Renderer();

lwhite = new Layer();
lwhite.defineOnScreen(“white.png”, 0, 0, 12000000, r);

l4 = new Layer();
l4.defineOnScreen(“l4.png”, 215, 230, 80000,r);

And so on …