Захват фотографий из видео после определенного времени в p5.js

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

моя цель - делать снимки с веб-камеры через определенное время. Поэтому я использую setTimeout() в JS. Я ожидаю, что изображения появятся на холсте каждые 2 секунды подряд.

при вводе для части код будет ждать 2 секунды и захватить изображение с веб-камеры и отобразить его.

но моя ситуация заключается в том, что все изображение появляется на холсте одновременно.

Теги:
p5.js

1 ответ

2
Лучший ответ

Вам нужно сделать шаг назад и понять, как работают функция draw() функции setTimeout().

  • Функция draw() автоматически вызывается 60 раз в секунду. Вы можете настроить это, вызвав frameRate() или функцию noLoop(). Дополнительная информация доступна в справочнике.

  • Функция setTimeout() устанавливает функцию обратного вызова, которая автоматически вызывается после некоторой продолжительности, в вашем случае 2 секунды.

Итак, что делает ваш код, это настройка 100 функций обратного вызова, которые будут срабатывать в 2 seconds-, и это делает это 60 раз в секунду! Итак, через 1 секунду у вас будет 6000 функций, которые начнут стрелять через 2 секунды! Это почти наверняка не то, что вы хотите.

P5.js уже имеет собственный механизм синхронизации в функции draw() которая называется 60 раз в секунду, поэтому кажется немного странным использовать функцию setTimeout() внутри кода P5.js. Вместо этого вы должны, вероятно, настроить свое собственное время, используя переменную 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 и оператор % frameCount чтобы проверить, прошло ли 60 кадров, и если да, то устанавливает фоновый цвет в случайный цвет. Вы захотите сделать что-то подобное.

Как я уже сказал выше, дополнительную информацию обо всем этом можно найти в ссылке.

  • 0
    Спасибо за Ваш ответ! Это очень помогает !!! Но моя путаница все еще существует. Я думаю, что при входе в цикл for, setTimeout() срабатывает, затем подождите 2 секунды, рисует изображения и вводит следующий следующий шаг в цикле for, ждет 2 секунды, затем следующие изображения. снова и снова. почему вы сказали, что все будет запущено одновременно? спасибо ~
  • 1
    @SoulerTsai Пожалуйста, прочитайте документацию по функции setTimeout() , так как она совсем не работает так, как вы описываете.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню