Summit Stories

Extrapolating photos for immersive zoom views

Johannes Treitz on August 20th, 2013 in Technology

Have you ever noticed how movie or video projectors not only paint an image onto the canvas but bathe the whole room in an atmospheric light?

TV manufacturer Philips brought this effect into the living room by attaching CCFL tubes and later LEDs on their TVs backsides to illuminate the wall with the color of the neighboring screen area.

I loved the idea. So when we worked on the full-screen view for Chromatic, I thought, why not do the same with this vacant black space?

After some less successful trials using mean color values, we came up with a surprisingly easy solution. We took the same photo (smaller size is okay), applied a heavy gaussian blur and stretched it to cover the entire background.

If you are to do this in CSS you might want something like this:

position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url(blurred.jpg); background-size: 100% 100%; /* stretch */

Certainly, the background shouldn't be too bright (for the same reason cinemas are covered in black velvet), so we better tint it a bit. Also, because of the heavy blow-up, there might be some nasty banding artifacts. Adding a subtle gradient pattern on top reduces these artifacts drastically.

Again, in CSS:

background-image: url(tint-and-grain.png), url(blurred.jpg); background-size: auto, 100% 100%;

Lastly, you might want to add some bevel and a drop shadow to the foreground photo:

box-shadow: 1px 1px 0 rgba(255,255,255,0.1) inset, 0 0 1px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.5);

Summary

  1. Resize photo to <800x800, keep original aspect ratio
  2. Apply heavy gaussian blur (around 100px on the Photoshop scale)
  3. Stretch to cover entire viewport
  4. Add semi-transparent grain pattern
  5. Add foreground photo and drop shadow

Further reading

Tweet about this