Green Screen — For Beginners
Implementing a green screen conversion is not a difficult coding topic. Throughout the various introductory Computer Science courses, I have taken, this topic appears rather frequently. It appeared in Stanford University’s CS 101 as well as Duke University’s Programming Foundations with Javascript, HTML, and CSS.
Simply put, the way to implement the Green Screen Algorithm is to take an image with certain properties that you would like to impose on another image, we will call this ‘image one’. We then take an image that has a background that we would like to see in the first image, we will call this ‘image two’.
The goal of the green screen is to recognize the pixels that have green values of a certain point and replace them with the pixel in the same location within the other image.
The goal is to take image one and replace every green pixel with the pixel in the same location in image two. As you can see in the example above, you take the first image with the girl, scan the image for pixels that meet a certain green pixel value and replace that pixel with the pixel in the same location within image two. This systematically goes through pixel by pixel and changes each green pixel to the pixel of the background image which provides image three, the solution.
For instance, if you were to code in JavaScript, you would use the functions getX and getY. These functions would allow you to get the location of the pixel’s x and y location. You would repeat this for both images; I recommend using a for loop for this entire block of code. You would then analyze pixel1 and pixel2’s Red, Green, and Blue values. To do this, you would use the code getRed(), getGreen(), and getBlue() respectively. Create a conditional where you check if getGreen() is greater than or equal to some value (I typically choose 235), then set pixel3’s RGB (Red, Green, Blue) values to that of pixel2, otherwise, set pixel3’s RGB values to that of pixel1. Once you have done that, the for loop will repeat for each pixel in the image.
The process is rather simple and a perfect challenge for a beginner. If you have any questions, please let me know!
Thank you for reading!
