Page 1 of 1

Depth and perception.

Posted: Fri Mar 14, 2008 2:25 pm
by JellyFish
So I have an image 100x100 in size. I would like to mock depth when I set the z-index of this image. So what I need to do is scale the image's height and width so that it appears like it's shrinking as it gets farther away. So the problem is that if I shrunk the image 1 pixel every time I move the image back 1 pixel (1 pixel back meaning 1 z-index back) it would appear that my image is starting and a pace that is gradually growing faster as it moves farther way. This is because things farther away appear slower.

So how would I know how much I should scale the image down when I set it like 100 pixels back? O.o

Re: Depth and perception.

Posted: Fri Mar 14, 2008 2:59 pm
by alex.barylski
I really don't know what it is your asking, but...

Are you looking just to zomm the image in or out? That is not technically setting the z-index -- that dimension adds 3D perspective to a viewport. I believe this is refered to as scaling:

http://en.wikipedia.org/wiki/Image_scaling

Re: Depth and perception.

Posted: Fri Mar 14, 2008 4:37 pm
by JellyFish
Sorry I've might not have been to clear.

What I'm trying to do is render a third dimension in a two dimensional space.

|■■■/
y|■■/■■
|/z■■
|/■■■■
¯¯¯¯¯¯¯
■■■x

How I would like to mimic this is to scale an image down gradually. If in every interval I subtract 1 pixel from my 100px high image the illusion will break. Sense when objects are farther away they appear to move and shrink more slowly, I could not keep scaling my image down 1px every interval. Instead I would have to scale it down lesser and lesser upon moving farther away from the viewers perspective.

So my question is: what determines the scale that the image would have to be in when pushed back into the z dimension? Is there some formula I could use? Would trigonometry be involved?

Re: Depth and perception.

Posted: Fri Mar 14, 2008 8:05 pm
by alex.barylski
So my question is: what determines the scale that the image would have to be in when pushed back into the z dimension? Is there some formula I could use? Would trigonometry be involved?
Honestly man, this is a subject worth it's own forum, I'm not sure I can be of much help.

When you introduce that 3rd dimension, you complicate things exponentially.

In a 2D space you have 2 transformations:

1) Scaling
2) Translation

When you add the Z dimension you need to calculate rotation.

To accomplish the effect you are after in PHP would be madness -- unless there was some extension library similar to GD which performed the calculations for you. 3D processing is a slow process, even in the best of environments.

Consider the likely steps required if you chose to move forward:

1) Calculate the 3D points for a rectangle, taking into consideration (translation, scaling and rotation).
2) Those 4 points now need to be filled or texturized, manually by you - this is the really difficult task.

Normally, one would use a API like OpenGL or DirectX to ease. I just did a quick Google for a PHP OpenGL extension:

http://developers.slashdot.org/article. ... /08/207210

Doesn't look very promising, likely because most people would just use another technology for 3D rendering. C/C++ are your best bet.

Calculation of three dimensional points is not very complex, but the flooding of those polygons is what is really killer (in terms of algorithm and CPU speed, etc).

I can dig up the formula for calculating 3D coordinates, but that is only half the battle. The flooding and shading, etc is what makes 3D what it is. It's really complex, especially if you don't understand the math involved -- which I don't. :P

In short, what you want to do, is going to be waaaay more work than what it's worth. You would be better off using JavaScript and VML, as opposed to native PHP.

Maybe something like this would help get you started:

http://www.dawnofthegeeks.com/software_ ... e=tutorial

Cheers :)

Re: Depth and perception.

Posted: Sat Mar 15, 2008 1:04 pm
by califdon
Although I agree with Hockey, as a general approach, perhaps you're talking about a simple mock 3D effect without rotation, shading, or any other complexity. In that case, the answer to your question is pretty simple: everything is linear. Things twice as far away appear half as large; because of that, speeds appear to be half as slow (since time doesn't change [unless you're talking about Einstein's relativity! :? ], things appear to move half as far in the same time, so they appear to be only half as fast). Thus, if you wanted your 100 x 100 pixel image to appear to recede into the distance at a constant rate, you would have to increase the time interval between successive size reductions in proportion to the size reductions. Your second diagram suggests that you would like to have it recede along a path (presumably approaching an invisible 'horizon line'). That complicates the task somewhat, since you're now talking not only size, but position. Again, everything is linear, because time is a constant, it's only the distance from your eye that is changing. I doubt that I've solved your problem, but maybe that will give you some insights. I guess my Physics degree was good for something, after all.

Re: Depth and perception.

Posted: Sat Mar 15, 2008 3:12 pm
by JellyFish
Oddly enough I never mentioned PHP, and sense Hockey suggested VML it wasn't quite my intension, but rather the HTML Canvas element(And VML for IE).

I don't really know where you might have gotten the idea that I would use PHP from. But I will be using javascript and Canvas/VML and I agree that that's more sensible then PHP.

Now really what I'm trying to do is this. Not exactly this but the image rotation.

I would like to be able to rotate 2d images in a 3d space, like coverflow or piclens. With the canvas element I could do this with a lot more speed compared to divs.

So I guess if there a place that talks about the math of 3d rendering that you could point me to? Not as 3d scene rendering but just 3d object rendering.

Thanks for your replies.

Re: Depth and perception.

Posted: Sat Mar 15, 2008 7:02 pm
by califdon
JellyFish wrote:I don't really know where you might have gotten the idea that I would use PHP from.
Well, this IS the PHP DevNet forum, I believe... :?

Re: Depth and perception.

Posted: Sat Mar 15, 2008 7:06 pm
by Chris Corbyn
SitePoint's new "The Art and Science of JavaScript" book has a tutorial on creating 3D effects with JavaScript and CSS by strategically applying crop to DIVs. One of the guys I work with wrote a walkthrough explaining how he created the DOOM platform in JavaScript as part of this section of the book.

Re: Depth and perception.

Posted: Sun Mar 16, 2008 1:50 pm
by alex.barylski
Well, this IS the PHP DevNet forum, I believe...
Thats what I was thinking...hahaha... :P

Re: Depth and perception.

Posted: Sun Mar 16, 2008 5:38 pm
by JellyFish
Hockey wrote:
Well, this IS the PHP DevNet forum, I believe...
Thats what I was thinking...hahaha... :P
Oh. Right.

My original question was more a mathematical one. What's the math in 3d object rotation?

Re: Depth and perception.

Posted: Fri Mar 21, 2008 10:50 am
by Jonah Bron
Do you mean with Javascript? Like this?

Code: Select all

 
<img src="image.jpg" id="pic" width="100" height="100" style="z-index:1;" />
 

Code: Select all

 
var increment = 6;
function resize(){
    hei -= increment;
    increment--;
    document.getElementById('pic').width -= increment;
    document.getElementById('pic').height -= increment;
    document.getElementById('pic').style.zIndex++;
    var x = setTimeout('resize();', 100);
}
resize();
 
Or am I misunderstanding?

Re: Depth and perception.

Posted: Sat Mar 22, 2008 11:10 pm
by JellyFish
It's probably to confusing of a question, that I'm asking.

But here it goes, in more detail.

What size would a 100x100 inch painting be 5 inches away from your face?

What's more important then the actual calculated answer to this problem, is the solution/formula/algorithm to this problem.