Page 8: Displays and Frame Rate

On the next page, we’ll continue our discussion of web programming by introducing the event-driven programming paradigm and describing how we implement animation within it.

But, in order to talk about animation, we need to talk about frame rate and how displays work. This is one of those things which is simple on the surface, but turns out to have deep connections to the science of human perception.

In the past, this was covered in the lectures, not in the workbooks:

This video covers the topic well - with some student questions that get at some of the details. But, it also gets ahead a little bit to talk about some of the concepts on the pages coming up.

The things you need to know…

1. Most displays flash at some constant rate.
2. The display only gets updated at a specific instant for each flash.
3. We draw into a back buffer that is not shown to the display. When we are done drawing, we allow the back buffer to be written to the front buffer (so it is seen by the display). This operation is called swap because historically, the front and back buffers were switched (the old front buffer became the new back buffer). Because there are two buffers (front and back), this is called double buffering.
4. If we swap twice between flashes, the viewer will never see the first thing shown. The second one will replace it before the screen flashes it. Therefore, after we show one thing, we wait until after the display flash to show the second. This is one type of display synchronization.
5. The web browser takes care of this for us. But we need to learn about how.

You might be curious how quickly your web browser can flash, so I made a gadget and put it on this page. It uses the requestAnimationFrame technique discussed on the next page. If you’re not curious about your computer, go on to Next: Page  9 - Animation Loops.

What is the rate of your computer?

The actual refresh rate that you can achieve in a web browser is based on a number of factors: the display, the hardware, the software, the operating system.

And it does vary. Even on my computer (a 2023 MacBook Pro) in Chrome, the refresh rate is 60fps on my external monitor, and 120fps on the built-in LCD display of the laptop. If I move a window from one screen to another, the rate changes.

To check your computer, here is a little gadget that I wrote:

This estimates the frame rate. It also shows you the “most common” timings that come up. While the actual display refreshes at a very specific rate (e.g. 60 or 120 times per second), the measured performance is a little different (because of rounding, delays because of processing, etc.).

Now that we’ve discussed frame rate, let’s see how to program animation with it in the browser.

Next: Page  9 - Animation Loops