Issue with javascript project and arrays (Make it rain)

Question

I am kinda new here. I´m taking the Khan academy programming course (mostly javascript) and I am kinda stuck with a project. It's a challenge called Make it rain, where you are supposed to make raindrops that are falling on a canvas, and reset back at the top after. Using arrays, I managed to make drops generate at random positions and fall through the canvas, but am having trouble making them restart back at the top because of the use of arrays. Sorry for the long text; here's my code:

var dropX = [40];
var dropY = [0];
var snowX = [40];
var speed = 1.5;
var ex = 0 ;
var i = 0;
var fall = dropY[i];
noStroke(); 


var rain = function (){ 

 var fall = dropY[i];    
 var ok = dropX.length;     
for(var i = 0; i<100; i++) {

    if (fall<2100){
    background(192, 224, 237);
    fill(23, 123, 143);
    ellipse(dropX[i],dropY[i],5,5);
    fill(224, 213, 213);
    rect(snowX[i],dropY[i],5,5);
    dropY[i]+=speed;
    dropX.push(random(0,400)); 
    dropY.push(random(-1650,0)); 
    snowX.push(random(0,400));
}

}
for (i = 0;i<100; i++)    {
    i++;
    fill(45, 136, 189);
    ellipse(dropX[i],dropY[i],5,5);
    fill(255, 255, 255);
    rect(snowX[i],dropY[i],5,5);
}};

draw = function() {
rain();


};

https://www.khanacademy.org/computer-programming/spin-off-of-project-make-it-rain/5960057721651200

The khan academy code editor uses processing.js as far as i know. Thank's for any help or tips!!

Answer 1

These lines:

var dropX = [40];
var dropY = [0];
var snowX = [40];

All create arrays with a size of 1. dropX[0] and snowX[0] both have a value of 40 and dropY[0] has a value of 0.

Besides your loops are going from 0 to 100 and not to 40;

This will initialize your arrays correctly:

var dropX = [];
var dropY = [];
var snowX = [];
var i;

for(i = 0; i < 100; i++) {
  dropX[i] = 40;
  dropY[i] = 0;
  snowX[i] = 40;
}