this more math related question.
i'm trying create cute fading effect jquery, splitting element in number of blocks, fading each of them, delay fading effect based on array.
so create blocks table have 2 variables:
var rows = 4, cols = 10; this divide element blocks like:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 then i'm creating array decides how blocks animate. example, left-to-right diagonal animation array like:
order = [0, 10, 1, 20, 11, 2, 30, 21, 12, 3, 31, 22, 13, 4, 32, 23, 14, 5, 33, 24, 15, 6, 34, 25, 16, 7, 35, 26, 17, 8, 36, 27, 18, 9, 37, 28, 19, 38, 29, 39]; and specific case works :d
my question how create order array automatically, not manually, based on number of blocks (rows x columns), can change ?
thank you
this it:
var arr = []; var rows = 4; var cols = 10; for(var = 0; < rows + cols - 1; i++){ for(var j = math.min(rows, + 1) - 1; j >= math.max(0, - cols + 1); j--){ arr.push((j * cols) + - j); } } fiddle: http://jsfiddle.net/bmxpy/
edit: here's attempt @ explaining how came this. important, use table of numbers above visualize , if needed, print , draw out diagonals.
first, think want, it's diagonals. in example above first diagonal 0, 10, 1, 20, 11, 2, 30, 21, 12, 3, etc. if think how many of diagonals there are, rows + cols - 1. first loop:
for(var = 0; < rows + cols - 1; i++){ now, ignore second boundries. in general case (the whole center), each of these diagonals "rows" long. , since want go bottom up, want reverse loop. inner loop:
for(var j = rows - 1; j >= 0; j--){ now, must deal both boundries (left , right).
for left boundry, if @ number of diagonals less "rows" long, see rows - 1. , these diagonals we'll see length of each i + 1. following inner loop handle general case , left boundry:
for(var j = math.min(rows, + 1) - 1; j >= 0; j--){ you see diagonal 0, run once, 1 run twice, etc. , general case (i >= rows) run "rows" times.
now, right boundry. if @ diagonals on right shorter "rows", see diagonals greater "cols" (in example cols 10, 0 indexed, row 10 , beyond). replacing j >= 0 j >= math.max(0, - cols + 1) run 0 general case , left boundry shorten right boundry. this:
for(var j = math.min(rows, + 1) - 1; j >= math.max(0, - cols + 1); j--){ and finally, actual calculation of number in each location. i represents diagonal , j represents index of number on diagonal j = 0 top number if you're looking @ posted table of numbers. j = 0 (top row of numbers) number i, each row below top, need multiply number "cols" in order number directly below first row number, number needs adjusted left. done subtracting j row number. j = 1 (the 2nd row) need move number left 1 (subtract 1). have i horizontal position on first row, + (j * cols) move down appropriate row , -j adjust diagonal (if have drawn diagonals, trace out 1 of them visual). this:
(j * cols) + - j put , final code above. hope made sense.
Comments
Post a Comment