Building House with Blocks

Building House with Blocks

This is a response to a movie's average colors by Thorsten Basse.

I had seen this technique a few times and had always put it in the back of my mind to try later. Turned out it was easier than I thought (I think it took me about an hour start-to-finish to do the code). I figured this would also give me a chance to battle test WebKit and see what it could do.

This page contains 26,612 divs, one for each block. Each block, in turn, represents 2 frames of the video, so you get roughly 15 blocks for each second of video. For 30-minute or one-hour shows I thought it might be interesting to see a more detailed look. For feature-length movies I think I'd probably stick with the 1 block per second thing. Otherwise you'd end up with around 200k divs for the browser engine to render. Come to think of it that might be an interesting test.

That said, this is a screen grab from WebKit and it hasn't been photoshoped so there might be a couple of little oddities at the pixel level. Just don't look. ;) It takes Safari about 10 seconds or so to render the image. This is based on the time it takes to blit to screen after a window resize.

I cache the computed data so I only have to analyze the image files once (obvious, but you may be interested) and can reload the page after that without consequence.

Tags & Categories

Latest Comment

  • No Comments Yet.
Add Comment   View All (0)

Image data

Camera
ISON/A
ApertureN/A
Exposure0 sec
Focal LengthN/A
Exposure Bias0.00
Building House with Blocks

Building House with Blocks

This is a response to a movie's average colors by Thorsten Basse.

I had seen this technique a few times and had always put it in the back of my mind to try later. Turned out it was easier than I thought (I think it took me about an hour start-to-finish to do the code). I figured this would also give me a chance to battle test WebKit and see what it could do.

This page contains 26,612 divs, one for each block. Each block, in turn, represents 2 frames of the video, so you get roughly 15 blocks for each second of video. For 30-minute or one-hour shows I thought it might be interesting to see a more detailed look. For feature-length movies I think I'd probably stick with the 1 block per second thing. Otherwise you'd end up with around 200k divs for the browser engine to render. Come to think of it that might be an interesting test.

That said, this is a screen grab from WebKit and it hasn't been photoshoped so there might be a couple of little oddities at the pixel level. Just don't look. ;) It takes Safari about 10 seconds or so to render the image. This is based on the time it takes to blit to screen after a window resize.

I cache the computed data so I only have to analyze the image files once (obvious, but you may be interested) and can reload the page after that without consequence.

Tags & Categories

Image data

Camera
ISON/A
ApertureN/A
Exposure0 sec
Focal LengthN/A
Exposure Bias0.00

Latest Comment

  • No Comments Yet.
Add Comment   View All (0)