How to do Butterfly Shuffle in JavaScript?

A butterfly shuffled array in JavaScript is an array of Numbers that is sorted such that the numbers decrease as we approach the center of array and increase as we approach the end of array. The biggest number is placed at the very first index.

Another variation of butterfly shuffled array is where the numbers increase towards the center and decrease towards the end. In this case the smallest number is placed at the very first index.

For people who come from a Mathematics background, it's somewhat relatable to the Gaussian distribution.

Example

Suppose we have this array:

const arr = [8, 2, 6, 3, 9, 1, 4, 5, 0, 7];
console.log("Original array:", arr);

Original array: [ 8, 2, 6, 3, 9, 1, 4, 5, 0, 7 ]

If we apply butterfly shuffling to it, the output will be:

[9, 7, 5, 3, 1, 0, 2, 4, 6, 8]

See how the biggest and second biggest numbers are placed at extreme ends and the smallest number at center.

Another possibility can be:

[0, 2, 4, 6, 8, 9, 7, 5, 3, 1]

Our job is to write a function that takes in an array of Numbers and a string as the second argument, the string can take any of the two values 'asc' or 'des':

• If string is 'des' then we have to shuffle the array in decreasing to increasing order (peak in center).

• If it's 'asc' then we have to shuffle the array in increasing to decreasing order (valley in center).

Approach

If the string is 'asc' we initially sort the array in ascending order otherwise in descending order. So, consider the function was called with 'asc', then the array now would look like:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

We then split the array into two arrays such that adjacent elements are distributed in opposite arrays. We push elements in one array while we unshift them in the other, so that one array gets reversed without having us to do this manually.

The two arrays thus formed will look like:

[ 0, 2, 4, 6, 8 ] [ 9, 7, 5, 3, 1 ]

Now the last step is to concatenate these arrays and after which we will get our required array.

Implementation

const array = [8, 2, 6, 3, 9, 1, 4, 5, 0, 7];

const butterflyShuffle = (array, order = 'asc') => {
    // creating a new copy of array so that we dont mutate the original array
    const arr = array.slice();
    // sorting ascending or descending based on the argument
    arr.sort((a, b) => order === 'asc' ? a - b : b - a);
    
    const first = [], second = [];
    // this variable will later help in determining which array is to be reversed
    // and which one is to be concatenated to which
    // if length is even, it means that last element will go in second array
    // otherwise it will go in first array
    const isEven = arr.length % 2 === 0;
    
    for (let i = 0; i < arr.length; i++) {
        if (i % 2 === 0) {
            isEven ? first.push(arr[i]) : first.unshift(arr[i]);
            continue;
        }
        isEven ? second.unshift(arr[i]) : second.push(arr[i]);
    }
    
    return isEven ? second.concat(first) : first.concat(second);
};

console.log("Butterfly shuffle (asc):", butterflyShuffle(array));
console.log("Butterfly shuffle (des):", butterflyShuffle(array, 'des'));

Butterfly shuffle (asc): [
  9, 7, 5, 3, 1,
  0, 2, 4, 6, 8
]
Butterfly shuffle (des): [
  0, 2, 4, 6, 8,
  9, 7, 5, 3, 1
]

How It Works

The algorithm works by distributing elements alternately into two arrays after sorting. The key insight is using push and unshift strategically to create the butterfly pattern without explicit reversal operations.

Visual Pattern

Conclusion

The butterfly shuffle creates a unique distribution pattern where elements are arranged to form peaks or valleys in the center. This technique is useful for data visualization and special sorting requirements where you need a mountain or valley-like distribution.