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

Question

我想在圆圈周围做一个气泡圈。不幸的是，'old' 气泡的边界仍然显示，尽管代码很简单，但我无法弄清楚哪里出了问题。

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() sets the color of the outline and 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>

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

P5 moving object around circle failed to destroy old objects

javascript

processing

p5.js