# Edit in JSFiddle

```/*
Written by Vinyasi in 2016, copyleft.
*/

function gcd_randomizing_demo(count, limit) {

// 'count' is the maximum quantity of random numbers
// 'limit' is the maximum size of each multiplier

var text = ''; // is returned to the function call

text += '<table class="chart" border="3" cellpadding="4" cellspacing="15">' + "\n";
text += '<caption><b>' + "\n";
text += 'The&nbsp;Euclidean&nbsp;Algorithm' + "\n";
text += '</b></caption>' + "\n";
text += '<tr style="background-color: #ffeecc"><th>' + "\n";

// Alter these four values if you like...
var min = 10; // minimum size of random number seeds
var size = 500; // size limit of random number seeds
var limb = 1; // multiplier minimum size
var kows = 1; // is the maximum quantity of multipliers

var x;
var i;
var v;
var w;
var mult = 1; // preinitialize the composite multiplier

// This has to be at least one greater than the largest possible random number.
// Otherwise, the sort function will push all the numbers to the
// top of the terms array and begin to cut them out a little at a time!
var numeric_padding = (size * Math.pow(limit, kows)) + 1;

var cows = Math.floor((Math.random() * (kows - 1)) + 1); // actual quantity of multipliers

var multiplier = [];
for (x = 0; x < cows; x++) {
multiplier[x] = Math.floor((Math.random() * (limit - 1)) + limb);
mult = mult * multiplier[x];
}

var cownt = Math.floor((Math.random() * (count - 1)) + 2); // actual quantity of random numbers
var save_cownt = cownt;

text += cownt + ' random numbers';

var terms = [];
var booboo;
var color_orange;

for (i = 0; i < cownt; i++) {
terms[i] = Math.floor((Math.random() * (size - 1)) + min);

for (w = 0; w < i; w++) // test for duplicate random numbers and try again if true
{
if (terms[i] == terms[w]) {
booboo = true;
i--;
break;
}
}

if (i % 2 === 0) {
color_orange = 'ffd5a2';
} else {
color_orange = 'ffeecc';
}

if (!booboo) {
text += '</th><th style="background-color: #' + color_orange + '">' + "\n";
text += terms[i] + "\n";
} else {
booboo = false;
}
}

text += '</th></tr>' + "\n";
text += '<tr style="background-color: #ffeecc"><th>' + "\n";
text += 'multiply by ' + mult + "\n";

var holds = [];
for (i = 0; i < cownt; i++) {
for (x = 0; x < cows; x++) {
terms[i] = terms[i] * multiplier[x];
}
holds[i] = terms[i];

if (i % 2 === 0) {
color_orange = 'ffd5a2';
} else {
color_orange = 'ffeecc';
}

text += '</th><th style="background-color: #' + color_orange + '">' + "\n";
text += terms[i] + "\n";
}

text += '</th></tr>' + "\n";
text += '<tr style="background-color: #ddffdd"><th>' + "\n";
text += 'sort from left to right' + "\n";

var kount = cownt;
var remains = [];
remains[0] = 0;

terms.sort(function(a, b) {
return a - b;
});

var color_lime;

for (i = 0; i < cownt; i++) {

if (i % 2 === 0) {
color_lime = 'b3ffb3';
} else {
color_lime = 'ddffdd';
}

text += '</th><th style="background-color: #' + color_lime + '">' + "\n";
text += terms[i] + "\n";
}

text += '</th></tr>' + "\n";
text += '<tr style="background-color: #ddffdd"><th>' + "\n";
text += 'shift to the right' + "\n";
text += '</th><th style="background-color: #b3ffb3">' + "\n";
text += '0' + "\n";

for (i = 0; i < (cownt - 1); i++) {
remains[i + 1] = terms[i];

if (i % 2 !== 0) {
color_lime = 'b3ffb3';
} else {
color_lime = 'ddffdd';
}

text += '</th><th style="background-color: #' + color_lime + '">' + "\n";
text += remains[i + 1] + "\n";
}

text += '</th></tr>' + "\n";
text += '<tr style="background-color: #d5ffff"><th>' + "\n";
text += 'modulo remainder' + "\n";

// comment out the following 'while' loop and uncomment
// the two lines immediately afterwards for debugging
while (kount > 1)
//var q;
//for (q = 0; q < 4; q++)
{

cownt = kount;

for (i = 0; i < save_cownt; i++) {
if (i === 0) {
remains[i] = terms[i];
} else {
remains[i] = terms[i] % remains[i];
}

var color_cyan;

// print out remains
if (i % 2 === 0) {
color_cyan = 'a0ffff';
} else {
color_cyan = 'd5ffff';
}
text += '</th><th style="background-color: #' + color_cyan + '">' + "\n";

text += remains[i] + "\n";
} else {
text += '&nbsp;' + "\n";
}
}

// uncomment the following line for debugging
//if (q == 3) { break; }

for (v = 0; v < save_cownt; v++) {
}

kount = 0;

for (i = 0; i < cownt; i++) {
if (remains[i] !== 0) {
terms[i] = remains[i];
kount++;
}
}

if (kount > 1) {
terms.sort(function(a, b) {
return a - b;
});

text += '</th></tr>' + "\n";
text += '<tr style="background-color: #ddffdd"><th>' + "\n";
text += 'sort from left to right' + "\n";

// print out terms
for (v = 0; v < save_cownt; v++) {
if (v % 2 === 0) {
color_lime = 'b3ffb3';
} else {
color_lime = 'ddffdd';
}
text += '</th><th style="background-color: #' + color_lime + '">' + "\n";

text += terms[v] + "\n";
} else {
text += '&nbsp;' + "\n";
}
}

text += '</th></tr>' + "\n";
text += '<tr style="background-color: #ddffdd"><th>' + "\n";
text += 'shift to the right' + "\n";
text += '</th><th style="background-color: #b3ffb3">' + "\n";
text += '0' + "\n";

remains[0] = 0;

// print out prior remains shifted to the right
for (v = 1; v < save_cownt; v++) {
if (v % 2 === 0) {
color_lime = 'b3ffb3';
} else {
color_lime = 'ddffdd';
}
text += '</th><th style="background-color: #' + color_lime + '">' + "\n";

remains[v] = terms[v - 1];
text += remains[v] + "\n";
} else {
text += '&nbsp;' + "\n";
}
}

text += '</th></tr>' + "\n";
text += '<tr style="background-color: #d5ffff"><th>' + "\n";
text += 'modulo remainder' + "\n";

// uncomment either of the following two lines for debugging
//if (q == 5) { break; }
//		text += '*' + kount + '*';

}

}

text += '</th></tr></table>' + "\n";

var pretext = '<h2>' + "\n"; // is returned to the function call
pretext += 'The <big>GCD</big> of ';

// print out holds
for (v = 0; v < save_cownt; v++) {
if (v < (save_cownt - 2)) {
pretext += '<big>' + holds[v] + '</big>, ';
} else if (v == (save_cownt - 2)) {
pretext += '<big>' + holds[v] + '</big> and ';
} else if (v == (save_cownt - 1)) {
pretext += '<big>' + holds[v] + '</big>';
}
}

pretext += ' is <span style="color: red"><big>' + terms[0] + '</big></span>.' + "\n\n";
pretext += '</h2>' + "\n\n";

return pretext + text;

}

var howManyIntegers = 4;
var largestMultiplier = 5;
var outputText = gcd_randomizing_demo(howManyIntegers, largestMultiplier);

document.getElementById("demonstration").innerHTML = outputText;
```
```<div align="center">

<span id="demonstration"></span>

</div>
```