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，这意味着您的窗口高度为100像素。如果窗口顶部的yPosition为0，那么窗口底部的yPosition是什么？

希望这有助于您确定窗口的底部yPosition为100。既然你知道什么，当圆圈达到那个时你想做什么？你希望它重置到窗口的顶部，对吧？嗯，窗户顶部的yPosition是什么？我们已经说过它是零！

总而言之，它看起来像这样：

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

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

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

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

无耻的自我推销：我已经编写了一个涵盖动画和重置职位的教程here。

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

1 个答案: