跟蹤Y軸的最終值並應用一些邏輯

我正在處理可汗學院的js。我已經停止了一個觀點來應用我的邏輯，使得一旦到達底部，使用條件觸發器就會回到頂端。我只需要跟蹤Y axis端點，並撥打我的setXYPositions()即可應用再次降雨功能。跟蹤Y軸的最終值並應用一些邏輯

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; 

    } 
};

來源

2016-10-01 Always Sunny

你怎麼知道當一個yPosition指標已達到草圖區域的底部？當這種情況發生時，它有什麼價值？

要想了解這一點，請嘗試僅使用一個yPosition而不是其中的40個。打印出yPosition，並確定它在離開屏幕底部時的狀態。

想想另一種方式：它看起來像你使用默認大小100x100，這意味着你的窗口的高度是100像素。如果窗口頂部的yPosition是0，那麼窗口底部的yPosition是什麼？

希望這可以幫助你找出窗口的底部yPosition是100。現在你知道了什麼，當一個圓圈達到那個時候你想做什麼？你希望它重置到窗口的頂部，對吧？那麼，窗口頂部的yPosition是什麼？我們已經說過它是零！

全部放在一起，它看起來像這樣：

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

如果你改變了窗口的大小（通過調用從setup()的size()功能）會發生什麼？我們必須更改聲明中的100。但通過給我們一個height變量，處理實際上使我們的生活更輕鬆！

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

現在我們的代碼無論窗口大小如何都可以工作。

無恥的自我推銷：我寫了一個教程，涵蓋動畫和重置立場here。

來源

2016-10-01 13:22:28

它的作品:)我喜歡你的自我推銷，因爲它可以幫助我理解動畫:) –

跟蹤Y軸的最終值並應用一些邏輯

回答

相關問題