在 p5 草图中显示和隐藏图像答案

【问题标题】：Showing and hiding images in p5 sketch在 p5 草图中显示和隐藏图像
【发布时间】：2021-03-09 15:06:16
【问题描述】：

当noseX 位置（使用网络摄像头和ml5poseNet 模型检测到）碰到画布的某个部分（例如noseX > 50）时，我正在画布上绘制图像。但是，当鼻子X 位置不在触发该特定图像出现的画布区域中时，我希望绘制的图像再次消失。同样的故事也适用于noseX 位置指示器（黑色椭圆），它最终绘制了noseX 位置所在的路径/线，但我只希望它是一个跟随noseX 而不留下痕迹的点。这是我的 p5 草图：https://editor.p5js.org/saskiasmith/sketches/Z57YsGRsH 非常感谢！

【问题讨论】：

标签： p5.js ml5

【解决方案1】：

如果您在每个 draw() 循环的开头添加另一个 background() 函数调用，那么它将每帧清除画布并获得您想要的效果

如果您考虑一下，您将这些图像和圆圈输出到屏幕上，但从不告诉屏幕清除，这就是每帧调用 background() 会做的事情

function draw() {
  background(245); // <-- Here is the new background call
  push();
  translate(width, 100);
  image(webcam, 0, 0, 0, 0);
  pop()
    
  let d = dist(noseX, noseY, eyelX, eyelY);
  let pX = (noseX);
  let pY = (noseY);
  ...

【讨论】：