在特定时间后在p5.js中从视频捕获照片 [英] Capture photos from video after specific time in p5.js

问题描述

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);
        }
    }
}

我的目的是在特定时间后从网络摄像头拍照.所以我在JS中使用setTimeout().我希望图片会连续每2秒出现在画布上.

输入for部分时，代码将等待2秒钟，并从网络摄像头捕获图像并显示它.

但是我的情况是所有图片都同时出现在画布上.

解决方案

您需要退后一步，了解draw()函数和setTimeout()函数的工作原理.

• draw()函数每秒自动被调用60次.您可以通过调用frameRate()函数或noLoop()函数来进行调整.在参考中可以找到更多信息.

• setTimeout()函数设置了回调函数，即在一段时间(例如2秒钟)后会自动调用.

因此，您的代码正在做的是设置100个回调函数，这些函数将在2秒内全部触发-并且每秒执行60次！因此，在1秒内，您将拥有6000个功能，这些功能将在2秒后开始触发！几乎绝对不是您想要的.

P5.js在draw()函数中已经具有其自己的计时机制，该机制称为每秒60次，因此在P5.js代码中使用setTimeout()函数似乎有点怪异.相反，您可能应该使用frameCount变量或millis()函数来设置自己的计时.

下面是一个每秒显示随机颜色的示例:

 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> 

此代码使用frameCount变量和% 参考中找到.

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.

解决方案

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.

这篇关于在特定时间后在p5.js中从视频捕获照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！