title: Graphical pattern generation in jQuery
body: <p>I am trying to build a -primitive- pattern generator in jQuery that essentially goes over 1x1 pixel and determines, depending on the value in the preceding pixel, what the one in question is going to look like. </p>
  
  <p>Seeing as I am relatively proficient in jQuery but unfortunately rather oblivious to the ways of the RequestAnimFrame API, realizing the 1x1 pixel approach results in an extremely slowed down execution, making most browsers assume the script has crashed (?) even though it is in fact working, but essentially, really slow.</p>
  
  <p>I have therefore tested it in bigger tile sizes because they are naturally easier to generate. My question at this point is - should I throw the jQuery approach aside and revise the script in the abovementioned API or is there a way to make it more efficient and realistically working with jQuery?</p>
  
  <p>Link to code: <a href="http://codepen.io/Grovelli/pen/yepMRZ/" rel="nofollow">http://codepen.io/Grovelli/pen/yepMRZ/</a></p>
  
  <p>PS: Please excuse the trivial comments in the code</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      // run once
      $(function() {
  
  
          //###############################################
          //
          // Default variables
          //
          //###############################################
  
          var smallSquareWidth = 20; // size of single tile
          var smallSquareHeight = 10;
          var bigSquareWidth = 300; // size of tile box
          var bigSquareHeight = 300;
  
          var orientationPoint = 0; // point of orientation for pattern drawing
  
          // Tile library
          var tileArray = ["#00ff5a", "#02d24b", "#01b13f", "#039737", "#027d2d", "#02521e"];
  
  
  
          // assign a random color from the color array tileArray   
          function drawTile() {
  
              var selectedi;
  
              // if selectedi is not 2, then roll the dice    
              if (orientationPoint == 0) {
                  // returns value of array item in question
                  selectedi = Math.floor(Math.random() * tileArray.length);
                  //alert("No 2, rolling dice");
              }
  
              // if dice return 2, then start building pattern until termination, i.e. orientationPoint being set back to 0
              if (selectedi == 2) {
                  orientationPoint = 1; // disables the random throw above
                  //alert("got 2! building pattern now!");
  
                  chosenTile_Hex = tileArray[0];
                  orientationPoint++;
              }
              if (orientationPoint == 2) {
                  chosenTile_Hex = tileArray[1];
                  orientationPoint++;
                  return chosenTile_Hex;
              } else if (orientationPoint == 3) {
                  chosenTile_Hex = tileArray[2];
                  orientationPoint++;
                  return chosenTile_Hex;
              } else if (orientationPoint == 4) {
                  chosenTile_Hex = tileArray[3];
                  orientationPoint++;
                  return chosenTile_Hex;
              } else if (orientationPoint == 5) {
                  chosenTile_Hex = tileArray[4];
                  orientationPoint = 0; // resets / turns off pattern building
  
                  //alert("done building pattern");
                  return chosenTile_Hex;
              }
  
              // return random  array item
              var chosenTile = selectedi; // .length is preferrable to size in this case
              var chosenTile_Hex = tileArray[selectedi]; // use value of selectedi to determine which color to use for the tile i.q.
  
              /*
              // show at which position the background color value of #nChildren-1 is found within the tileArray array
              //alert("found at " + (jQuery.inArray( orientationPoint, tileArray)));
              var orient_pos = jQuery.inArray(orientationPoint, tileArray);
              //alert(orient_pos);
  
              //alert(tileArray[orient_pos + Math.floor(Math.random() * 3) - 2]);
              $("#" + (nChildren - 1)).css("background-color", tileArray[orient_pos + Math.floor(Math.random() * 3) - 2]);
              */
  
  
              //alert(chosenTile);
              //alert(nextTile);
              //alert(chosenTile_Hex);
              return chosenTile_Hex;
          }
  
  
          //###############################################
  
          // Append the main container, bigSquare to the body of the HTML file
          $("&lt;div class='bigSquare' style='position:aboslute; width:" + bigSquareWidth + "px; height:" + bigSquareHeight + "px;'&gt;&lt;/div&gt;").appendTo("body");
  
  
  
          /* random colors calc function
  
          // A function to create random HEX color codes
          function randomHex() {
              var hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
              //creates a random hex color code
              var randomHexCode = '' + hexArray[Math.floor(Math.random() * 16)] + '' +
                  hexArray[Math.floor(Math.random() * 16)] + '' +
                  hexArray[Math.floor(Math.random() * 2)] + '' +
                  hexArray[Math.floor(Math.random() * 16)] + '' +
                  hexArray[Math.floor(Math.random() * 16)] + '' +
                  hexArray[Math.floor(Math.random() * 16)];
  
  
  
              // spit out a random hex code when the function terminates
              return randomHexCode;
          } */
  
  
          // Calculate the total number of children
          var nLines = bigSquareHeight / smallSquareHeight; // per column
          var nPerLine = bigSquareWidth / smallSquareWidth; // and per row
  
          // Generate as many rows as fit into .bigSquare 
          for (var k = 1; k &lt;= nLines; k++) {
  
              // per row, generate as many smallSquares as fit each row
              for (var i = 1; i &lt;= nPerLine; i++) {
  
  
                  // nChildren is the accumulating number of children elements in .bigSquare
                  var nChildren = $('.bigSquare').children().size();
  
  
  
                  // pass the accumulating number to each newly generated div 
                  // to give each div a unique id label
                  $("&lt;div class='smallSquare' id='" + nChildren + "' style='width:" + smallSquareWidth + "px; height:" + smallSquareHeight + "px; float:left;'&gt;&lt;/div&gt;").appendTo(".bigSquare");
  
                  $("#" + nChildren).css("background-color", drawTile);
                  // var orientationPoint = rgb2hex($("#" + (nChildren - 1)).css("background-color"));
                  //alert(orientationPoint);
  
                  //alert(nChildren);
                  //alert(($("#" + nChildren).css("background-color")));
  
  
  
                  /*$('#' + nChildren + '').hide();
  
  
                  //alert(eval(k+i));
  
  
                  //###################################
                  // saving both k and i in a closure context to reuse them in INNER functions, e.g. setTimeout
                  (function(nChildren) {
  
                      setTimeout(function() {
                          $('#' + nChildren + '').fadeIn('slow');
                          //alert('#'+''+k+i+'');
  
                      }, nChildren * 18);
  
                  })(nChildren);*/
  
  
                  // first for loop END
              }
  
              // second for loop END      
          }
  
  
  
          //the code below returns the number of child elements of bigSquare
          //alert($('.bigSquare').children().size());
  
  
          setInterval(function() {
              //alert("interval");
              for (var h = 0; h &lt;= nChildren; h++) {
                  //alert(h);
                  //alert(randomHex());
                  //$('#'+h+'').css('background-color',randomHex);
  
              }
          }, 2000);
  
  
  
  
  
          //alert($(".bigSquare").children(1).width());
  
  
  
          //for centering purposes...
          function centerElement() {
  
              //resetting the margin properties each time the function is called
              // to avoid margin addups 
              $('.bigSquare').css('margin-left', "0");
              $('.bigSquare').css('margin-top', "0");
  
  
              var getPageWidth = $(window).width();
              var getPageHeight = $(document).height(); //alert(getPageHeight);
              var centerPosX = getPageWidth / 2 - bigSquareWidth / 2;
              var centerPosY = getPageHeight / 2 - bigSquareHeight / 2;
  
              //alert(centerPosX);
              //alert(centerPosY); CAREFUL ENABLING THIS AND RESIZING 
              // MIGHT FREEZE FF ON MACs
              $('.bigSquare').css('margin-left', centerPosX + "px");
  
              //ENABLE THIS FOR VERTICAL POSITIONING
              $('.bigSquare').css('margin-top', centerPosY + "px");
              //alert("resized");
  
          }
  
  
  
          centerElement();
  
          //refresh on resize
          //$(window).bind('resize', location.reload());
  
  
  
  
      });
  </code></pre>