- subtract the value of position 2 from the value of position 1 in our array. (lets call this "diff1and2" for ease)
- find the maximum of "diff1and2" and 0. We do this as a way of saying "if 1 is bigger than 2, we want a positive value, but if 2 is bigger than 1 we want to return 0". Lets call the result of this "1greaterOrZero".
- then we take "OneGreaterOrZero " and make sure it is not greater than 1 by using
Min. So if "OneGreaterOrZero" was 6, we would reduce that to 1, but if it was 0 then we would return 0.
Still confused? Here it is in JS effectively:
let pos1 = 7;
let pos2 = 15;
let diff1and2 = pos1 - pos2;
//if "diff1and2" is negative the next step will change it to 0;
let OneGreaterOrZero = Math.max(diff1and2, 0);
let result = Math.min(1, OneGreaterOrZero);
console.log(diff1and2, OneGreaterOrZero, result); //always between 0 and 1 as false / true representation.
swapping array positions
So how do we swap positions in our "array"?
For bubble sort to work we need to be able to swap 2 values if the first value is larger than the second.
We can't do any temp variable magic like we would in JS.
Well, that is what this is for:
--arr1s1: calc(var(--is-2-greater-1-step-1) * var(--arr1s0) + var(--is-1-greater-2-step-1) * var(--arr2s0));
--arr2s1: calc(var(--is-1-greater-2-step-1) * var(--arr1s0) + var(--is-2-greater-1-step-1) * var(--arr2s0));
Yet again, looks complicated, is actually reasonably simple in principle.
In our previous "function", we created a boolean to see if 1 was greater than 2. So we have either a 1 or a 0 there.
We can also easily get the inverse of this:
--is-2-greater-1-step-1: (1 - var(--is-1-greater-2-step-1));
The beauty of this is that we can now do the following trick:
// in bubble sort, if 1
origArray = [7,2];
// we run our previous functions to get our 2 variables:
oneIsGreater = 1;
twoIsGreater = 0;
// we can now multiply the values together. If [2] is greater than one then we will return the same value. But if [1] is greater than [2] then we will swap the values.
newArray[0] = (twoIsGreater * origArray[0]) + (oneIsGreater * origArray[1]);
newArray[1] = (oneIsGreater * origArray[0]) + (twoIsGreater * origArray[1]);
// which is the same as this:
newArray[0] = 0 * 7 + 1 * 2; //2
newArray[1] = 1 * 7 + 0 * 2; //7
Neat trick huh? and if oneIsGreater and twoIsGreater were swapped then it would just return the original values!
origArray = [7,2];
oneIsGreater = 0;
twoIsGreater = 1;
//same "function"
newArray[0] = (twoIsGreater * origArray[0]) + (oneIsGreater * origArray[1]);
newArray[1] = (oneIsGreater * origArray[0]) + (twoIsGreater * origArray[1]);
// which is the same as this:
newArray[0] = 1 * 7 + 0 * 2; //7
newArray[1] = 0 * 7 + 1 * 2; //2
And that is effectively all we need to do a bubble sort!
The only reason we have so much CSS is because we cannot do loops in vanilla CSS (yet). So we have to manually write out the swaps for each stage of bubble sort:
- check and if needed swap 1 and 2
- check and if needed swap 2 and 3
- check and if needed swap 3 and 4
- check and if needed swap 4 and 5
- check and if needed swap 1 and 2
- check and if needed swap 2 and 3
- check and if needed swap 3 and 4
- check and if needed swap 1 and 2
- check and if needed swap 2 and 3
- check and if needed swap 1 and 2
That's all folks!
As I said, not a tutorial. But I did want to introduce some interesting CSS "switches" and "booleans" that may become useful in some strange scenario in the future for you!
I hope you enjoy my silliness.
Now I just have to wait for someone to ask me if I can implement Bubble sort so I can flex on them with my CSS silliness! ๐คฃ๐