如何使用javascript创建颜色数组

How could I create a color array with javascript?

本文关键字：颜色数组创建 javascript 何使用更新时间：2023-09-26

我正在尝试创建一个包含随机颜色的数组，数组中每个变量一种随机颜色。所以当我调用数组中的变量时，它会给我一个随机的颜色。

以下是可汗学院的说明：

"要制作一个关于雨水的动画，最好使用数组来跟踪水滴及其不同属性。从这个简单的代码开始，并在此基础上构建一个凉爽的雨水动画。以下是一些可以做的想法：

向阵列中添加更多滴漏。使用条件，使液滴在到达底部后从顶部开始。制作一个颜色数组，这样每滴都是不同的颜色。让其他东西下雨，比如雪花（使用更多的形状命令）或化身（使用图像命令）。这样，当用户单击时，就会向数组中添加一个新的drop。在程序开始时，使用for循环和random（）函数初始化数组。"

我想创造这样的东西。

var color = [color1,color2,color3];

我怎样才能做到这一点？我才刚刚开始学习数组。

这就是我到目前为止所拥有的。

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

谢谢。

以下是我过去得到不同颜色雨滴的方法：

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

我为你的问题提供了简单的答案。你不需要做所有的事情dropcolor[]；阵列和所有的颜色。

只是你想替换fill（）；填充（随机（0255），随机（0314），随机；这就是你所有雨滴的随机颜色。谢谢你，我认为这个答案对你有帮助。

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

保持简单，只需使用：

   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)

我如下解决了它（不包括用户交互）：

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

我在可汗学院完成了这个挑战。我来这里是为了堆叠溢出寻求帮助，并找到了上面的答案。我试过以前的，但雨滴只是黑色、蓝色和灰色的。从技术上讲，这解决了问题。但这就是我想到的（我知道它有点长，但很漂亮！：D这是我的衍生产品的链接：https://www.khanacademy.org/computer-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];
        }
};

更确切地说，您可以通过在"内部推送随机颜色元素来生成颜色数组；对于循环：

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 component
    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