javascript - Creating a grid of rectangles that increase in alpha values up to 255 using for loops -

i created grid of rectangles increase in opacity go down , right. i've divided 256 alpha values evenly 4 columns (64 rectangles per column).

i'm trying cut code down using for loops each column.

i've managed created column of rectangles, fill() for i've setup isn't applying opacity how need to.

here's i'm running column 1:

  (var = 0; < 256; a++) {     fill(155,0,0,a);   }    var y = 0;   (var x = 0; y <= 1890; x += 210) {     (var y = 0; y <= 1890; y += 30) {       rect(x,y,200,20)     }   } 

i've tried combining fill() , rect() loops, same issue color scale sticks (155,0,0,255) rather starting @ 0 , going 63 (for column alone).

i'm capped @ 4 fill & 4 rect lines in total (e.g. 1 fill-rect-combo per column).

for complete code , visual representation of grid, https://codepen.io/anon/pen/kvdjwb

the first for loop runs, , finishes, before nested for loop starts. can think program equivalent this:

  fill(155,0,0,0);   fill(155,0,0,1);   fill(155,0,0,2);   fill(155,0,0,3);   //...   fill(155,0,0,254);   fill(155,0,0,255);     var y = 0;   (var x = 0; y <= 1890; x += 210) {     (var y = 0; y <= 1890; y += 30) {       rect(x,y,200,20)     }   } 

this makes obvious first for loop isn't doing much, , last call fill() matters.

if want each cell, or each row or column, different color, you're going have call fill() inside nested for loop somewhere.