2

I can't see why this code doesn't work. There are no syntax errors displayed - and no 'errors' in the Chrome Development console.

No black image is displayed if movement and the page seems to be loading non-stop (as if caught in a loop.) - the light on the camera doesn't light either.

I have commented out sections of code and the problem occurs during the looping stage. (I can get the camera to display an image if the pixel checking doesn't take place).

In the User Messages in the console - it advises me that:

p5.js says: dist() was expecting at least 4 arguments, but received only 3.

As you can see from the code - it does have the correct amount of arguments.

I believe that the browser 'crashes' as these messages in the console are in the 10,000s before it crashes - if this is the case: how do I stop that?

// Variable for capture device
var video;
// Previous Frame
var prevFrame;
// How different must a pixel be to be a "motion" pixel
var threshold = 50;

function setup() {
  createCanvas(320, 240);
  pixelDensity(1);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
  // Create an empty image the same size as the video
  prevFrame = createImage(video.width, video.height);
}

function draw() {
  image(prevFrame, 0, 0);

  loadPixels();
  video.loadPixels();
  prevFrame.loadPixels();

  // Begin loop to walk through every pixel
  for (var x = 0; x < video.width; x++) {
    for (var y = 0; y < video.height; y++) {

      // Step 1, what is the location into the array
      var loc = (x + y * video.width) * 4;

      // Step 2, what is the previous color
      var r1 = prevFrame.pixels[loc];
      var g1 = prevFrame.pixels[loc + 1];
      var b1 = prevFrame.pixels[loc + 2];

      // Step 3, what is the current color
      var r2 = video.pixels[loc];
      var g2 = video.pixels[loc + 1];
      var b2 = video.pixels[loc + 2];

      // Step 4, compare colors (previous vs. current)
      var diff = dist(r1, g1, b1, r2, g2, b2);

      // Step 5, How different are the colors?
      // If the color at that pixel has changed, then there is motion at that pixel.
      if (diff > threshold) {
        // If motion, display black
        pixels[loc] = 0;
        pixels[loc+1] = 0;
        pixels[loc+2] = 0;
        pixels[loc+3] = 0;
      } else {
        // If not, display white
        pixels[loc] = 255;
        pixels[loc+1] = 255;
        pixels[loc+2] = 255;
        pixels[loc+3] = 255;
      }
    }
  }
  updatePixels();

  // Save frame for the next cycle
  //if (video.canvas) {
  prevFrame.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height); // Before we read the new frame, we always save the previous frame for comparison!
  //}

}
stilts77
  • 191
  • 3
  • 14
  • You've got everything in your draw method. Your draw method executes 60 times per second automatically. This explains why your messages are in the 10000's. – vs97 Aug 14 '19 at 00:31
  • Hi. I appreciate that... however, even if I reduce the frameRate() it still throws up the issue- just fewer times! I've also tried reducing the loop iterations too (by counting every 10 locations) - but it still doesn't want to work. – stilts77 Aug 14 '19 at 10:30
  • I pasted your code into openprocessing.org, and it seems to be running smoothly. Do you have any sketches in the same folder that might have defined their own `dist()` function? – Tony Aug 22 '19 at 17:44
  • What does seem to have made a difference is changing the line: `var loc = (x + y * video.width) * 4; ` I removed the *4. – stilts77 Aug 25 '19 at 10:08

0 Answers0