javascript - 跟踪 Y 轴最终值并应用一些逻辑

Question

我在可汗学院玩处理js。我坚持应用我的逻辑，使用条件使水滴到达底部后从顶部开始。我只需要跟踪 Y 轴 端点并调用我的 setXYPositions() 即可应用重雨功能。

var xPositions = [];
var yPositions = [];

var setXYPositions = function(){

   for(var i = 0 ; i <= 400 ; i+=10 ){
    xPositions.push(i);
    yPositions.push(random(1,100));
   }
};

//call rain
setXYPositions();   

draw = function() {

    background(204, 247, 255);

    for (var i = 0; i < xPositions.length; i++) {
        noStroke();
        fill(random(2,255), random(2,255), random(2,255));
        ellipse(xPositions[i], yPositions[i], 10, 10);
        yPositions[i] += 5;

    }
};

Answer 1

如何知道 yPosition 索引何时到达草图区域的底部？当这种情况发生时，它有什么值(value)？

要找出这一点，请尝试仅使用一个 yPosition 而不是 40 个。打印出yPosition，并找出当它离开屏幕底部时它是什么。

换个 Angular 思考:看起来您正在使用默认大小 100x100，这意味着窗口的高度为 100 像素。如果窗口顶部的yPosition是0，那么窗口底部的yPosition是多少？

希望这可以帮助您弄清楚窗口底部的 yPosition 是 100。现在你知道了，当一个圆圈到达那个位置时你想做什么？您希望它重置到窗口顶部，对吗？那么，窗口顶部的 yPosition 是多少？我们已经说过它是零!

把它们放在一起，看起来像这样:

yPositions[i] += 5;
if(yPositions[i] > 100){
   yPositions[i] = 0;
}

如果更改窗口的大小(通过从 setup() 调用 size() 函数)会发生什么？我们必须更改 if 语句中的 100。但实际上，Processing 为我们提供了一个可以使用的 height 变量，让我们的生活变得更轻松!

yPositions[i] += 5;
if(yPositions[i] > height){
   yPositions[i] = 0;
}

现在，无论窗口大小如何，我们的代码都可以工作。

无耻的 self 推销:我写了一个涵盖动画和重置可用位置的教程here .