Instagram Filter Lab with RGB Colors & JavaScript (p5.js)

Photo by Alejandro Garrido Navarro on Unsplash

This lab assumes familiarity with JavaScript for loops and arrays, including accessing an element by the index. It is adapted from a tutorial that uses knowledge learned from a CC Fest LA workshop.

RGB Colors

You may have learned in your art classes about primary colors: red, blue, and yellow. Mixing these colors leads to new colors: for instance, blue and yellow make green.

Computers work in a similar way, but with different colors: red, green, and blue (RGB). Each pixel on a computer screen projects a certain amount of each color (red, green, and blue). By mixing these colors, the screen is able to project the full color spectrum.

To express the different amounts of red, green, and blue, programmers use hexadecimal colors and RGB colors. Today, we will focus on RGB colors.

In languages like CSS, RGB colors are expressed with the following syntax:

rgb(0, 0, 0)

where the three digits in parentheses correspond to the amounts of red, green, and blue, respectively (same order as the letters rgb). Right now, all the digits are at 0, making black (because none of the colors is turned on).

However, if we want to project all red, we can turn the first digit (the red value) all the way up to 255, the max:

rgb(255, 0, 0)

Now it’s your turn to create some colors using RGB form. You’ll use values between 0 (none) and 255 (max) to tell the computer how much of that color to project.

Activity: Exploring RGB colors

Go to the RGB Explorer and answer the following questions, supplying RGB values in the syntax described above when necessary.

  1. What RGB values create red?
  2. What RGB values create green?
  3. What RGB values create blue?
  4. What color appears when you turn up red and green to 255 and leave blue at 0?
  5. What color appears when you turn up red and blue to 255 and leave green at 0?
  6. What color appears when you turn up green and blue to 255 and leave red at 0?
  7. What RGB values create black?
  8. What RGB values create white?
  9. Create three other colors. Name the color (e.g. “light blue”) and record the RGB values.

For loop review

Images are often stored in arrays of pixels. Because each pixel has a red value, green value, blue value, and something we won’t get into right now called an alpha value, a pixel may take up four elements in the array.

To alter images, it is often necessary to iterate over an array of pixels. One standard way of iterating over an array is with a for loop.

In JavaScript, the syntax for a for loop is:

for (var i = 0; i < arr.length; i++) { ... }

where the variable arr stores an array. The for loop’s initialization sets var i = 0, establishing a counter variable. Its condition for continuing is i < arr.length: it will keep looping until, using the counter variable i, it detects that it has reached the end of the array. Finally, its update at every loop is to increment i by one: i++.

Happily, the variable i not only serves as a counter, but also holds the index of the current array element as we loop through it.

Inside the for loop, we can access the current element of the array arr with the following syntax:

arr[i]

For instance, if I wanted to loop through the entire array arr and print the contents of every element, I would write:

for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

Now we will use arrays and for loops to iterate an over an array of pixels and make an Instagram-style filter!

Activity: Making a filter

Go to the Filter Lab Starter Code. You will be able to put a filter on your own webcam image!

Click the pink play button and allow Google Chrome (recommended browser) to show your unfiltered image.

If your camera is not working, restart your browser (preferably Google Chrome) or even your computer and make sure to press “Allow” when your computer asks to use the webcam. If you are still having trouble, pair up with a classmate whose camera is working.

You will write your solution code underneath the line where it says // Start here.

The variable capture.pixels contains an array that has four values listed in sequence for each pixel of the image: its red value, green value, blue value (RGB values), and the fourth alpha value that we’re going to ignore.

Your task: Iterate over the array. At every fourth index, you can alter the nearest red, green, and blue values (you may need to look for the value at the index, index + 1, etc). For instance, to increase redness in your filter, you might multiply the red value by two.

Click the pink play button at any time to check if you are successfully altering the colors.

Stuck? Be sure that you are modifying the actual elements in the capture.pixels array itself. If you’re really stuck, you can also scroll down for a peek at the solution code.

Play with editing the RGB values until you find a filter that you like! Take a screenshot.

Solution

Warning: if you proceed without attempting to solve the problem yourself, you will lose out on an opportunity to build your critical thinking skills!

View the solution here.

Here is the solution code:

for (var i = 0; i < capture.pixels.length; i += 4) {
// Edit the red value
capture.pixels[i] *= 1;
// Edit the green value
capture.pixels[i + 1] *= 1;
// Edit the blue value
capture.pixels[i + 2] *= 1;
}

In this code, we are iterating over every fourth element of the array, as you can see from i += 4 in the for loop.

The current element i contains the red value. One pixel over, i + 1 contains the green value. Two pixels over, i + 2 contains the blue value.

In the solution code above, we are multiplying the RGB values by one, which has no effect. However, if you wanted to increase the red value, you might multiply it by two instead. If you wanted to give the filter a magenta hue, you might increase the red and blue values while decreasing the green value.

Play around with multiplying different numbers to give your filter the desired hue!