时间戳

首页 > 解决方案 > 我正在绘制到 HTML 的文本闪烁 p5js

javascript - 我正在绘制到 HTML 的文本闪烁 p5js

问题描述

我假设这是因为绘制循环每 x 秒绘制一次。

如何在不降低视频刷新率的情况下减慢或阻止它更新每一帧。

我的想法是添加一个 fps 计数器并检查if (fps_counter >= 60)更新 html？

查看最后一段代码“getResult()”

// see gotResult()
function setup() {
  createCanvas(320, 260);
  // Create the video
  video = createCapture(VIDEO);
  video.size(320, 240);
  video.hide();
  // frameRate(5);

  flippedVideo = ml5.flipImage(video)
  // Start classifying
  classifyVideo();
}

// see gotResult()
function draw() {
  background(0);
  // Draw the video
  image(flippedVideo, 0, 0);

  // Draw the label
  fill(255);
  textSize(25);
  textAlign(CENTER);
}

// I believe the issue is here.
// HTML is noticeably blinking.
function gotResult(error, results) {
    $("#background").html("✅ | " + parseInt(results[0].confidence * 100) + "%");
    $("#cardboard-paper").html(" | " + parseInt(results[1].confidence * 100) + "%");
    $("#plastic").html(" | " + parseInt(results[2].confidence * 100) + "%");
    $("#can").html(" | " + parseInt(results[3].confidence * 100) + "%");

  classifyVideo();
}

标签： javascripthtmlp5.js

解决方案

我不太清楚你所说的闪烁是什么意思，但是 p5.js 有一个内置的帧计数器，即frameCount变量。您可以在参考资料中阅读更多内容。

您可以将其与模%运算符一起使用，以每 X 帧触发一些行为。像这样的东西：

// only do the thing once per second
if(frameCount % 60 == 0) {
  // do the thing
}

推荐阅读