Expression needed for display pattern

[fippy]

I’m a web designer looking for a little help with a display problem. I’m trying to create a 4 column display, where the first row is:

blue green blue green

and the second row is reversed

green blue green blue

the third rows then mirrors the first and the pattern continues...

I’m looking for an expression/equation/rule so that I can color each box...

I hope I’m posting in the correct place (please advise if not)

 

[JeffM]

I have no idea whether this satisfies your needs, but you could code blue = 1 and green = - 1. Let r = row number.

[MATH]y = r - 2 * \lfloor r \div 2 \rfloor + 1.[/MATH]
You can get the r in funny brackets using the INT function in excel.

[MATH]r \text { is odd } \implies \lfloor r \ div 2 \rfloor = \dfrac{r - 1}{2} \ implies y = r - (r - 1) + 1 = 2.[/MATH]
[MATH]r \text { is even} \implies \lfloor r \div 2 \rfloor = \dfrac{r}{2} \implies y = r - r + 1 = 1.[/MATH]
Now code the first and third cells in a row as [MATH](-1)^y[/MATH],

Code the second and fourth cells [MATH](-1)^y * (-1)[/MATH]

 

[Mr. Bland]

Piece of cake: add the index of the row and column, then take the remainder (mod) when dividing by 2.

let COLORS = [ "blue", "green" ];

for (let y = 0; y < numRows; y++) {
    for (let x = 0; x < numCols; x++) {
        elements[y * numCols + x].style.backgroundColor = COLORS[(y + x) % 2];
    }
}

This works because the row index alternates between even and odd numbers, which forms the basis of the color cycle for that row. A similar approach can be used with larger sets of colors.

 

[Cubist]

You can also achieve this within CSS. This seems less of a "math" solution than the above posts, but it's probably easier for a web developer to use and maintain. Try if for yourself by following this link and then REPLACE this CSS code (15 lines down):-

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

With this:-

#customers td {background-color: blue;}

#customers tr:nth-child(even) td:nth-child(even),
#customers tr:nth-child(odd) td:nth-child(odd) {background-color: green;}

and then, obviously, click "RUN>>"