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.

NOTE: you'll probably need to open these examples in a new tab because of the use of the webcam. The easy way to do that is the editor's file menu → share → edit

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. By that, I mean that the rects are jumping around a lot, and the color of the one at the bottom flickers too fast. That's because this is being run 60 times per second, and in fact the exact value of the pixel or the mouse jumps around a surprisingly large amount from frame to frame (at least it does on my computer).

We can make the animation look smoother if we use what is sometimes called a moving average. Instead of getting the value at each frame, we'll take the average value over 20 frames, which will make it change less from frame to frame and then look smoother. 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 20 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