This is a question from Khan Academy. I\'m not sure how to go about doing some o

Question

This is a question from Khan Academy. I'm not sure how to go about doing some of these requirements. I know how to make a new drop when the user clicks, but other than that I'm lost. Please help!

1 var Positions [200] 2 var y Positions [0 4 draw function background (204, 247 255); 7 for (var i 0; i xPositions. length it nostroke(); fill (0, 200, 255) ellipse (xPositionsli yPositionsli 10, 10) 10 yPositionsli 5; 11 12 13 14 h; Start over Request Help Restart Save About Documentation Guidelines 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: Add more drops to the arrays. Make it so that the drops start back at the top once they've reached the bottom, using a conditional Make an array of colors, so that every drop is a different color. Make other things rain, like snowflakes (using more shape commands) or avatars (using the image commands). Make it so that when the user clicks, a new drop is added to the array Initialize the arrays using a for loop and random function, at the beginning of the program

Explanation / Answer

// The below code will walk you through most of the aspects of the question. For snowflakes you need to choose the appropraite canvas elements, but the overall logic remains same.

//To create raindrops each a different color.
var x_Positions = [0,100,200,300,400];//1. Added Drops to array
var y_Positions = [0,100,200,300,400];
var dropColors = [color(random(0,255),random(0,255),random(0,255)),
                  color(random(0,255),random(0,255),random(0,255)),
                  color(random(0,255),random(0,255),random(0,255))];

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

    // This code for Additional Raindrops produced when mouse is pressed
    if (mouseIsPressed) {
        x_Positions.push(mouseX);
        y_Positions.push(mouseY);
        dropColors.push(color(random(0,255),random(0,255),random(0,255)));
    }
    for (var i = 0; i < x_Positions.length; i++) {
        noStroke();
        fill(dropColors[i]);
        ellipse(x_Positions[i], y_Positions[i], 10, 10);

        // Vary the speed at which raindrops fall from top to bottom.

        y_Positions[i] += 5;

        //2. Drop restarts at initial yPosition. Add your final y co-ordinate of the
// html canvas or y_Positions array as in here

        if(y_Positions[i] === 400){
            y_Positions[i] = 0;
            //Random xPosition
            x_Positions[i] = random(0,400);
            var randomIndex = floor(random(dropColors.length));
            var DropColors = dropColors[randomIndex];
            dropColors[i] = DropColors;
        }
    }
};

Related Questions

Navigate

• Browse (All)
• Browse T
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.