We are working on a website ( NDA ) that needs (!) a 3D caroussel. To make things a little exciting for ourselves, we added depth of field ( DOF ). This post will explain the basic steps involved in getting the maths work for that purpose.
Below you can see a screenshot of the demo application we developed to research the problem in 2D. The solution will also work in a 3D world, for example: in our Papervision3D caroussel. In the resulting caroussel we’ll be able to use the calculated distance to blur a given DisplayObject3D, relative to it’s distance to the camera and thus get depth of field.
As you can see there are dots, lots of ‘em, layed out on a circle. The circle has it’s own axis. The dots remain on their fixed position within the circle. What does change however, is the rotation of the circle relative to the observer ( the gray disk, which you can drag around ). This poses a problem for us. The distance of the orange dots are constantly changing.
We can use very simple maths to solve the problem. With cosinus and sinus.
// PSEUDO CODE - this code is meant to illustrate // the thoughts behind the calculation // distance on the horizontal axis between dot and observer var dx : Number; // distance on the vertical axis between dot and observer var dy : Number; // rotation of the dot on the circle relative to the observer var da : Number; // we know the angle of the dot in the circle: ( 2 * PI ) / numberOfDots // 2 * PI = 360 degrees expressed in radians da = angleOfDotOnTheCircle + rotationOfCircle; // use the given angle to calculate dx and dy // cos will be between -1 and 1, multiply with the radius of the circle and you have dx dx = Math.cos( da ) * radius; // sin will be between -1 and 1, multiply with the radius of the circle and you have dy dy = Math.sin( da ) * radius; // now that dx and dy are set we can get the distance ( between dot and observer ) as follows var totalX : Number = circle.x + dx - observer.x; var totalY : Number = circle.y + dy - observer.y; // calculate the distance between dot and observer with this formula var dist : Number = Math.sqrt( totalX*totalX + totalY*totalY );
Maybe the following image can help to figure the pseudo code out yourself.
Be careful: the rotation of the circle is expressed in degrees, but the Math methods ( cos and sin ) use radians. To convert degrees to radians use:
radians = degrees * 180 / PI;
Try out the demo app for yourself – it’s ‘view-source‘ enabled. Right click to check it.
Please leave your questions in the comments. We really want you to get it before we move on to a next post featuring the 3D demo application with ( read the following words with your best death metal voice ) Depth Of Field.
Wauw dat is wel een mooie demo. Even gaan kijken hoe ik dat kan toepassen op mijn site. Ziet er interessant uit