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.
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.
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?
Link to code: http://ift.tt/1nz6bLu
PS: Please excuse the trivial comments in the 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 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
$("<div class='bigSquare' style='position:aboslute; width:" + bigSquareWidth + "px; height:" + bigSquareHeight + "px;'></div>").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 <= nLines; k++) {
// per row, generate as many smallSquares as fit each row
for (var i = 1; i <= 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
$("<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 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 <= 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());
});
Aucun commentaire:
Enregistrer un commentaire