How to properly randomize items on this loop?

Question

In this program there is rain falling down in a loop. When the raindrop hits the ground it starts back at the top. Each time the program is initialized a random color and random raindrop positions are created. However I can't figure out how to make each raindrop position and color random when they come back to the top of the canvas.

 var xPositions = []; var yPositions = []; for (var count = 0; count < 16; count++) { fill(random(0, 255), random(0, 255), random(0, 255)); xPositions.push(random(0, 400)); yPositions.push(random(0, 400)); } draw = function() { background(204, 247, 255); for (var i = 0; i < xPositions.length; i++) { noStroke(); ellipse(xPositions[i], yPositions[i], 10, 10); yPositions[i] += 4; if (yPositions[i] > 400) { yPositions[i] = 0; } } }; var mouseClicked = function() { xPositions.push(mouseX); yPositions.push(mouseY); };

Answer 1

you have already the answer, because you get the

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

condition. Simply add in there something like

xPositions[i] = random(0,400);

Answer 2

var xPositions = [];
var yPositions = [];
var color = [];
for (var count = 0; count < 16; count++) {
  color.push(random(0, 255), random(0, 255), random(0, 255));
  xPositions.push(random(0, 400));
  yPositions.push(random(0, 400));
}

draw = function() {
  background(204, 247, 255);

  for (var i = 0; i < xPositions.length; i++) {
    noStroke();
    fill(var[i]);
    ellipse(xPositions[i], yPositions[i], 10, 10);
    yPositions[i] += 4;

    if (yPositions[i] > 400) {
      yPositions[i] = 0;
      xPositions[i] = random(0, 400);
      var[i] = (random(0, 255), random(0, 255), random(0, 255));
    }
  }
};

var mouseClicked = function() {
  xPositions.push(mouseX);
  yPositions.push(mouseY);
};

I suggest put the x, y and color variable in an object so you don't have to use 3 arrays