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

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

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

但是我的情况是所有图片同时出现在canvas上

Answer 1

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

draw()函数每秒自动调用60次。您可以通过调用 frameRate() 函数或 noLoop() 函数来调整它。 the reference.
setTimeout() 函数设置了一个 callback function 会在一段时间后自动调用，在您的例子中是 2 秒。

所以，您的代码正在做的是设置 100 个回调函数，它们将在 2 秒内全部触发 - 它每秒执行 60 次！所以在 1 秒内，您将拥有 6000 个函数，它们将在 2 秒后开始触发！这几乎肯定不是你想要的。

P5.js在draw()函数中已经有自己的计时机制，每秒调用60次，所以在[=56里面使用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 变量和 % modulus operator 来检查是否已通过 60 帧，如果已通过，则将背景设置为随机颜色。你会想做类似的事情。

就像我上面说的，有关所有这些的更多信息可以在 the reference.

中找到

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

Capture photos from video after specific time in p5.js

javascript

p5.js