<html>
<head>
    <meta http-equiv="Refresh" content="1.33;URL=patternmaker3.htm">
    
    <script language="javascript">
        // Global vars
        var listOfa = new Array();  // optional to store random vals of a
        var listOfb = new Array(); // optional to store random vals of b

        var MAXROWS = 20; var MAXCOLS = 30;

        var symb1 = '\u2596';  
        var symb2 = '\u259D'; 
        var symb3 = '\u2598';
        var symb4 = '\u2597';
        // see https://en.wikipedia.org/wiki/List_of_Unicode_characters for unicode char codes
        
     
        // Define functions
        function makePattern()
        {
            for (var row = 0; row < MAXROWS; row++)
            {
                for (var cols = 0; cols < MAXCOLS; cols++)
                {
                    var a = Math.floor(Math.random() * 3);
                    var s = "";
                    if (a % 2 == 0) { s = symb1; } else { s = symb2; } //intentionally avoided short-hand ? and : syntax to allow multiple actions for each condition
                    document.write(s);
                    listOfa.push(a); // optional. load the random value of a in array

                    var t = "";
                    var b = Math.floor(Math.random() * 2);
                    if (b % 2 == 0) { t = symb3; } else { t = symb4; } //intentionally avoided short-hand ? and : syntax to allow multiple actions for each condition
                    document.write(t);
                    listOfb.push(b);  // optional. load the random value of b in array

                } // for cols

                document.writeln("<br>");
                                
            } //for rows

        } // end function pattern
        
        function dumpRandNums() //optional function to dump the arrays values
        {
            /*
            Simple write without styling:
            document.writeln("<br />"); 
            document.writeln("Array 1 content: " + listOfa); 
            document.writeln("<br />");
            document.writeln("Array 2 content: " + listOfb); 
            */

            document.getElementById('dump1').style.font = "10px calibri,arial";
            document.getElementById('dump1').style.color = '#488AC7';

            document.getElementById('dump2').style.font = "normal normal 10px calibri,arial";            document.getElementById('dump2').style.color = '#56A5EC';            listOfa.splice(0, 500);            listOfb.splice(0, 500);            document.getElementById('dump1').innerHTML = "Array 1 (condensed view) contents: " + listOfa + "...";            document.getElementById('dump2').innerHTML = "Array 2 (condensed view) contents: " + listOfb + "...";            document.writeln("<br /><br />");
        }

    </script>


</head>
<!-- <body onload="makePattern()"> -->
<body>
    <div id="copyright" style="line-height: 18px; font-size:18px; font-style:italic; font-family: Calibri; color:#F6358A">
        © Tony Rahman, flyingsalmon.net. This code cannot be reproduced or republished without explicit consent from tanman1129@hotmail.com<br />
    </div>
    <div id="headline" style="line-height: 18px; font-size:18px; font-weight:bold; font-family: Calibri; color:#6C2DC7">
        DEMO: Mesmerizing random patterns being generated forever...<br />What are the odds of a pattern repeating exactly the same way? UNLIKELY!<br /><br />
    </div>

    <div id="dump1"></div><div id="dump2"></div>

    <script>makePattern();</script>
    <script>dumpRandNums();</script>



</body>
</html>