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 секунды и захватить изображение с веб-камеры и отобразить его.
но моя ситуация заключается в том, что все изображение появляется на холсте одновременно.
Вам нужно сделать шаг назад и понять, как работают функция 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 кадров, и если да, то устанавливает фоновый цвет в случайный цвет. Вы захотите сделать что-то подобное.
Как я уже сказал выше, дополнительную информацию обо всем этом можно найти в ссылке.
setTimeout()
срабатывает, затем подождите 2 секунды, рисует изображения и вводит следующий следующий шаг в цикле for, ждет 2 секунды, затем следующие изображения. снова и снова. почему вы сказали, что все будет запущено одновременно? спасибо ~setTimeout()
, так как она совсем не работает так, как вы описываете.