javascript - Graphical pattern generation in jQuery -
i trying build -primitive- pattern generator in jquery goes on 1x1 pixel , determines, depending on value in preceding pixel, 1 in question going like.
seeing relatively proficient in jquery unfortunately rather oblivious ways of requestanimframe api, realizing 1x1 pixel approach results in extremely slowed down execution, making browsers assume script has crashed (?) though in fact working, essentially, slow.
i have therefore tested in bigger tile sizes because naturally easier generate. question @ point - should throw jquery approach aside , revise script in abovementioned api or there way make more efficient , realistically working jquery?
link code: http://codepen.io/grovelli/pen/yepmrz/
ps: please excuse trivial comments in code
<html> <head> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> // 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 pattern drawing // tile library var tilearray = ["#00ff5a", "#02d24b", "#01b13f", "#039737", "#027d2d", "#02521e"]; // assign random color color array tilearray function drawtile() { var selectedi; // if selectedi not 2, roll 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, start building pattern until termination, i.e. orientationpoint being set 0 if (selectedi == 2) { orientationpoint = 1; // disables 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 preferrable size in case var chosentile_hex = tilearray[selectedi]; // use value of selectedi determine color use tile i.q. /* // show @ position background color value of #nchildren-1 found within tilearray array //alert("found @ " + (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 main container, bigsquare body of html file $("<div class='bigsquare' style='position:aboslute; width:" + bigsquarewidth + "px; height:" + bigsquareheight + "px;'></div>").appendto("body"); /* random colors calc function // function 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 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 random hex code when function terminates return randomhexcode; } */ // calculate total number of children var nlines = bigsquareheight / smallsquareheight; // per column var nperline = bigsquarewidth / smallsquarewidth; // , per row // generate many rows fit .bigsquare (var k = 1; k <= nlines; k++) { // per row, generate many smallsquares fit each row (var = 1; <= nperline; i++) { // nchildren accumulating number of children elements in .bigsquare var nchildren = $('.bigsquare').children().size(); // pass accumulating number each newly generated div // give each div unique id label $("<div class='smallsquare' id='" + nchildren + "' style='width:" + smallsquarewidth + "px; height:" + smallsquareheight + "px; float:left;'></div>").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 , in closure context reuse them in inner functions, e.g. settimeout (function(nchildren) { settimeout(function() { $('#' + nchildren + '').fadein('slow'); //alert('#'+''+k+i+''); }, nchildren * 18); })(nchildren);*/ // first loop end } // second loop end } //the code below returns number of child elements of bigsquare //alert($('.bigsquare').children().size()); setinterval(function() { //alert("interval"); (var h = 0; h <= nchildren; h++) { //alert(h); //alert(randomhex()); //$('#'+h+'').css('background-color',randomhex); } }, 2000); //alert($(".bigsquare").children(1).width()); //for centering purposes... function centerelement() { //resetting margin properties each time function called // 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 , resizing // might freeze ff on macs $('.bigsquare').css('margin-left', centerposx + "px"); //enable vertical positioning $('.bigsquare').css('margin-top', centerposy + "px"); //alert("resized"); } centerelement(); //refresh on resize //$(window).bind('resize', location.reload()); });
Comments
Post a Comment