Randomly select shapes from an array in Javascript

Question

Randomly select shapes from an array in Javascript

When trying to randomly select two or three shapes from an array, I encountered difficulties. Here is the code I attempted:

var range = _.sample(shapes, 2);

Although this code runs, it does not provide a truly random selection.

var range = shapes.length-2 * Math.random();

javascript arrays random underscore.js

Answer 1

Answer №1

Update It appears that the question is specific to underscore.js, not arrays in general. Here's a brief update:

It seems like you're using the _.sample() function correctly, but make sure to treat the result as an array when selecting multiple values:

var shapes = ['circle','star','square','hexagon','triangle','polygon'];
var range = _.sample(shapes, 2);  // => ["square", "triangle"]; (example output)

Therefore, there's no need for using Math.random() to choose items since the selection is already random. Simply loop through the array to access each value.

Example

... other code ...

for(var i = 0, shape; shape = range[i]; i++) {  // will iterate through the range array

    switch(shape) {                             // current item
        case "square":                          // (not 0 etc. as in the original code)
            ... code for square here...
            break;

        case "triangle":
            ... code for triangle here...
            break;

        ... etc. ...
    }
}

Old answer

Answer 2

Update It appears that the question is specific to underscore.js, not arrays in general. Here's a brief update:

It seems like you're using the _.sample() function correctly, but make sure to treat the result as an array when selecting multiple values:

var shapes = ['circle','star','square','hexagon','triangle','polygon'];
var range = _.sample(shapes, 2);  // => ["square", "triangle"]; (example output)

Therefore, there's no need for using Math.random() to choose items since the selection is already random. Simply loop through the array to access each value.

Example

... other code ...

for(var i = 0, shape; shape = range[i]; i++) {  // will iterate through the range array

    switch(shape) {                             // current item
        case "square":                          // (not 0 etc. as in the original code)
            ... code for square here...
            break;

        case "triangle":
            ... code for triangle here...
            break;

        ... etc. ...
    }
}

Old answer

Answer 3

Answer №2

This code snippet selects a random element from an array.

var shape = shapes[Math.floor(Math.random() * shapes.length)];

To make this process more user-friendly, you can convert it into a function like this:

function getRandomElement(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

Now, it becomes simple to pick multiple random elements from the array:

var shape1 = getRandomElement(shapes);
var shape2 = getRandomElement(shapes);

However, there's a chance that both shape1 and shape2 could be the same. To avoid this, we can modify the function to ensure uniqueness:

function getUniqueRandomElements(arr, count) {
  if (!count) count = 1;
  
  var copy = arr.slice(0);
  var result = [];
  
  for (var i=0; i<count; i++) {
    var index = Math.floor(Math.random() * copy.length);
    
    result = result.concat(copy.splice(index, 1));
  }
  
  return result;
}

With this version of the function, duplicates are eliminated:

var letters = ["a", "b", "c", "d", "e"];
getUniqueRandomElements(letters, 3); // ["e", "c", "b"]
getUniqueRandomElements(letters, 3); // ["e", "a", "d"]
getUniqueRandomElements(letters, 3); // ["c", "a", "b"]

A useful enhancement can be made to this code by incorporating card shuffling functionality. Consider these two approaches:

Select 2 cards randomly from a sorted/unsorted deck
Shuffle the deck and pick 2 cards from the top

The existing getUniqueRandomElements function aligns with method #1. By adjusting it to match method #2, we can obtain a shuffle function as well!

Here's how the modified function would look:

function getRandomNumber(x) {
  return Math.floor(Math.random() * x);
}

function shuffleCards(deck) {
  var copy = deck.slice(0);
  return deck.reduce(function(shuffledDeck, card) {
    var position = getRandomNumber(copy.length);
    return shuffledDeck.concat(copy.splice(position, 1));
  }, []);
}

function getUniqueRandomElements(arr, n) {
  return shuffleCards(arr).slice(0, n || 1);
}

By taking this approach, we achieve our initial goal while gaining reusable functions getRandomNumber and shuffleCards. This demonstrates the power of writing getUniqueRandomElements as a higher-order procedure! 🌟

Answer 4

This code snippet selects a random element from an array.

var shape = shapes[Math.floor(Math.random() * shapes.length)];

To make this process more user-friendly, you can convert it into a function like this:

function getRandomElement(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

Now, it becomes simple to pick multiple random elements from the array:

var shape1 = getRandomElement(shapes);
var shape2 = getRandomElement(shapes);

However, there's a chance that both shape1 and shape2 could be the same. To avoid this, we can modify the function to ensure uniqueness:

function getUniqueRandomElements(arr, count) {
  if (!count) count = 1;
  
  var copy = arr.slice(0);
  var result = [];
  
  for (var i=0; i<count; i++) {
    var index = Math.floor(Math.random() * copy.length);
    
    result = result.concat(copy.splice(index, 1));
  }
  
  return result;
}

With this version of the function, duplicates are eliminated:

var letters = ["a", "b", "c", "d", "e"];
getUniqueRandomElements(letters, 3); // ["e", "c", "b"]
getUniqueRandomElements(letters, 3); // ["e", "a", "d"]
getUniqueRandomElements(letters, 3); // ["c", "a", "b"]

A useful enhancement can be made to this code by incorporating card shuffling functionality. Consider these two approaches:

Select 2 cards randomly from a sorted/unsorted deck
Shuffle the deck and pick 2 cards from the top

The existing getUniqueRandomElements function aligns with method #1. By adjusting it to match method #2, we can obtain a shuffle function as well!

Here's how the modified function would look:

function getRandomNumber(x) {
  return Math.floor(Math.random() * x);
}

function shuffleCards(deck) {
  var copy = deck.slice(0);
  return deck.reduce(function(shuffledDeck, card) {
    var position = getRandomNumber(copy.length);
    return shuffledDeck.concat(copy.splice(position, 1));
  }, []);
}

function getUniqueRandomElements(arr, n) {
  return shuffleCards(arr).slice(0, n || 1);
}

By taking this approach, we achieve our initial goal while gaining reusable functions getRandomNumber and shuffleCards. This demonstrates the power of writing getUniqueRandomElements as a higher-order procedure! 🌟

Randomly select shapes from an array in Javascript

Answer №1

Answer №2

Similar questions

Comparison of the performance between using closure for array traversal versus a traditional for loop

The React application is showing an empty page without any visible errors during the compilation process

How to enable sound on Internet Explorer Mobile 6

Is it necessary to use asynchronous actions in Node.js only when developing server applications?

Incorporating Up and Down Arrows Based on Order Classification

Managing component composition in React/TypeScript: What's the best way to approach it?

Creating dual modes (night/day) for your AngularJS application

What is the best way to refresh the text within a span element?

What is the most effective method to query Prisma using a slug without utilizing a React hook?

Tips for efficiently handling multiple form inputs using PHP

Error encountered: The fiber texture failed to load due to a component becoming suspended during the response to synchronous input

Implementing image-based autocomplete in a search bar within an MVC framework

Issue with firestore IN query when encountering NULL value

Is there a way to extract the HTML source code of a website using jQuery or JavaScript similar to PHP's file_get_contents function?

Unable to transfer content to clipboard from a Popper element nested within a Dialogue component in Material-UI

What is the best way for a parent process to interrupt a child_process using a command?

One-click process succeeds where two clicks fail

How can React hook state be efficiently utilized in a debounced callback?

Is there a way to save a collection of audio samples as a wav file using Node.js?

Error with react/display-name in ESLint when using dynamic imports in Next.js