跟踪 Y 轴结束值并应用一些逻辑

Question

我在可汗学院玩处理js。我一直坚持应用我的逻辑使水滴在到达底部后从顶部开始重新开始的观点，使用条件。我只需要跟踪 Y axis 端点并调用我的 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 索引何时到达草图区域的底部？当发生这种情况时它有什么价值？

要找出答案，请尝试只使用一个 yPosition 而不是 40 个。打印出 yPosition，并找出它离开屏幕底部时的内容。

从另一个角度考虑：看起来您使用的是默认大小 100x100，这意味着 window 的高度是 100 像素。如果window顶部的yPosition是0，那么window底部的yPosition是什么？

希望这能帮助您弄清楚 window 的底部 yPosition 是 100。既然你知道是什么，那么当一个圆圈到达那个位置时你想做什么？您希望它重置到 window 的顶部，对吗？那么，window 顶部的 yPosition 是什么？我们已经说过它是零了！

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

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

如果更改 window 的大小（通过从 setup() 调用 size() 函数）会发生什么情况？我们必须更改 if 语句中的 100。但是 Processing 实际上让我们的生活更轻松，因为它给了我们一个可以使用的 height 变量！

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

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

无耻的自我推销：我写了一个教程，涵盖了可用的动画和重置位置 here。

跟踪 Y 轴结束值并应用一些逻辑

Tracking Y axis end value and apply some logic

javascript

processing.js