I'm a beginner here and currently enrolled in the Khan Academy programming course, focusing on Javascript. I've hit a roadblock with a project called "Make it rain," where the task is to create raindrops falling on a canvas and resetting back at the top. Using arrays, I've successfully generated drops at random positions and made them fall through the canvas. However, I am facing difficulty restarting them at the top due to the array usage. 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();
};
The Khan Academy code editor uses processing.js from what I understand. Thank you for any assistance or advice!