With all the recent news about Rogue One, I wanted to pay a tribute to the Star Wars franchise. One interesting change I noticed in the new movie was a lack of scrolling introductory text before the beginning of the film. This sparked me to do research on the signature scrolling introduction used in Star Wars.
It turns out that this sequence is known thorughout the film industry as the “Star Wars opening crawl” and is widely regarded as one of the most effective and recognizable cinematic devices ever used. It appears in every numbered Star Wars movie (so every movie except for Rogue One) and has changed slightly over the years.
One interesting fact about the crawl is that when the original trilogy was filmed in the late 70’s, they didn’t generate this text with a computer; it was all done by hand. The production company actually printed all the text onto a 2’ by 6’ black sheet and filmed by hand very carefully to obtain the smooth scrolling effect.
Luckily, there is already a lot of research and information about the opening crawls available online. I found information about the fonts and colors here. The text displayed was taken from Wookiepedia.
The most difficult part of using CSS was in step three where the text looks as if it’s floating off into the distance. This turns out to be a case referred to in geometry as Single Point Perspective. Without diving too deep into specifics of projective geometry, the scene shown in the original crawl was a portion of a two-dimensional plane viewed from a point of observation somewhere in space.
This point of the observer is called the point of perspective. It turns out that if we assume the size of the object in the plane (just choosing an arbitrary font size, since it’s relative) then we can estimate the point of perspective. We can also find the angle of rotation of the plane by measurin the angle between the normal and the angle of the receding text. Using the chosen font size along with the point and angle that we found, we can reproduce almost exactly the effect of perspective from the original recording.
This was a proof-of-concept production and I didn’t pay much attention to things like margins, angles, and kerning. Since the original version wasn’t made with a computer, these would never match exactly anyway. Also, if you’re not using Google Chrome, there’s a good chance that something might not look right.