# Key out color from video

**URL:** <https://discourse.processing.org/t/key-out-color-from-video/324>\
**Category:** Coding Questions\
**Created:** [May 24, 2018, 2:29am UTC](https://discourse.processing.org/t/key-out-color-from-video/324 "2018-05-24T02:29:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dazadas\_k](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dazadas_k/32/169_2.png) [@dazadas\_k](https://discourse.processing.org/u/dazadas_k)\
**Post date:** [May 24, 2018, 2:29am UTC](https://discourse.processing.org/t/key-out-color-from-video/324/1 "2018-05-24T02:29:16Z")

</div>

Hey guys!

I was wondering - Is it possible to key out green screen from video  
and replace it with a picture? 🙄

In a result I imagined that the video is still playing, but all the green space is filled with my picture file.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [May 24, 2018, 3:59am UTC](https://discourse.processing.org/t/key-out-color-from-video/324/2 "2018-05-24T03:59:16Z")

</div>

This is called chroma key. Check this: [https://forum.processing.org/two/discussion/comment/104666/#Comment\_104666](https://forum.processing.org/two/discussion/comment/104666/#Comment_104666)

Kf

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 25, 2018, 3:15am UTC](https://discourse.processing.org/t/key-out-color-from-video/324/3 "2018-05-25T03:15:30Z")

</div>

There are several ways to solve the problem of green screen / chroma key to do background replacement.

The basic approach is to check for a specific color value or small value range in image A and, when you find it, replace that pixel from the same pixel in image B. This can apply to image-image, image-video, video-image, or video-video.

There are a [lot of past conversations about doing chroma key in Processing](https://www.google.com/search?q=chroma+key+processing.org).

Three basic approaches to making this happen in code:

1. loop through pixels x, y in two nested loops, check the value, and replace if it matches. This is slow.
2. loop through the pixels[] array, check the value, and replace if it matches. This is faster.
3. use a PShader – this is even faster, but also requires writing a glsl shader, which is more complex. Example: [https://github.com/Prince-Polka/chroma\_key](https://github.com/Prince-Polka/chroma_key)

In addition, there are two ways of checking the value for approaches 1 and 2:

1. use `red()` `green()` and `blue()`, which is slow
2. use `>>` [right shift](https://processing.org/reference/rightshift.html), which is fast.