Try & Err / Sort & Shuffle / Visuals of April 29th

Yesterday I was thinking about a shuffling algorithm. It was first a simple concept of walking through every elements of an array and randomly choose if that element should be moved forward, backward or stay at the same place.

My first implementation was to make use of Array.sort() with Math.round(Math.random()*2–1) as the sorting function. I looked at the results in the console and noticed something rather odd: several elements are not changed after several iterations. I tried to find what was wrong and printed the logs out on a piece of paper. I got bored and traced the displacements of elements to see what sort of cool visualization that might emerge. Took this picture and posted to Unedited Smartphone Aesthetic Pics (one of my favorites group on Facebook to post pictures I took):

My first data for testing was the alphabet. I traced the displacements of letter J, X and W. It didn’t look very nice.

Since the visualization looked pretty dull, I didn’t think there was much meaning to it. Still curious, I went and put together a script that visualizes the shuffling. When I was coding it, I realized what was wrong: Math.round(Math.random()*2–1) ranges from [-1,1] but it distributes more around 0 because 1/2 of the range (-0.5,0.5) rounds down to it. It looked like this:


Each line represents a shuffle iteration. The data was simply an array of numbers mapped to the brightness of a pixel. As you can see, many elements stayed at the same point. I didn’t really notice at the time that the elements near the center of the array don’t get moved often ( I later found out about shuffling biases).

Of course, it wasn’t really hard to fix that range issue (but still yield a very horrible shuffling algorithm): Math.round(Math.random()*3–1.5). Not until the time of this writing that I made my way back to this shuffling bias visualizer by Mike Bostock which you can go and check out how bad these two algorithms are.

And… I got bored again and started to fiddle around with Array.sort() compare-functions. I tried out lots of it. Some yield pretty interesting visual results. I didn’t keep most of the compare-functions I tested, but here’s a roll of them.

This has Math.sin() in it. I came back to it later.
data.sort( function(a,b) { return b&i; }); // i is the number of iterations.
I don’t quite remember what this one was, but you can see that all the elements on the right side is always sorted to the right.
I also made some large ones that took up the whole screen
This one has Math.tan() in it.

I thought of implementing this as my website’s background image and came back to the Math.sin() compare-function. Surprisingly, it creates a handful of interesting results, which I can use to create a dynamic background. The code for the entire thing current looks like this:

var c_= document.getElementById(“c”), //the canvas
c = c_.getContext(“2d”),
w = c_.width = window.innerWidth,
h = c_.height = window.innerHeight;
var l = 20;
var r = Math.random()*1024<<1;
for(var arr = [], i = -1; arr.length < w/l; arr.push(arr.length));
while( ++i < h/l )
arr.sort(function(a,b) { return Math.sin((b-a)*r); });
for(var j=0; j < arr.length; j++)
c.fillStyle = “hsla(“+r+(arr[j]/arr.length*130)+”,50%,70%,1)”;
And here are the results
It became more interesting
There are even ones that look symmetrical
And this one is my personal favorite
But of course, there were coefficients that resulted dull ones
Or even just… normal sorting!

Interestingly, Firefox doesn’t yield the same results. Someone mentioned it might have been the way the browsers differ in sorting algorithm, and MDN said some browsers don’t guarantee the unchanged behavior when the sort function returns 0.

I hope you enjoyed the things I fiddled with 12 hours ago :) -kpn