Exercise: JavaScript Green Screen Image Filter
For this exercise, instead of focusing on the document's structure and style (HTML and CSS), use JavaScript to computationally change images that are uploaded to the page. This means you will not need to edit the HTML or CSS files, but you will need to understand their contents to attach your JavaScript code to the events that can be generated.
Implement the green screen (also known as "chromakey") algorithm typically used in movies or news weather broadcasts to make the characters appear to be in a different location than they really are. It works by compositing a foreground image with a background image by replacing all the "green" pixels in the foreground image with the corresponding pixel from the background image. Green is the easiest color to match but you need to be a little forgiving in the amount of green you require since any real set has shadows or highlights so it is not a uniform shade of green. Of course, if you are too permissive, then you might match parts of the characters outfits making it appear like they are see through!
A basic version of the algorithm is fairly simple: combine the pixels from two images into one image by using the "greenness" of the foreground image to determine whether or not to use the background image pixel instead in the new image. Greenness can be difficult to determine, but the easiest way is to assume that pixels with a high green pixel value represent green (regardless of its red and blue values). That does not work in general, but it does in typical color images shot in front of a green screen. How high is a high green pixel value? That can differ for different green screens, but 240 is a good general estimate. As a bonus, you can make a version that lets the user dynamically set the green threshold (and even updates the resulting image dynamically --- for small images!).
Your JavaScript code should be initiated by events generated by HTML input
DOM elements and use the HTML canvas
DOM element (you will not need to learn its drawing API, it is just a place on your page to display the uploaded image) and the JavaScript SimpleImage
class, documentation and code (which you do not need to understand or download locally to complete this project), to manipulate the individual pixels of the image. Use this example, running version and code, as a guide for your work.
The starting repository has some example images to start with but you can, of course, use your own images as well. You can even buy your own green screen so you can create your own green screen studio!
You are encouraged to explore JavaScript, and its effect on a page, using the Developer Tools with the debugger (to stop the page and step through the code!) and the JavaScript Console (to print results and interactively call your code!).
Practice using the basic GIT workflow commands (add
, commit
, and push
). After you have completed a "task" or "feature", make a GIT commit
with an appropriate comment and after and regularly push
your changes to Gitlab so your online repository reflects your work and you can see how it looks on the live web.