javascript - P5 绕圈移动物体未能破坏旧物体

Question

我想在圆圈周围做一个气泡圈。不幸的是，“旧”气泡的边界仍然显示，尽管代码很简单，但我无法找出问题所在。

let radius = 150,
    angle = 0,
    speed = 0.01,
    centerX = 300,
    centerY = 300;

class Bubble {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.col = color(255, 100, 76);
        this.diameter = 46;
    }
    display() {
        stroke(255);
        fill(this.col);
        this.x = centerX + radius * cos(angle);
        this.y = centerY + radius * sin(angle);
        ellipse(this.x, this.y, this.diameter, this.diameter);
        angle = angle + speed;
    }
};

var bubbles = [];

function setup() {
    createCanvas(600, 600);
    for (var i = 0; i < 1; i++) {
        var x = 300;
        var y = 300;
        bubbles.push(new Bubble(x, y));
    };
    stroke(0);
    ellipse(300,300,300);
}

function draw() {
    // background(0);
    bubbles[0].display();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

如果您尝试运行此程序，您会发现旧气泡的边界仍然可见。似乎在显示新气泡(沿圆形线)时，创建的旧气泡并未被破坏。

Answer 1

If you try to run this you can see that the boundaries of old bubbles remain visible. It seems that the old bubble that is created is not destroyed when a new one (along the circular line) is shown.

没有。显示永远不会被清除。它只是一个新的气泡，颜色为 color(255, 100, 76) 并且在之前的绘图之上绘制了白色边框 (stroke(255))框架。

在绘制之前用白色清除 Canvas ，然后在draw中绘制黑色圆线:

function draw() {
    // clear canvas with white color
    background(255);

    // draw black circle
    stroke(0);
    noFill();
    ellipse(300,300,300);

    // draw the one and only existing Bubble
    bubbles[0].display();
}

备注stroke()设置轮廓的颜色和noFill()导致以下形状未填充。

看例子:

let radius = 150,
    angle = 0,
    speed = 0.01,
    centerX = 300,
    centerY = 300;

class Bubble {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.col = color(255, 100, 76);
        this.diameter = 46;
    }
    display() {
        stroke(255);
        fill(this.col);
        this.x = centerX + radius * cos(angle);
        this.y = centerY + radius * sin(angle);
        ellipse(this.x, this.y, this.diameter, this.diameter);
        angle = angle + speed;
    }
};

var bubbles = [];

function setup() {
    createCanvas(600, 600);
    for (var i = 0; i < 1; i++) {
        var x = 300;
        var y = 300;
        bubbles.push(new Bubble(x, y));
    };
}

function draw() {
    background(255);
    stroke(0);
    noFill();
    ellipse(300,300,300);
    bubbles[0].display();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>