How could I create a color array with javascript? - Stack Overflow

admin管理员组

文章数量:1326277

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 mands) or avatars (using the image mands). 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.

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 mands) or avatars (using the image mands). 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.

• javascript

Share Improve this question Follow edited Apr 2, 2015 at 6:28 Sally A. asked Apr 1, 2015 at 6:58 Sally A.Sally A. 4311 gold badge11 silver badge66 bronze badges 7

• Unclear: What are you trying to do? What is the end goal? Why do you want to use an array? Are the 3 colors Red/Green/Blue channel data? 3 random colors? What format would you like the colors in? – maček Commented Apr 1, 2015 at 7:00
• I need to use it in fill(100,100,100); I need to make a rain drop program and each drop needs to be a different color. The x and y positions for the raindrops are in arrays. I need the colors to be in arrays as well. It's part of my assignment. – Sally A. Commented Apr 1, 2015 at 7:03
• One way to do that is to use something like var color = {color1, color2, color3} which will define an OBJECT that store those three color values. You can store that object into an array element – cybermike Commented Apr 1, 2015 at 7:08
• Thank you although, I have not learned objects yet, could there be another way to do this? – Sally A. Commented Apr 1, 2015 at 7:10
• Another trivial solution is three color arrays: var dropColors1 = []; var dropColors2 = []; var dropColors3 = []; Or use two-dimensional arrays. – cybermike Commented Apr 1, 2015 at 7:10

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 2

Here is what I used to get different color raindrops:

var xPositions = [];
var yPositions = [];
var rainColor = [(color(random(0,255),random(0,255),random(0,255)))];



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

var x= random(0,255);
var y = random(0,255);
var z = random(0,255);

    mouseReleased = function(){
        xPositions.push(mouseX);
        yPositions.push(mouseY);
        rainColor.push(color(x, y, z));

 };
    for (var i = 0; i < xPositions.length; i++) {
        noStroke();

        fill(rainColor[i]);
        ellipse(xPositions[i], yPositions[i], 10, 10);
        yPositions[i] += 5;

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

        }

    }

};

//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;
        }
    }

};

i am e with easy answer to your question.u don't need to do all the thing dropcolor[]; arrays and with all of lot of color.

just u want to replace fill(); to fill(random(0,255),random(0,314),random(0,255)); that's all u get random colors for all your raindrop. thank you, i think this answer it helpful for you.

// run this code to check random raindrop colors
// this project or codes are create Rain(loop) with different positions and colors.

// Show the positions of raindrop(x,y)
var xPositions = [200,100,250,350];
var yPositions = [0,-10,-30,-60];

// Draw function to repeat every raindrop position
draw = function() {
  background(204, 247, 255);

  // Condition to start back y position to do animation
  if (mouseIsPressed) {
    xPositions.push(mouseX);
    yPositions.push(0);
  }

  // Loop the raindrop codes to repeat with some change
  for (var i = 0; i < xPositions.length; i++) {
    noStroke();

    // fill random colors to the raindrop
    fill(random(0,255),random(0,314),random(0,255));

    // Raindrop
    ellipse(xPositions[i], yPositions[i], 10, 10);

    // Increase y position up to down everytime +=5
    yPositions[i] += 5;

    // Drops start back at the top once they've reached the bottom
    if(yPositions[i] > 400) {
        yPositions[i] = (0); 
        xPositions[i] = random(0,400);
    }
  }
};

Man keep it simple, just use:

   var aColors = [];
   var iTotalColorsGenerate = 100;
   var count = 0;
   while(count < iTotalColorsGenerate){
     aColors.push('#'+(Math.random()*0xFFFFFF<<0).toString(16))
     count++;
    }
   // HERE YOUR COLORS!
   console.log(aColors)

I solved it as follows (didn't include the user interaction):

var xPositions = [200];
var yPositions = [0];
var colArray = [(color(random(0, 255), random(0, 255), random(0, 255)))];

var backToZero = function() {
     yPositions = [0]; 
     xPositions = [200]; 
}; 

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

    for (var i = 0; i < 15; i++) {
        if(yPositions[i] >= 400) {
            backToZero();  
        }
        noStroke();
        fill(colArray[i]);
        ellipse(xPositions[i], yPositions[i], 10, 10);
        yPositions[i] += 5;
        xPositions.push(random(0, 400)); 
        yPositions.push(0); 
        colArray.push((color(random(0, 255), random(0, 255), random(0, 255)))); 
    }
};

I did this challenge on Khan Academy. I came here to stack overflow for help and found the above answers. I tried the previous ones but the raindrops were just black, blue, and gray. And technically, that solved it. But this is what I came up with (and it is a little long, I know, but it is beautiful! :D Here is the link to my spin-off: https://www.khanacademy/puter-programming/spin-off-of-project-make-it-rain/4743082885038080

var xPositions = [];
var yPositions = [];
var speed = [];
var r = color(255, 0, 0);
var b = color(0, 0, 255);
var g = color(50, 158, 33);
var y = color(237, 237, 69);
var o = color(235, 161, 70);
var p = color(161, 70, 235);
var rainColor = [r, b, g, r, g, b, y, o, y, o, p, p, r, g, b, g, o, y, b, o, g, y, b, r, o];

for (var rain = 0; rain < 25; rain++) { 
    xPositions.push(random(0,490));
    yPositions.push(random(0,490));
    speed.push(random(2, 5));
}

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

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

        yPositions[i] +=speed[i];
        }

};

More exactly, you can generate a color array by pushing random color elements inside "for.. loop":

var xPositions = [];  // All arrays are empty initially
var yPositions = [];
var speed = [];
var rainColor = [];

for (var rain = 0; rain < 25; rain++) { 
    // for loop adds drop elements with random properties:
    // xy-positions, speed and color
    xPositions.push(random(0,490));
    yPositions.push(random(0,490));
    speed.push(random(2, 5));
    var r = random(0, 255);  // Each color ponent
    var g = random(0, 255);  // is independent, random
    var b = random(0, 255);  // and is between 0..255
    rainColor.push(color(r, g, b));
}
// and so on

本文标签： How could I create a color array with javascriptStack Overflow