文章/答案/技术大牛

发布

社区首页 >问答首页 >P5绕圆运动的物体未能摧毁旧物体

问P5绕圆运动的物体未能摧毁旧物体
EN

Stack Overflow用户

提问于 2019-08-25 16:52:37

回答 1查看 264关注 0票数 2

我正试着在圆圈周围做一个气泡圈。不幸的是，“旧”气泡的边界仍然显示出来，尽管代码很简单，我还是找不出出了什么问题。

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>

如果你试图运行这一点，你可以看到，旧泡沫的边界仍然可见。看起来，当一个新的气泡(沿着圆形线)出现时，所产生的旧气泡不会被破坏。

javascript

processing

p5.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-25 17:31:53

如果你试图运行这一点，你可以看到，旧泡沫的边界仍然可见。看起来，当一个新的气泡(沿着圆形线)出现时，所产生的旧气泡不会被破坏。

不是的。显示器永远不会被清除。它只是一个新的气泡，颜色color(255, 100, 76)和白色边框(stroke(255))绘制在上一帧的绘图之上。

在绘制和绘制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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57647953

复制

相似问题

问P5绕圆运动的物体未能摧毁旧物体
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问P5绕圆运动的物体未能摧毁旧物体EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问P5绕圆运动的物体未能摧毁旧物体
EN