Блог

Я играл с обработкой js в khan academy. Я застрял в точке, чтобы применить свою логику, чтобы капли начинались сверху, как только они достигли дна, используя условное. Мне просто нужно отследить Y axis конечную точку и вызвать my setXYPositions() , чтобы применить способность re rain.

 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;

    }
};
  

Как вы узнаете, когда 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 переменную, которую мы можем использовать вместо нее!

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

Теперь наш код будет работать независимо от размера окна.

Бесстыдная самореклама: я написал учебное пособие, посвященное анимации и сбросу позиций, доступных здесь.