Get random number of colors from a list instead of 8

Question

I am experimenting on particles and I have set a list of 8 colors that create random shape. Now I have always the 8 colors showing up in the particles but I would like to have a random number of colors (1 to 8) everytime I run the script.

this is the relevant part of the code:

let colors = [
   "dodgerBlue",
  "red",
  "#fff200",
  "limeGreen",
  "slateGrey",
  "orange",
  "hotPink", 
  " #080808"
];
const dpi = 100;

let Particle = function(x, y) {
  this.x =  getRandomInt(cw);
  this.y =  getRandomInt(ch);
  this.coord = {x:x, y:y};
  this.r =  Math.min(getRandomInt(cw / dpi), 10 );
  this.vx = (Math.random() - 0.5) * 100;
  this.vy = (Math.random() - 0.5) * 100;
  this.accX = 0;
  this.accY = 0;
  this.friction = Math.random() * 0.07 + 0.90;
  this.color = colors[Math.floor(Math.random() * 8)];
}

how can I get a random number output instead of the "8" of the last line?

You can use simply `this.coord = {x, y};` instead of `this.coord = {x:x, y:y};`. if you want to define an object whose keys have the same name as the variables passed in as properties, you can use the shorthand and simply pass the key name. — DecPK, Aug 29 '21 at 01:22

Robson · Answer 1 · 2021-08-29T16:27:21.397

I'd do three things:

Shuffle the array

I'll just use the shuffle code from this answer:

/**
 * Shuffles array in place.
 * @param {Array} a items An array containing the items.
 */
function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

Remove items from the array

Easiest way to do this is with the slice function. You just do array.slice(0, 3) and that would keep the first few items. In your example you would want to randomise the second number, ensuring it's always 1 or more.

No hard-coding the array length

In your code there's an 8 for the length of the array. That could be improved by using the array.length because that will handle any length and it's easier to understand.

Example

Putting that together would give:

/**
 * Shuffles array in place. ES6 version
 * @param {Array} a items An array containing the items.
 * https://stackoverflow.com/a/6274381/16584778
 */
function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

var colours = [
  "red",
  "green",
  "blue",
  "yellow",
  "black",
  "pink",
  "orange",
  "purple"
];

// randomise the order of the colours
shuffle(colours);

// keep some/all of the colours
colours = colours.slice(0, 1 + Math.floor(Math.random() * colours.length));

// show the colours that we have kept
document.write(colours.join(' ') + '<br/>');

// output dots using our chosen colours
for (var n = 0; n < 200; n++) {
  document.write('<span style="color:' + colours[Math.floor(Math.random() * colours.length)] + '">&#9632;</span> ');
}

Thanks. I already have the output of particles. I also tried to embed the code but I get only one-color particles output (as when I run the snippet). Any hint? — Il_Marti, Aug 29 '21 at 11:17
That's weird - you get only one colour every time you run the snippet? Is it always the same colour? — Robson, Aug 29 '21 at 11:41
can't post a picture but yes, only one color (blue) and always the same color — Il_Marti, Aug 29 '21 at 15:40

score 1 · Answer 2 · answered Aug 29 '21 at 01:06

1

Math.floor() returns max less or equal number,that why u allways have the same 8. Specify youre requirments and use this insted youre last line:

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
 }

That function will return allways random value in specifyed diapason.

answered Aug 29 '21 at 01:06

404th

85
7

That sounds easy and straightforward. I tried implementing the code but I always get black particles. Can you help me get that piece of code working with minimum 1 color and maximum 8 colors? Thanks! – Il_Marti Aug 29 '21 at 10:48

score -1 · Answer 3 · edited Aug 29 '21 at 01:40

-1

Array.prototype.random = function(){
  return this[Math.floor(Math.random() * this.length)];
}

let colors = [
   "dodgerBlue",
  "red",
  "#fff200",
  "limeGreen",
  "slateGrey",
  "orange",
  "hotPink", 
  " #080808"
];

// syntax use 

console.log(colors.random())

edited Aug 29 '21 at 01:40

LeeLenalee

27,463
6
45
69

answered Aug 29 '21 at 01:05

Gultekin Ahmed

78
2

2

This does indeed provide a random color but not like op asked, op asked to get 1-8 random colors so some times it gives 1 random color, some times 3, some times 7 etc. – LeeLenalee Aug 29 '21 at 01:44

Get random number of colors from a list instead of 8

3 Answers3