How could I create a color array with javascript?

I’m trying to create an array that holds random colors, one random color per variable in array. So that when I call the variable in the array it gives me a random color.

Here are the instructions from Khan Academy:

“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.”

I want to create something of this sort.

var color = [color1,color2,color3];

How could I make this work? I’m only beginning to learn about arrays.

This is what I have so far.

//This program creates raindrops each a different color.
var xPositions = [100,200,300];//1. Added Drops
var yPositions = [0,0,0];
var dropColors = [???,???,???];

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

    //Additional Raindrops produced when mouse is pressed
    if (mouseIsPressed) {
        xPositions.push(mouseX);
        yPositions.push(0);
    }
    for (var i = 0; i < xPositions.length; i++) {
        noStroke();
        fill(100, 100, 100);
        ellipse(xPositions[i], yPositions[i], 10, 10);
        //Speed at which raindrops fall.
        yPositions[i] += 5;
        //2. Drop restarts at initial yPosition.
        if(yPositions[i] === 400){
            yPositions[i] = 0;
            //Random xPosition
            xPositions[i] = random(0,400);
        }
    }

};

Thank You.

Answer

//This program creates raindrops each a different color.
var xPositions = [0,100,200,300,400];//1. Added Drops
var yPositions = [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(201, 247, 255);

    //Additional Raindrops produced when mouse is pressed
    if (mouseIsPressed) {
        xPositions.push(mouseX);
        yPositions.push(mouseY);
        dropColors.push(color(random(0,255),random(0,255),random(0,255)));
    }
    for (var i = 0; i < xPositions.length; i++) {
        noStroke();
        fill(dropColors[i]);
        ellipse(xPositions[i], yPositions[i], 10, 10);
        //Speed at which raindrops fall.
        yPositions[i] += 5;
        //2. Drop restarts at initial yPosition.
        if(yPositions[i] === 400){
            yPositions[i] = 0;
            //Random xPosition
            xPositions[i] = random(0,400);
            var randIndex = floor(random(dropColors.length));
            var aDropColors = dropColors[randIndex];
            dropColors[i] = aDropColors;
        }
    }

};

Leave a Reply

Your email address will not be published. Required fields are marked *