The Dolly-Zoom effect

Blitz3D Forums/Blitz3D Programming/The Dolly-Zoom effect

Kryzon

(Posted 2013) [#1]

Also known as the "vertigo effect", the dolly-zoom is a cinematographic camera effect achieved by zooming in the camera and moving it away from the subject (or inversely, zooming out and moving it closer to the subject).

You get this:

While the subject's appearance remains pretty much the same, the background and surrounding elements all expand or diminish in a sort of unsettling way because the perspective is changing.

The math behind it, in simple words, consists of finding what position the camera needs to be at if it zooms with a certain field-of-view - you are compensating for the loss of view by "physically" moving the camera.
It's not an approximation, it's the ideal value.

Blitz3D code:

;Use the MOUSE to orbit the camera.

;Hold the A or Z keys to perform the "dolly-zoom".

;The only thing that moves in this demo is the camera.

AppTitle "Dolly-Zoom effect - Kryzon - 2013"
Graphics3D 800,600,0,2
SetBuffer BackBuffer()
SeedRnd MilliSecs()

;Original distance from camera to subject.
;This would be the distance from the camera to your character, for instance.
Const ORIGINAL_DISTANCE# = -20

;Original field-of-view (or zoom value) for the camera.  
Const ORIGINAL_FOV# = 90.0


Local camPivot% = CreatePivot()

Local camera% = CreateCamera(camPivot)
	PositionEntity camera,0,11,ORIGINAL_DISTANCE
	CameraRange camera,1.0,1000   
	SetCameraFOV(camera, ORIGINAL_FOV)

Local subject% = CreateSphere(32)
	PositionEntity subject,0,7,0
	ScaleEntity subject,2,2,2
	EntityColor subject,190,190,190

PointEntity camera,subject


;Unimportant bits ____________________________________________________________
Color 150,170,255

Local mirror% = CreateMirror()

Local mirrorMatte = CreatePlane()
	EntityColor mirrorMatte,0,80,120
	EntityAlpha mirrorMatte,0.8

Local sunLight% = CreateLight(1)
	RotateEntity sunLight,30,60,0

Local tempBlocks% = CreateMesh()
Local tempBlock%
Local tempValue#
Local tempRadius#
For I = 1 To 10
	tempBlock = CreateCube()
	tempValue = Rnd(0.1,0.4)
	ScaleMesh tempBlock,tempValue,tempValue,tempValue
	RotateMesh tempBlock,Rand(0,350),Rand(0,350),Rand(0,350)
	
	tempRadius = Rnd(0.75,2)
	tempValue = Rand(0,359)
	PositionMesh tempBlock,Cos(tempValue)*tempRadius,0,Sin(tempValue)*tempRadius
	tempValue = Rnd(0.6)
	PositionMesh tempBlock,0,tempValue,0
	 	
	AddMesh tempBlock,tempBlocks
	FreeEntity tempBlock
Next
EntityColor tempBlocks,0,80,120
ScaleEntity tempBlocks,50,50,50
;_______________________________________________________________________________


Local FPSTimer% = CreateTimer(60)
Local tempFOV# = 90.0
Local compensationValue# = 0.0

While Not KeyHit(1)
	WaitTimer(FPSTimer)
	
	tempFOV = tempFOV + KeyDown(44)*0.5 - KeyDown(30)*0.5
	
	;Notice when you go above 200% compensation the distortion is 
	;so big that even moving the camera won`t help. The subject will
	;get distorted as well.
	
	;Calculate the percentage of the original distance that needs to be 
	;travelled by the camera in order to keep the subject`s original appearance.
	compensationValue = (Tan(ORIGINAL_FOV/2.0))/Tan(tempFOV/2.0)
	
	;Position the camera at the transformed original distance from the subject.
	PositionEntity camera,0,11,(ORIGINAL_DISTANCE * compensationValue),False
	
	SetCameraFOV(camera, tempFOV)
	PointEntity camera,subject
	TurnEntity camPivot,0,MouseXSpeed()*0.5,0,True 
		
	UpdateWorld()
	RenderWorld()
	
	Text 10,10,"Zoom (FOV): "+tempFOV
	Text 10,30,"Depth Compensation: "+(1.0/compensationValue)*100.0+"%"
	Text 600,10,"Use the MOUSE, A and Z."
	
	Flip
Wend

;SetCameraFOV function by Sswift.
Function SetCameraFOV(Camera, FOV#)
   CameraZoom Camera, 1.0 / Tan(FOV#/2.0)
End Function

End

...and an executable version for the people who don't have Blitz3D right now but still want to see it in action: dollyZoom.zip

Now imagine in your game you look down a cliff and play this effect. Good stuff.

Last edited 2013

Floyd

(Posted 2013) [#2]

I don't quite see the point of all those FOV and compensationValue calculations.

Zoom factor and size on screen are directly proportional; if the CameraZoom doubles then the size on screen doubles.
( For a 3D entity that's approximate because different parts are different distances from the camera )

That means you must adjust distance and zoom so their ratio is unchanged. See CameraZoom in this example.

Graphics3D 800, 600, 0, 2
SetBuffer BackBuffer()
HidePointer

sphere = CreateSphere()
camera = CreateCamera() : PositionEntity camera, 0, 5, -5 
CameraRange camera, 0.5, 1000 : PointEntity camera, sphere
TurnEntity CreateLight(), 30, 70, 0
VariousOtherThings 30

RenderWorld : Flip : Delay 1000  ; How it looks before we move the camera.

zoom_over_distance# = 1.0 / EntityDistance( camera, sphere )   ; CameraZoom is 1.0
While Not KeyDown(1)
	z# = EntityZ( camera )
	If KeyDown(44) Then z = z * 1.01
	If KeyDown(30) Then z = z / 1.01
	PositionEntity camera, 0, -z, z
	CameraZoom camera, zoom_over_distance * EntityDistance( camera, sphere )
	PointEntity camera, sphere
	RenderWorld
	Text 10, 10, "  Distance = " + EntityDistance( camera, sphere )
	Text 10, 30, "CameraZoom = " + zoom_over_distance * EntityDistance( camera, sphere )
	Flip
Wend


Function VariousOtherThings( quantity )
	For n = 1 To quantity
		Select Rand( 1, 4 )
			Case 1 : temp = CreateSphere()
			Case 2 : temp = CreateCone()
			Case 3 : temp = CreateCylinder()
			Case 4 : temp = CreateCube()
		End Select
		ScaleEntity temp, Rnd( 0.6, 1.5 ), Rnd( 0.6, 1.5 ), Rnd( 0.6, 1.5 )
		EntityColor temp, Rand( 100, 255 ), Rand( 100, 255 ), Rand( 100, 255 )
		RotateEntity temp, Rnd( -20, 20 ), Rnd( -50, 50 ), Rnd( -20, 20 )
		angle# = Rnd( -45, 225)
		dist#  = Rnd( 2.5, 6 )
		PositionEntity temp, dist * Cos( angle ), Rnd( - 3, 3 ), dist * Sin( angle )
	Next
End Function

Trivia note: I checked imdb.com after seeing this thread. Kim Novak, the star of Vertigo, turns eighty in a few weeks.

Last edited 2013

Kryzon

(Posted 2013) [#3]

Well, that just blew my mind good sir.

This is my reasoning behind the FOV calculations:

I was also thinking about using camera scale. If you scale a camera's Z axis you get the same effect as zooming, and since you're compressing/expanding the space that the camera can see, you simply modulate (multiply) the distance to the subject based on the inverse of that scale to compensate.

Most engines don't work with Blitz3D's zoom factor method, only with FOV angles, so there's not much to do besides using the above.
Anyway, your example illustrates the effect very well - can I produce a Code-Archive entry with it?

Last edited 2013

Floyd

(Posted 2013) [#4]

can I produce a Code-Archive entry with it?

Sure, it's just a single multiplication.

To unify our methods, Blitz3D uses the concept of zoom while another common approach uses FOV.
As seen in the SetCameraFOV function they are related by

Zoom = 1 / Tan( FOV / 2 )

Now we have Zoom, D, FOV and also Zoom', D', FOV'. In the middle equation at the bottom of your diagram is

D' = D * Tan( FOV / 2 ) / Tan( FOV' / 2 )

We can rearrange this to D' * Tan( FOV' / 2 ) = D * Tan( FOV / 2 ).

Finally, replace both Tan( FOV / 2 ) with the appropriate 1 / Zoom to get

D' / Zoom' = D / Zoom

This is exactly what I was using in my example. D and Zoom both vary, but the ratio D / Zoom stays the same.

Kryzon

(Posted 2013) [#5]

Thanks for the keen explanation.

In case someone stumbles on this thread, the archive entry is here: http://blitzbasic.com/codearcs/codearcs.php?code=3014
The FOV and distance ratio methods give the same results, but the Z-scale I mentioned earlier seems to disrupt the lighting of the scene.