# Movie Color Visualization

**URL:** https://discourse.processing.org/t/movie-color-visualization/2285
**Category:** Gallery
**Created:** [August 1, 2018, 8:39pm UTC](https://discourse.processing.org/t/movie-color-visualization/2285 "2018-08-01T20:39:18Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [August 1, 2018, 8:39pm UTC](https://discourse.processing.org/t/movie-color-visualization/2285/1 "2018-08-01T20:39:18Z")

</div>

Inspired by my [comic book colors](https://discourse.processing.org/t/comic-book-colors/1824) project, I just put together a few visualizations of the colors used by various movies:

> **[Movie Colors](https://happycoding.io/gallery/movie-colors/)**
>
> Every frame a line, every line a color.

So far I’ve played around with two different visualizations. The first one shows a movie as a [timeline](http://happycoding.io/gallery/movie-colors/timelines) of the colors used in each frame. For example here is Finding Nemo:

 ![Finding Nemo color timeline](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/b8eb8b56bdb3afaa47d1367ce1f709d18f154237.png)

The other visualization creates a [multiple exposure](http://happycoding.io/gallery/movie-colors/multiple-exposures) by combining every frame of a movie into a single image. Here’s Finding Nemo again:

![Finding Nemo multiple exposure](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/c300fe8c1e02e8f63b3f09044d5a59ca4fc75a74.jpg)

At first glance this is just a dull blue image, but the fun thing here is if you squint hard enough, you can see some common elements of the movie, formed by images that show up often in the frames.

---

<div class="post-metadata">

### Author: ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)
#### Post date: [August 3, 2018, 7:12am UTC](https://discourse.processing.org/t/movie-color-visualization/2285/2 "2018-08-03T07:12:57Z")

</div>

Hi Kevin!  
I think this is great! I liked how you used k-means instead of average as a better representation of simply averaging the entire frame in your previous project. I wonder if there’s still a way of averaging in a better way. What if you were able to restrict the sample of your averages to certain areas/masks? For instance:

```python
def setup():
    global comic
    size(477,733)
    noStroke()
    
    #Loading a comic (or movie frame?)
    comic = loadImage("comic.png")
    
def draw():
    #image(comic,0,0)
    background(255)
    
    rectCapture(comic,mouseX,mouseY,40,40)
    
    #Rule of Thirds columns
    # for i in range(3):
    # rectCapture(comic,i*width/3,0,width/3,height)
    
    # #Rule of Thirds rows
    # for i in range(3):
    # rectCapture(comic,0,i*height/3,width,height/3)
    
    #Grid Capture
    # for i in range(0,width,50):
    # for j in range(0,height,50):
    # rectCapture(comic,i,j,30,30)
    

def rectCapture(someImage,x,y,w,h):
    colors = []
    for i in range(w):
        for j in range(h):
            colors.append(someImage.get(x+i,y+j))
    fill(averageColors(colors))
    rect(x,y,w,h)

def averageColors(alist):
    averagedColor = [0,0,0]
    for i in alist:
        averagedColor[0] += red(i)
        averagedColor[1] += green(i)
        averagedColor[2] += blue(i)
    averagedColor = [1.0*i/len(alist) for i in averagedColor]
    return color(*averagedColor)

```

You can comment out different masks above as an illustration of what I mean. It’s possible to think of other masks to analyze frames from seeing how [movie frames are composed](https://www.google.com/search?q=movies+compositions&safe=strict&tbm=isch&source=lnms&sa=X&ved=0ahUKEwjcuMeFntDcAhUkCsAKHXXBARkQ_AUICygC&biw=1163&bih=531&dpr=1.65#imgrc=FCHlqJ2FGa90oM:) (or even comics composition).

Maybe masks need not be rectangular, maybe it could be linear, just as an approach that doesn’t favor the background over the foreground elements in a composition.

Also, I wonder if the final visual could be animated. It could be a series of interpolations between one set of masked averages to another. Maybe analyzing the averages of Warm/Cool colors in a composition through time. If you have access to the subtitles, perhaps what’s the average sentiment from one set of colors to the next?

Just wanted to suggest some ideas. I liked your analysis and I think there’s so much potential in it. I think I’m conflating this visualization with your comic books project, but I forgot to reply to the previous one and I think they’re both related.

---

<div class="post-metadata">

### Author: ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [August 3, 2018, 5:57pm UTC](https://discourse.processing.org/t/movie-color-visualization/2285/3 "2018-08-03T17:57:50Z")

</div>

Hey thanks for the feedback!

For the movie visualization, I did just use the basic average. This isn’t perfect, and there’s a lot of research on this topic. Apparently it’s better to use something called [lab space](https://en.wikipedia.org/wiki/CIELAB_color_space) to calculate the average color. For my purposes this is overkill, but it would definitely be an interesting extension to the project.

> [@WakeMeAtThree](#):
>
> Also, I wonder if the final visual could be animated. It could be a series of interpolations between one set of masked averages to another. Maybe analyzing the averages of Warm/Cool colors in a composition through time. If you have access to the subtitles, perhaps what’s the average sentiment from one set of colors to the next?

There are a lot of really interesting next steps that could be taken. One thing I thought about was taking the colors of one book / movie and applying them to another book / movie. What would American History X look like with Finding Nemo’s colors?

The process and source code I used is available [here](http://happycoding.io/gallery/comic-book-colors/code.html). If this stuff is interesting to you, I definitely encourage remixes of the code!

---

<div class="post-metadata">

### Author: ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)
#### Post date: [August 3, 2018, 8:00pm UTC](https://discourse.processing.org/t/movie-color-visualization/2285/4 "2018-08-03T20:00:00Z")

</div>

I think I see a shark coming in the final image LOL. Nice idea, I could see this being used for forensics
