using the webcam in p5js

Get the pixels from the webcam with this:

https://p5js.org/reference/#/p5/createCapture

In this example, we'll update text and the fill color of a rect based on the captured image and the mouse position. You can read the four values under the mouse (R, G, B, and A) next to the “capture” text.

In this version, we'll assign the pixel value to a variable and then make use of it in three places. We've talked about mapping, so we'll map the size of the rect to the the red value of the pixel (R), which is the first value (0 index) of the array.

The idea of 'mapping' in this case is to create a correlation between two values.

Now that you understand that, let's use each of the color values. We'll just visualize the R, G, and B values of the pixel under the mouse in three separate rects. We'll also map the x position of those rects to this value.

That's cool, but there's a lot of jitter. We can make the animation look smoother if we use what is sometimes called a moving average. What we'll do is:

1. capture the values of the pixel under the mouse at each frame
2. take the average value for R, G, B, and A over a period of 10 frames
3. use the new array of average values as the basis for our mapping

To do that, we have to have some other functions:

1. transpose, which lets us rotate the collected values so that it's easier to get the average
2. sum, which gives us the sum of the values in an array
3. mean, which uses sum to get the mean value
4. processArray, which helps us to update the array of pixelValues on each frame by adding one to the end and removing the oldest one