Tiling gradients

Here’s a test. A simple diagonal gradient from white to black, first full size, then four tiles of the same, and lastly sixteen tiles:

It does not tile very nicely. Neither does one which has white-black-white:

And neither white-black-white-black one:

But the following one does! White-black-white-black-white:

Then for 6, 7, and 8 it again does not tile (showing just the four tile versions):

For sequence of 9 it tiles! And sequence of 13 too! And… umm, 17 again?

Proof by induction!

---

I’m sure this is like some very trivial mathematics. But I do not know it. And the grayscale is a little dreary, make it pop! Let’s have three colours:

Call them purple, teal, yellow. Unsurprisingly, the three colours don’t tile when it’s purple-teal-yellow (sequence of 3), neither purple-teal-yellow-purple (sequence of 4), neither purple-teal-yellow-purple-teal (sequence of 5), neither sequence of 6:

But for sequence of 7 (purple-teal-yellow-purple-teal-yellow-purple) it tiles! Then for 13 and 19 and 25 it does too.

---

Uh oh, let us take four colours now. Purple, blue, green, yellow.

Green green, green green. Yellow? Yellow!

For sequence of 4 the tiling doesn’t work, but for sequence of 9 it does! And for 17 too, and 25.

This looks very much like 2n + 1

---

Five colours!

That’ll be 11, 21, 31, 41, 51, …

And lastly ten colours, with sequence of 21:

---

Why 2n + 1 ?

This is perhaps too embarassingly simple to write a blog post about, but I found none and found a lot of people on the internet confused by their gradients not aligning.

The n here is the number of different colours in your gradient. The 2n + 1 is how many colours you need to include in your code.

The +1 is simple: the last colour of the palette needs to be the same as the first, as they “touch” in the corner.

The 2n is not that difficult either: when it was n, the corners touch just fine, but the sides are shifted by half against each other, not lining up. 2n makes the sides line up, too.

Bonus time?

Here, have an animated one: