The dolly zoom is an unsettling in-camera effect that appears to undermine normal visual perception. It is part of many cinematic techniques used in filmmaking and television production. (Dolly zoom, Wikipedia).
DollyZoom.js is a small, interactive web aplication that strives to show and help understand how the dolly zoom effect is achieved. As a side effect it is a way of learning the concept of framing in photograpy. There are two ways of framing a scene with a camera. One is using your feet, i.e., moving your camera towards or far away from the scene. In cinema, this camera movement is called dolly. The second way of framing is by changing the focal length of your camera’s lense, i.e., zooming in or out. Both methods are not equivalent as the results on the final image are very different. Dolly changes perspective while zoom does not. (On the other hand, zoom changes depth of field in a different way than dolly does, being this effect more complex and not depicted in the application). Nearby objects can be framed either by dollying or zooming, but very far objects (i.e., the background) can only be framed by zooming. All in all, the synchronized use of both framing methods yields the eye-catching dolly zoom effect.
This set of concepts are better grasped experimenting them in an interactive and playful manner, and this is what DollyZoom.js strives for. Run DollyZoom.js here. Warning: DollyZoom.js only runs on browsers that support the WebGL technololgy, which brings 3D interactive graphics to the web browser. You can check if your browser supports WebGL in Can I Use and update it if need be and if the combination of your device and browser qualifies. You are encouraged to view the presentation first and play interactively with it afterwards.
The application deals with the technical concepts of dolly zoom. However, its application in filmmaking has very important artistic implications, mainly related to the psychological state of the main character. About this, Vashi Nedomansky has made an outstanding video compilation titled Evolution of the Dolly Zoom, and a very nice article. A quote from this article serves as a summary. Nevertheless, I strongly encourage to go through both the article and video compilation.
It’s clear that EMOTIONAL INVESTMENT is the key to making this specialized shot work and not come across as just a trick shot. (Vashi Nedomansky)
Also highly recommended, the series of articles and video titled “Mastering the Art of the Dolly Zoom” by John P. Hess.
- ongoing.js – Asynchronous programming with ongoing tasks: an alternative to futures, promises, deferreds and the like.
You are welcome to fork and improve it with fixes, features and additional scenes! I will be delighted to receive any kind of feedback.