在特定时间后在p5.js中从视频捕获照片

Question

var video;
var snapshots = [];
var readyCheck = false;
var button;

function setup() {
    createCanvas(800, 600);
    background(0);
    video = createCapture(VIDEO, ready);
    video.size(200, 150);
}

function ready() {
    readyCheck = true;
    console.log('work');
}

function draw() {
    var w = 200;
    var h = 150;
    var x = 0;
    var y = 0;

    if (readyCheck) {
        for (var i = 0; i < 100; i++) {
            // use setTimeout() to wait for 2 seconds
            setTimeout(function() {
                snapshots[i] = video.get();
                image(snapshots[i],x, y);
                x += w;
                if (x >= width) {
                    x = 0;
                    y += h;
                }
            }, 2000);
        }
    }
}

my purpose is taking pictures from the webcam after specific time. So I use the setTimeout() in JS. I expect pictures will appear on the canvas every 2 seconds in a row.

when entering the for part, the code will wait 2 seconds and capture the image from webcam and display it.

but my situation is that all the picture appear on the canvas at the same time.

Answer 1

You need to take a step back and understand how the draw() function and the setTimeout() functions work.

• The draw() function is automatically called 60 times per second. You can adjust this by calling the frameRate() function or the noLoop() function. More info is available in the reference .

• The setTimeout() function sets up a callback function that is automatically called after some duration, in your case 2 seconds.

So, what your code is doing is setting up 100 callback functions that will all fire in 2 seconds- and it's doing this 60 times per second! So in 1 second, you'll have 6000 functions that will start firing 2 seconds later! This is almost definitely not what you want.

P5.js already has its own timing mechanism in the draw() function that's called 60 times per second, so it seems a little weird to use the setTimeout() function inside P5.js code. Instead, you should probably set up your own timing using the frameCount variable or the millis() function.

Here's an example that shows a random color every second:

 function setup() { createCanvas(200, 200); } function draw() { if(frameCount % 60 == 0){ background(random(256), random(256), random(256)); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script> 

This code uses the frameCount variable and the % modulus operator to check whether 60 frames have passed, and if so, it sets the background to a random color. You'll want to do something similar.

Like I said above, more info about all of this can be found in the reference .