CODEWITHSUNDEEP
javascriptarrays
Nathan Fleck
Nathan Fleck

Reputation: 21

Javascript - Array Assignment

I am currently taking a course on Javascript at Khan Academy and Im having some trouble with one of the assignments. I have posted the question there, but I have noticed that there is less volunteers willing to help there, so I thought I`d ask here. I have an Assignment on JS Arrays (https://www.khanacademy.org/computing/computer-programming/programming/arrays/p/project-make-it-rain) with the following requirements:

To make an animation of rain, it's best if we use arrays to keep track of the drops and their different properties. Start with this simple code and build on it to make a cool rain animation. Here are some ideas for what you could do:

  1. Add more drops to the arrays. 2. Make it so that the drops start back at the top once they've reached the bottom, using a conditional. 3. Make an array of colors, so that every drop is a different color. 4. Make other things rain, like snowflakes (using more shape commands) or avatars (using the image commands). 5. Make it so that when the user clicks, a new drop is added to the array. 6. Initialize the arrays using a for loop and random() function, at the beginning of the program.

Question 1)

I've got it to use a random colour when the raindrop is called, but it overwrites the previous drop's colour if you call it before the previous drop goes off screen. I've tried moving the fill function outside the loop, and around the loop to no avail. Can anyone give me some insight on this? What am I doing wrong?

Question 2)

I've got a conditional (if/else) to make the raindrop start back at the top, but it drops much slower the second time, and only repeats once. Having trouble figuring out the logic of why this is happening in order to "debug" it.

Current code:

var xPositions = [100];
var yPositions = [0];
var colors = [
    color(255, 0, 0),
    color(255, 128, 0),
    color(255, 255, 0),
    color(0, 255, 0),
    color(0, 0, 255),
    color(128, 0, 255)      
];
background(204, 247, 255);
fill(colors[Math.floor(Math.random() * colors.length)]);

// Raindrops (random color)    
draw = function() {
background(204, 247, 255);
        
    for (var i = 0; i < xPositions.length; i++) {
        if (yPositions[i] < 400) { // if the raindrop hasnt hit the bottom
            noStroke();
            ellipse(xPositions[i], yPositions[i], 10, 10);
            yPositions[i] += 5;
        } else { // when it hits the bottom, set the yPositions variable to 0 and restart
            ellipse(xPositions[i], yPositions.push(0), 10, 10);
            yPositions[i] += 5;
        }    
    }
};

var mouseClicked = function() {
    xPositions.push(mouseX);
    yPositions.push(mouseY);
    fill(colors[Math.floor(Math.random() * colors.length)]);
    draw();
};

Upvotes: 2

Views: 995

Answers (1)

Catalyst
Catalyst

Reputation: 3237

Question 1)

You need to make a fill call for each raindrop that is drawn, per iteration of the for loop inside draw. For a raindrop to maintain its color as it falls (between draw calls) you need to store its color in an additional array, and initialize the corresponding color when you create new drops.

Question 2)

Simply reset the y value in the y array to make the drop start over. I'm not sure what the ellipse call was doing in your code - see below.

// initial raindrop values
var xPositions = [100];
var yPositions = [0];

var colors = [
  color(255, 0, 0),
  color(255, 128, 0),
  color(255, 255, 0),
  color(0, 255, 0),
  color(0, 0, 255),
  color(128, 0, 255)
];
// initialize the first raindrop to a random color
var dropColors = [colors[Math.floor(Math.random() * colors.length)]];

background(204, 247, 255);

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

  for (var i = 0; i < xPositions.length; i++) {
    if (yPositions[i] < 400) { // if the raindrop hasnt hit the bottom
      noStroke();
      // set the fill color for this drop
      fill(dropColors[i]);
      ellipse(xPositions[i], yPositions[i], 10, 10);
      yPositions[i] += 5;
    } else { // when it hits the bottom, set the yPositions variable to 0
      yPositions[i] = 5;
    }
  }
};

var mouseClicked = function() {
  xPositions.push(mouseX);
  yPositions.push(mouseY);
  dropColors.push(colors[Math.floor(Math.random() * colors.length)]);
  draw();
};

Upvotes: 1

Related Questions