What is the best way to select a color at random from an array without any duplicates?

Question

What is the best way to select a color at random from an array without any duplicates?

When iterating through a group of 15 users to create a table row for each user, I am interested in randomly choosing a color from my theme's array of 4 colors for each user. How can I efficiently ensure that no two identical colors are next to each other?

Furthermore, is there a way to generate the colors in a way that appears as random as possible on a larger scale? I want to avoid a pattern where it looks like I am simply cycling through the 4 colors in order, resulting in the same sequence every 4 users.

javascript arrays

Answer 1

Answer №1

A different way to phrase the question would be:

What is the method to select a random index in an Array that is different from the previously selected index?

The solution involves keeping track of the previous index and selecting a new one until it is different. Here is a general solution to achieve this:

function randomOver(arr) {
  let last = 0 
  return () => {
    let i = last
    while (i == last) i = Math.floor(Math.random() * arr.length)
    return last = i
  }
}

const colors = ['pink', 'violet', 'coral', 'khaki'],
      getIndex = randomOver(colors),
      list = document.getElementById('list')
for (let i = 0; i < 15; i++) {
  const e = document.createElement('tr'),
        x = getIndex()
  e.textContent = 'user' + i 
  e.style.backgroundColor = colors[x]
  list.appendChild(e)
}

<table id='list'></table>

This method ensures a high level of randomness. However, does it result in a visually appealing outcome? The answer to that question is not entirely clear.

Answer 2

A different way to phrase the question would be:

What is the method to select a random index in an Array that is different from the previously selected index?

The solution involves keeping track of the previous index and selecting a new one until it is different. Here is a general solution to achieve this:

function randomOver(arr) {
  let last = 0 
  return () => {
    let i = last
    while (i == last) i = Math.floor(Math.random() * arr.length)
    return last = i
  }
}

const colors = ['pink', 'violet', 'coral', 'khaki'],
      getIndex = randomOver(colors),
      list = document.getElementById('list')
for (let i = 0; i < 15; i++) {
  const e = document.createElement('tr'),
        x = getIndex()
  e.textContent = 'user' + i 
  e.style.backgroundColor = colors[x]
  list.appendChild(e)
}

<table id='list'></table>

This method ensures a high level of randomness. However, does it result in a visually appealing outcome? The answer to that question is not entirely clear.

What is the best way to select a color at random from an array without any duplicates?

Answer №1

Similar questions

When using mongoose, is it possible to add a new item and retrieve the updated array in one endpoint?

Which HTML element does each script correspond to?

Utilizing various camera set-ups within Three.js

What is the best way to merge angularjs modules?

Implementing a string replacement within an array of objects using TypeScript

Tips for adjusting the height of a Safari extension during runtime

The Lua UI text contains numerous strings, each with the presence of the word "or"

There seems to be an issue with Material UI Autocomplete not responding to the onChange value

Is it possible to transform a ReadonlyArray<any> into a standard mutable array []?

Error: Invalid argument provided for foreach() function when attempting to iterate over an array containing JSON objects

Ways to disable mousewheel function in jQuery

How can I stop an element from losing focus?

Exploring the world of Node.JS and AngularJS through the integration of API routes

Monitoring user engagement using Socket.io and Firebase

When using Angularjs and UIRouter, calling event.preventDefault() will prevent the default browser behavior and

Utilizing node.js with restify to manage an array parameter

Using Node.js to Send Emails via API

Is the vertex count of a Geometry in Three.js increased when it is converted to a BufferGeometry?

Injecting Vibrant Lines into Browser Using three.js

Tips for transmitting a batch of resources with Restangular?