Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
p5js-webcam1 [2024/04/14 07:13] – renickp5js-webcam1 [2024/08/22 00:01] (current) – renick
Line 9: Line 9:
 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 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.**+**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**
  
 <HTML> <HTML>
Line 35: Line 35:
 ===== reducing jitter ===== ===== reducing jitter =====
  
-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:+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:
   - capture the values of the pixel under the mouse at each frame   - capture the values of the pixel under the mouse at each frame
-  - take the average value for R, G, B, and A over a period of 10 frames+  - take the average value for R, G, B, and A over a period of 20 frames
   - use the new array of average values as the basis for our mapping   - use the new array of average values as the basis for our mapping
  
Line 49: Line 51:
 <iframe src="https://editor.p5js.org/renick/sketches/MtOctI5y-" width=99% height=800></iframe> <iframe src="https://editor.p5js.org/renick/sketches/MtOctI5y-" width=99% height=800></iframe>
 </HTML> </HTML>
 +
 +===== more on the webcam =====
 +
 +This set of videos by Jeff Thompson (http://www.jeffreythompson.org/) shows a nice trick for getting a performant grid of x/y values and using the red value for that pixel as a measure of brightness and mapping that to the size of a circle to be drawn at that point
 +
 +  - https://www.youtube.com/watch?v=G3WxVV7aN4I
 +  - https://www.youtube.com/watch?v=VYg-YdGpW1o
 +
 +His code is at this link: https://editor.p5js.org/jeffThompson/sketches/Y2xbIzxpI
 +
 +He explains how to get a particular pixel value in these videos:
 +
 +  - (basics) https://www.youtube.com/watch?v=pxm7A4mEwoQ
 +  - (more performant by reading the flat pixel array) https://www.youtube.com/watch?v=u5lkHcbiFt0
 +
 +Here's a useful example from Kokyoong Lim for some simple motion detection:
 +
 +  - https://editor.p5js.org/limkokyoong.etc/sketches/MaZMF_iz4
  
  • p5js-webcam1.1713104030.txt.gz
  • Last modified: 12 months ago
  • by renick