移动对象而其他对象在单击控制草图中保持静态

Question

所以我试图制作一个动画，我可以通过点击鼠标来完成。单击添加单个对象很容易。我想要的顺序如下： 最初绘制一个对象（a）。 首先单击鼠标添加一个对象（b）。 第二次鼠标单击添加一个对象（c）。 第三次鼠标点击，对象（c）应在屏幕上移动并消失。

我在序列的最后一部分遇到了问题。我无法弄清楚如何使对象移动并仍然保持草图的静态部分。进行移动的常规方法是通过draw（）函数更改每个循环的对象坐标，并使用背景来掩盖先前的对象。在这种情况下不能这样做，因为我需要对象（a）和对象（b）是持久的。

以下代码。谢谢你的帮助！

var count = 0;

function setup() {
    createCanvas(200, 200);
    a = new Object1(20, 40);
    b = new Object1(20, 85);
    c = new Object1(20, 130);

}

function draw() {
    background(200);
    a.display();
    if (count == 1) {
        b.display();
    }
    if (count == 2) {
        b.display();
        c.display();
    }
    if (count == 3) { //this is where I have a problem

    }
    if (count > 3) {
        count = 0;
    }

}

function Object1(ix, iy, itext) {
    this.x = ix;
    this.y = iy;
    this.text = itext;

    this.display = function() {
        fill(160);
        rect(this.x, this.y, 40, 40);
    }
}

function mousePressed() {
    count++;
}

Answer 1

一般来说，如何执行此操作是将场景的静态部分绘制到屏幕外缓冲区，您可以使用createGraphics()功能创建该缓冲区。来自the reference：

var pg;
function setup() {
  createCanvas(100, 100);
  pg = createGraphics(100, 100);
}
function draw() {
  background(200);
  pg.background(100);
  pg.noStroke();
  pg.ellipse(pg.width/2, pg.height/2, 50, 50);
  image(pg, 50, 50);
  image(pg, 0, 0, 50, 50);
}

您将静态部分绘制到缓冲区，然后将缓冲区绘制到屏幕上，然后在每个帧的顶部绘制动态内容。

之前已经讨论过这个问题，因此我建议您搜索类似＆＃34;处理pgraphics＆＃34;等内容。和＆＃34; p5.js缓冲区＆＃34;找到更多信息。