DollyZoom.js – A 3D interactive experiment for the web browser

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 snapshop
Click the image to run DollyZoom.js on your web browser!

DollyZoom - 2 scenariosDollyZoom.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.

DollyZoom.js - Framing with a wide zoom.
Framing the scene near the chessboard with a wide zoom.
DollyZoom.js - Framing with long zoom.
Framing the scene away from the chessboard with a long zoom.

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.

The Dolly Zoom is also called “Vertigo Zoom” after the famous bell tower scene in Hitchcock’s film, Vertigo (1958).

 DollyZoom.js code

DollyZoom.js is a free piece of software, authored by Alvaro Santamaria and released under the GNU General Public License (Version 3).  The source code is published in GitHub. It is written in JavaScript using third-party libraries (mainly three.js, jQuery and RequireJS) and my own set of lightweight, auxiliar libraries, also available in GitHub:

  • acti0.js  – JavaScript framework for building interactive visualizations in the web browser. (Previous post about acti0.js here).
  • event0.js – Javascript Event-Emitter-Receiver implementation with a twist
  • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

Aviso de cookies