嵌套 child object 的行为与其 parent 不同

Question

我正在尝试创建一个简单的雨滴粒子效果。 Raindrop class 实例由圆圈表示，圆圈的半径逐帧增加，颜色逐渐变淡，效果很好。为了稍微改进一下，我想模仿实际雨滴落入水坑时产生的波浪。

我的想法是当 parent 的半径超过一定限度时创建一个 child Raindrop。当 child 的半径超过相同的限制等时，child 应该创建自己的 child

var Raindrop = function (x, y, radius, genCoefficient) {

this.position = createVector(x, y);
this.radius = radius;

//genCoefficient, aka generation Coefficient makes sure that each generation of raindrops
//changes faster than the previous
this.genCoefficient = genCoefficient;

//display properties
this.red = 0;
this.blue = random(200, 255);
this.green = 0;
this.strokeWidth = 10;

//growth/change coefficients
this.strokeWidthReduceCoefficient = 0.25*this.genCoefficient;
this.growthCoefficient = this.radius/random(10)*this.genCoefficient;
this.blueReduceCoefficient = (this.growthCoefficient/maximumRadius)*this.blue*this.genCoefficient;

//child raindrop
this.child = null;


this.show = function () {

    //drawing the raindrop
    noFill();
    stroke(this.red, this.green, this.blue);
    strokeWeight(this.strokeWidth);
    ellipse(this.position.x, this.position.y, this.radius, this.radius);

    //changing the raindrop
    this.radius += this.growthCoefficient;
    this.strokeWidth -= this.strokeWidthReduceCoefficient;

    if(this.blue >0){
        this.blue -= this.blueReduceCoefficient;
    }
    else{
        this.blue = 0;
    }

    if(this.radius>=20){
        this.child = new Raindrop(this.position.x, this.position.y, 5, 2*this.genCoefficient);
    }

    if(this.child){
        this.child.show();
    }

};

};

绘制每一帧的代码是这样的：

raindrops = []

function mouseClicked(){
    raindrops.push(new Raindrop(mouseX, mouseY, random(10), 1));
}

function draw() {
    background(0);

    for(var raindrop of raindrops){
        raindrop.show();
    }

    Raindrop.removeRaindrops();
}

某个函数可以确保在半径超过预定义的最大值时删除原始雨滴。这也确保 children 不会永远生成。

所有更改都发生在 show 函数中。创建 child 时，我希望它的行为与 parent 一样，唯一的区别是每个 child 的半径和颜色变化都比它快 2 倍parent。

在生成第一个 child 之前，一切都按预期进行。在那之后，child 的半径保持不变，不会像它应该的那样改变。我很挣扎，但还没有弄清楚为什么会这样。

Answer 1

问题是，一旦半径超过 20，您总是创建一个新的 child，它替换 child 您在上一次迭代中创建的。所以 child 永远没有机会成长——它每次都会被新版本取代。

所以我会添加一个检查是否还没有 child：

if(this.radius>=20 && !this.child){
    this.child = new Raindrop(this.position.x, this.position.y, 5, 2*this.genCoefficient);
}

嵌套 child object 的行为与其 parent 不同

nested child object does not behave like its parent does

javascript

nested

p5.js